[온라인 강의] 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint)

Wendy·2021년 8월 24일
0

IT도서 / 강의 리뷰

목록 보기
6/6

(강좌) 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint)

강의자료 블로그

강의 내용, 후기

npm, webpack, babel, eslint등 프론트 개발환경에서 가장 많이쓰이는 것들을,
이해하기 쉽게 예제와 함께 소개해주고,
나중에 볼수있게 깔끔하게 정리된 자료도 블로그로 공개되어있다.

강사님 말씀대로 프론트환경은 매우 자주 바뀌기때문에 이걸로 공부 다했다고 할 수 없지만
나처럼 웹검색/공식문서 읽어도

1. 웹팩

https://webpack.js.org/concepts

1) 배경

모듈을 문법으로 지원한건 ES2015부터
이전에는 다양한 방식으로 사용(script태그, IIFE, CommonJS, AMD, UMD)
모듈을 쓰는 경우 script태그의 type에 "text/javascript" 대신 "module"
그러나 모든 브라우져에서 모듈을 지원하지는 않음
그래서 웹팩이 필요!

2) 엔트리/아웃풋

서로 의존하고 있는 js파일들을 합쳐주는(번들링) 도구
주요옵션: --mode, --entry, --o(output)
(번들링 후 index.html파일 script태그에 type별도지정 없이 넣어주면 됨)

매번 webpack명령어를 칠 수 없으니 config파일을 만들어보자
webpack.config.js를 프로젝트 최상단에 두면 지정하지않아도 알아서 읽는다
엔트리 아웃풋 여러개 지정 가능하고, 동적으로도 생성가능

CRA에서 쓰는 웹팩 설정은 어디서 볼수있나?

node_modules/react-scripts/config/webpack.config.js

///CRA로 프로젝트 생성 후 package.json파일의  script

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

script태그는 왜 바로 닫을수없지?

self-closing을 할 수 있는 태그는 명세서 상 end tag가 required가 아닌 경우들이다
html에서는 <... /> 엔딩 슬래시가 닫힘의 의미가 없고 가독성 좋게 하기 위한 선택사항이다.
(xhtml에서는 필수)

참고:
https://developer.mozilla.org/ko/docs/Glossary/Empty_element
http://www.devkuma.com/books/pages/1049

3) 로더

module: {
  rules: [{
      test: //대상(정규식)
      use: [{
        loader: //사용할 로더
        options: {
      	  publicPath: //배포 후 파일이 실제로 존재할 위치
          name: //예 - '[name].[ext]?[hash]'
          limit: //url-loader의 경우 DataURI 처리할 기준 크기
        }
      }] //사용할 로더 목록 (오른쪽에서 왼쪽으로 처리)
    },
    ...
]}

//로더가 1개면, use:[{}] 없이 loader: '', options:{} 바로 작성 가능
//옵션 없이 사용할거면 use:['로더이름','로더이름'] 도 가능

css-loader: css파일을 모듈처럼 불러와 js에 붙여줌
style-loader: js에 붙은 css코드를 dom에 적용
file-loader: 파일을 모듈처럼 불러올수있게 해줌
url-loader: 파일을 모듈처럼 불러와 압축해서 js에 붙여줌

url-loader (baseURI)의 장점

미리 js파일에 담아두어서 네트워크 통신 횟수를 줄일수있다

url-loader 에서 limit 크기를 넘으면 file-loader로 처리된다는데, 그런 설정을 나는 따로 하지 않았는데??

local package.json에 파일 로더가 없고,
webpack.config.js에도 추가 설정이 없지만

4) 플러그인

로더는 파일처리, 플러그인은 번들 처리

  • BannerPlugin: 결과물에 정보 추가
  • DefinePlugin: 빌드 타임에 결정된 값들을 app에 제공
  • HtmlWebpackPlugin: html파일 관리(주석제거, 빈칸제거, 변수주입 등)
  • CleanWebpackPlugin: 이전 빌드 결과물 자동 삭제
  • MiniCssExractPlugin: 번들 결과물에서 css만 별도 파일로 분리

5) 서버

webpack-dev-server 웹팩개발서버

웹서버는 다양한데 이걸 선택하는 장점은...
웹팩을 쓰고있다면 빠르게 설치가 가능하고,
코드 작성 후 서버를 빠르게 띄울수있고,
수정도 바로바로 반영해주기 때문이다!

webpack.config.js에 devServer: {} 로 옵션설정

6) 핫로딩

HMR: Hot Module Replace - 바뀐 모듈만 갱신

7) 최적화

  1. production 모드 사용 :
    모드에 따라 빌드시 사용되는 플러그인이 다름
    (디버깅 최적화? 서비스 최적화?)

  2. optimization
    optimize-css-assets-webpack-plugin : css파일 공란제거
    terser-webpack-plugin: 난독화, debugger/console.log 제거

  3. code 스플리팅

  4. external:필요없는 부분 번들링 제외

2. 바벨

바벨: 플러그인 안쓰면 그냥 기본 코드 반환
플러그인: ES5+를 ES5로 변환
프리셋: 플러그인 모음
폴리필: 플러그인이 변환하지못한 것들 처리 ( ex 사파리에서 promise)

3. ESLint, Prettier

eslint - 코드 품질과 관련된 formatting
prettier - 더 예쁘게 (eslint 자동픽스 안해주는것도 여기서 해줌)
(중복 사용시 따로 설정이 필요함)

자동 체크 (저장할때마다)

//editor(vs code)자체에 eslint를 설치

//.vscode/.settings.json
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}
profile
개발 공부중!

0개의 댓글