[TIL] 2023-01-13

• 프리티어 기본 세팅 (+주석 무시기능)
  • 리액트 개발환경 구성하는 부분을 공부하다가 프리티어라는 것을 알게됨
  • 코드에서 띄어쓰기, 들여쓰기, 탭, 줄바꿈 등을 일정한 패턴으로 보기 좋게 정리해주는 프로그램
  • VSCode에서 프리티어를 사용하기 위해 확장프로그램으로 설치 후 기본 설정 ("editor.formatOnSave": true 파일 저장시 자동으로 prettier를 실행하도록 설정)
  • .prettierrc.js 파일로 옵션 설정 (참고 자료 페이지 참조)
  • 주석으로 특정 코드에서 프리티어 동작하지 않게 할 수 있음

console.log('Hello world!') //프리티어 적용
// prettier-ignore
console.log("Hello world!"); //프리티어 미적용 

• 웹팩 (webpack)

  • 리액트 개발환경 구성 중에 개발모드, 빌드모드를 공부하면서 접하게됨

  • 자바스크립트 파일의 번들링과 압축에 사용

  • 모듈 번들러

  • 모듈 = 애플리케이션이 동작하는 데 필요한 파일

  • 다양한 입력 모듈을 결합하여 훨씬 단순한 형태의 모듈로 변환해 주는 역할을 함 => 웹팩의 결과물 === 번들(bundle)

  • 개발 모드로 실행 시, 웹팩이 서버 형태로 동작함 (인상 깊었던 부분)

    ex) npm start > react-scripts start > 웹펙 웹 서버 - 번들파일 > 웹 브라우저

  • 개발 모드에서 핫 모듈 교체(HMR, hot module replacement, hot reloading) - 소스코드를 수정하거나 기능을 추가하면 변경 사항이 즉각 웹 브라우저에 반영

[참고 자료]

https://iotnit.tistory.com/m/2 Prettier 및 ESLint 설정
https://webpack.kr/concepts/ webpack 공식문서

https://www.notion.so/TIL-2023-01-13-6c2a64d154c24eb8af15a4e4cd320835 구체적인 내용 정리