- 프론트엔드 개발환경 제로부터 구축
- 웹팩, 바벨, 린트
- 자료
- 자바스크립트 패키지 매니저이다.
- Node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할
- 패키지 설치 및 관리를 위한 CLI(Command line interface)를 제공한다
- package.json 파일을 통해서 "프로젝트 정보" 및 "패키지 의존성" 관리
- 웹팩은 여러개 자바스크립트 파일을 하나의 파일로 합쳐주는 번들러(bundler)다.
- 하나의 시작점(entry point)으로부터 의존적인 모듈을 전부 찾아내서 하나의 결과물을 만들어 낸다.
- --mode는 웹팩 실행 모드는 의미하는데 개발 버전인 development를 지정한다
- --entry는 시작점 경로를 지정하는 옵션이다
- --output은 번들링 결과물을 위치할 경로다
- 로더는 리소스들을 웹팩이 접근가능한 모듈로 변환시킨다.
- 타입스크립트 같은 다른 언어를 자바스크립트 문법으로 변환, 이미지를 data URL 형식의 문자열로 변환, CSS 파일을 자바스크립트에서 직접 로딩할수 있도록 모듈로 변환
- 리소스들이 자바스크립트가 접근 가능한 모듈로 변환되면 import 구문으로 리소스들을 자바스크립트 코드 안으로 가져올수 있다.
- 번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도
- 로더가 파일 단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다.
- 최신 문법으로 작성된 자바스크립트 코드를 다양한 브라우져에서 돌아가는 어플리케이션을 만들기 위한 도구다.
- 바벨의 코어는 파싱과 출력만 담당하고 변환 작업은 바벨 플러그인이 처리한다.
- 여러 개의 플러그인들을 모아놓은 세트를 프리셋이라고 하는데 ECMAScript+ 환경은 'preset-env' 프리셋을 사용한다.
- 바벨이 변환하지 못하는 코드는 폴리필이라 부르는 코드조각을 불러와 결과물에 로딩해서 해결한다.
- babel-loader로 웹팩과 함께 사용하면 훨씬 단순하고 자동화된 프론트엔드 개발환경을 갖출 수 있다.
- 포맷팅 : 일관된 코드 스타일을 유지하도록 하고 개발자로 하여금 쉽게 읽히는 코드를 만들어 준다. 이를 테면 "들여쓰기 규칙", "코드 라인의 최대 너비 규칙"을 따르는 코드가 가독성이 더 좋다.
- 코드 품질 : 어플리케이션의 잠재적인 오류나 버그를 예방하기 위함이다. 사용하지 않는 변수 쓰지 않기, 글로벌 스코프 함부로 다루지 않기 등이 오류 발생 확률을 줄여 준다.
- 프리티어는 좀 더 일관적인 스타일로 코드를 다듬는다. - ESLint의 역할 중 포매팅과 겹치는 부분이 있지만 코드 품질과 관련된 기능은 하지 않는 것이 ESLint와 다른점
- 린트와 프리티어 둘 다 사용하는 경우 규칙이 충돌하므로 프리티어와 충돌하는 ESLint 규칙을 끄고 프리티어 규칙을 ESLint 규칙으로 추가한다.