Amada Coding Club

지난 SEO에 대한 이야기를 이어서 2023.01.12 - [Front-End/관련 지식들] - [Front-End] SEO의 개념과 중요성 [Front-End] SEO의 개념과 중요성 원래는 웹 라우팅에 대한 글을 먼저 쓰려고 했다가 참조 블로그에서 SEO와 SSR에 대한 내용을 다뤄 이 부분에 대해 먼저 이야기를 적어보고자 한다. 이 게시글은 SEO에 대한 내용이다. SEO란? SEO는 Se amadaclub.tistory.com SPA에서 SEO에 대한 문제에 대해 이야기해보자 먼저 SPA에 대해 알아보자 SPA란? SPA(Single Page Application)는 이름 그대로 최초로 가져온 하나의 페이지만을 사용하는 애플리케이션을 의미한다. 고전적으로 사용하던 MPA(Multi Page App..

원래는 웹 라우팅에 대한 글을 먼저 쓰려고 했다가 참조 블로그에서 SEO와 SSR에 대한 내용을 다뤄 이 부분에 대해 먼저 이야기를 적어보고자 한다. 이 게시글은 SEO에 대한 내용이다. SEO란? SEO는 Search Engine Optimization의 약자로 검색엔진최적화, 즉 구글, 네이버, 다음과 같은 검색엔진에서 사이트를 쉽게 찾도록 하는 프로세스, 작업, 절차를 말한다. 검색 엔진이 사이트를 쉽게 찾도록 하는 건 왜 중요할까? 우리가 검색어를 입력해 검색할 때 검색 엔진은 크롤링 후 자체적으로 정한 기준을 바탕으로 우선순위를 부여해 페이지 순서를 결정한다. 만약 제작한 사이트가 검색 엔진의 기준에 부합할수록 높은 우선 순위를 가질 수 있고 페이지의 상단에 위치 할 수 있다. 일반적으로 검색을..

어느 JS강의를 보던 Eslint와 Prettier 설정은 기본 옵션으로 달고 시작한다. 도대체 이것들이 뭔데 다들 이걸 설정하고 시작하는걸까? Eslint Lint는 보푸라기라는 뜻으로 프로그래밍에서 에러가 있는 부분에 표시를 하는 행위를 뜻함 Es는 ECMAScript의 약자이며 자바스크립트의 표준, 규격을 나타내는 용어 그러니까 자바스크립트 표준 문법에 맞지 않는 코드의 에러 표시를 도와주는 도구라고 생각하면 좋을듯 JS나 JSX의 정적 분석 도구로 코드의 문법적 오류나 안티 패턴을 찾아주고 코드의 일관된 형태를 유지시키는데 도움을 주는 오픈소스 프로젝트다. 정적 분석 도구는 이전에도 많이 있었지만 Eslint는 커스터마이징과 확장성이 우수해 많은 곳에서 사용하고 있다. 오픈소스 프로젝트이기 때문에..

리액트나 다른 npm을 사용하는 개발을 할 때 필수적으로 저장하는 package.json.. 지금까지는 이게 뭔지도 모르고 설치하라니까 설치하고 수정하고 그랬다. 근데 이제 블로그 정리를 시작하려는데 막상 개발환경 설정 게시글을 작성하려니 package.json 이 파일은 도대체 어떤 파일인지 궁금했다. package.json? 프로젝트의 정보와 해당 프로젝트가 의존하는(기능을 사용하는) 패키지에 대한 정보를 가지고 있는 문서이다. npm은 오픈소스 기반이기 때문에 한 사람이 배포한 패키지에 대해 다른 사람들이 사용할 때 관리하기 쉽게 하기 위해 정리해놓은 문서라고 생각하면 편하다. json파일이기 때문에 key:value 관계로 되어 있으며 이때 key(속성)값을 field라고 한다. 기본 구조를 확인..

요새 패스트 캠퍼스 강의를 듣고 있다. 첫 번째 강의로 바닐라JS를 통한 개발을 하고 있는데 여기서 웹팩을 다뤘다. 기록 안 하면 또 까먹을 것 같아서 기록한다. 일단 Webpack이란 무엇일까? 공식 사이트에 나온 내용은 웹팩은 모듈 번들러라고 한다. 모듈은 뭐고 번들은 뭘까? 아주 쉽게 설명하면 모듈은 각각의 각각의 자바 스크립트 파일, 번들은 그 파일들을 하나로 합친걸 말한다. 궁금증이 들었다. 하나로 합치는 게 도대체 뭐가 좋을까? 장점은 다음과 같다. 여러 JS를 하나로 압축하기 때문에 로딩에 대한 네트워크 비용을 낮춰준다 모듈 단위 개발이 가능해 가독성과 유지보수가 쉽다. 최신 JS를 지원하지 않는 브라우저에서 사용할 수 있는 코드로 쉽게 변환해준다. 나도 자세하게 알지 못하지만 사용자가 사이..