👩💻 인프런 강의
인프런에서 모든 강의 25% 👏 할인 행사를 진행할 때 '프론트엔드 개발환경의 이해와 실습'을 강의를 구매했다. 지금까지는 Javascript, Vue.js, Python 등을 위주로 공부했었는데 같은 팀이었던 스크립터분이 프론트엔드로서 나아가려면 개발환경 쪽을 좀 더 공부해보지 않겠냐 제안을 해주셔서 이번 기회에 공부 해보기로 했다!
강의 설명
모듈시스템을 사용하고 개발 환경을 자동화하는 방법(Webpack)
최신 자바스크립트 문법을 사용하는 환경 만들기(Babel)
동료와 협업하는 개발 환경 만들기 (ESLint, Prettier)
NPM
1. Node.js가 필요한 이유
- 최신 스펙으로 개발 가능
- 빌드 자동화
- 개발 환경 커스터마이징
2. Node.js 다운로드
- LTS : node로 서버를 운영할 때
- 최신 버전 : 개발 환경을 구축할 때
3. package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}- scripts : 프로젝트를 자동화할 수 있는 셸 스크립트를 입력하는 부분
- test : 문자열을 echo 명령어 작성 & 에러코드 1번을 반환
4. 외부 Package 설치
- npm init 명령어를 사용하여 package.json을 기록하고 프로젝트 초기화
- CDN 사용 : 외부 라이브러리를 직접 가져오는 방식(서버가 장애가 난다면 어플리케이션이 정상 작동하지 않음)
- 코드를 직접 다운로드 : 라이브러리가 업데이트 될 때마다 최신 버전으로 교체해야 함
- npm 사용 : npm install 패키지명
- package.json 내 유의적 버전 "^16.13.1" 표기
- 주 버전(Major Version): 기존 버전과 호환되지 않게 변경한 경우 = 16
- 부 버전(Minor version) : 기존 버전과 호환되면서 기능이 추가된 경우 = 13
- 수 버전(Patch version) : 기존 버전과 호환되면서 버그를 수정한 경우 = 1
- ^(캐럿) : ^16.13.1은 16.13.1 ~ 17.0.0 미만 버전까지 포함
Webpack
1. IIFE
즉시 실행 함수 표현
- 독립적인 스코프가 생성
- IIFE 안에서 실행되는 함수는 외부 접근 불가능(전역 스코프 오염 예방)
2. 모듈
- CommonJS : exports 키워드로 모듈으르 만들고 require() 함수로 불러 들이는 방식
- AMD : 브라우저 환경(비동기)
- UMD : AMD 기반으로 CommonJS까지 지원
- ES2015 표준 모듈 시스템 : export 키워드로 모듈을 만들고 import 구문으로 불러 들이는 방식
- 익스를 포함한 몇 몇 브라우저는 모듈 사용 불가능 (script 태그 내 type="text/javascript" 대신 type="module"을 사용)
3. 엔트리/아웃풋
Webpack 역할
모듈로 연결된 여러개의 자바스크립트 파일을 하나로 합쳐줌(번들러)
Webpack 실행 필수 옵션
1. --mode : development, production, none
2. --entry : 모듈의 시작점
3. --output : 결과 저장 경로
entry를 여러개 사용하는 경우
entry: {
main: './src/app.js',
main2: './src/app2.js',
}- filename: '[name].js으로 지정하면 entry에서 지정했던 main.js, main2.js로 파일명이 떨궈짐
npm으로 webpack 실행
- package.json 내 scripts 부분에 "build": "webpack" 추가
- npm run build 명령어로 실행
4. Webpack 세팅 순서
- npm init -y (-y는 기본값으로 세팅)
- npm install -D webpack webpack-cli 설치
- package.json에 build 명령어 추가
- webpack.config.js 파일 생성
- webpack.config.js에 mode / entry / output 작성
- npm run build
- npx lite-server (로컬서버 띄우기)
👩💻