[1] 디펜던시 추가 yarn add -D @babel/runtime @babel/plugin-transform-runtime @babel/runtime Babel 변환 과정에서 사용되는 런타임 헬퍼(helper) 함수와 core-js의 폴리필(polyfill)을 제공하는 코어 패키지의 일종 @babel/plugin-transform-runtime @babel/runtime 패키지가 제공하는 **헬퍼함수와 폴리필(polyfill)**을 재사용할 수 있도록 돕는다. babel이 async-await 문법을 지원하도록 돕는다. *헬퍼 함수: Babel 변환 시 필요한 여러 보조 기능을 제공합니다 (예: 클래스 생성, 스프레드 연산자 확장 등). *폴리필: 구형 브라우저에서 ES6 이상의 기능(예: Promi..
7. Husky로 local 코드 품질 관리하기 Whay is Husky? pre-commit (커밋 전) 단계에서 코드 린팅 및 포매팅 자동화를 통해 코드 품질을 관리하는 도구 팀으로 작업시에 설정한 린팅,포매팅을 자동 적용하기 때문에 일관성 있는 코드를 작성할 수 있다. [1] 디펜던시 설치 yarn add -D husky@4 lint-staged husky husky는 Git 훅(hooks)을 쉽게 관리하고 사용할 수 있게 해주는 도구입니다. ( *Git Hook : 특정한 Git 이벤트(예: 커밋, 푸시)가 발생할 때 자동으로 실행되는 스크립트 ) lint-staged Git의 staged 파일(커밋하기 전에 스테이징된 파일)에 대해 린트(lint)나 다른 자동화된 프로세스를 실행하는 도구 hus..
6. Prettier 적용 ( code beautifier ) Prettier를 통해 코드 서식 지정 스타일 가이드를 적용할 수 있다. [1] VScode Prettier extension 설치 [2] Prettier관련 Dev 디펜던시 설치 yarn add -D prettier eslint-config-prettier eslint-plugin-prettier prettier prettier 코어 라이브러리 eslint-config-pretteir prettier와 충돌할 수 있는 eslint rule을 disable 시켜줌 eslint-plugin-prettier prettier를 eslint rule에 맞게 동작시키는 플러그인 [3] root디렉토리 .prettierrc.js 설정 파일 추가 // ...
5. ESLint 사용하기 [1] ESLint ? JS 코드의 버그를 미리 찾아내고, 코드 스타일과 일관성을 유지하는 데 도움을 줌. [2] ESLint 적용을 위한 패키지 설치하기 (for React with TS) yarn add -D eslint yarn add -D eslint-plugin-react eslint-plugin-react-hooks // react, hooks lint 규칙 지원 yarn add -D @typescript-eslint-parser @typescript-eslint/eslint-plugin // ts parser , ts lint 규칙 지원 yarn add -D eslint-plugin-import eslint-plugin-jsx-a11y // ESModule 사용 ,..
React Refresh 란? 코드가 중간에 수정 되더라도 컴포넌트의 state를 유지시켜주는 기능 Cf.) CRA(Create React App) 환경에서 셋업한 프로젝트는 기본 적용 되어있으므로 별도의 설정이 필요 없다. Why should we use this ? React app 개발을 하다보면 코드가 빈번히 수정되고 이 때마다 컴포넌트의 state가 초기화 되는 문제가 발생, 따라서 코드가 수정되더라도 컴포넌트 상태를 지속시켜주는 기능이 필요하다. Solution 아래의 두 모듈을 설치 yarn add -D @pmmmwh/react-refresh-webpack-plugin react-refresh react-refresh React의 Fast Refresh 기능을 구현하는 데 사용되는 모듈, 컴..
dev , prod와 같은 다중 환경에서의 웹팩 설정하기. 현재까지의 설정 코드로는 development목적으로는 사용할 수 있지만, production 목적으로 사용할 때는 번들크기 및 환경 구성과 관련해 어느 정도 최적화가 필요하다. 1. dev,prod 환경에 재사용되는 파일로 Rename하기 (webpack.config.js ⇒ webpack.common.js) 기존 파일에서 mode : ‘development’ 옵션 제거 2. webpack.dev.js 추가 module.exports={ mode: 'development', devtool: 'cheap-module-source-map', //원본 소스와 변환된 코드 사이의 매핑을 제공하며, 빌드 속도와 파일 크기 사이에 좋은 균형을 제공, 하지..
# 1. Style sheet 모듈로 불러오기 1. [src] > style.css 파일 생성 , App에서 import 하기 h1 { color: orange; } 2. css loader , style-loader 설치 yarn add -D css-loader style-loader css- loader ( css 모듈로 불러오기 ) 기능: css-loader 이 로더는 CSS 파일을 모듈로 변환하여 JavaScript에서 import할 수 있게 해줍니다. 사용 예: import ‘./style.css’ style-loader ( style 태그로 만들어 head에 삽입하기 ) 기능: style-loader는 JavaScript에서 불러온 CSS를 태그로 만들어 브라우저의 부분에 삽입합니다. css-..
코스 구성 webpack5와 TS를 이용한 react app basic setup [ Now We Are Here ! ] images 와 SVGs 렌더링 허용을 위한 웹팩 구성하기. dev , prod와 같은 다중 환경 웹팩 설정 셋업하기. react refesh 추가하기. ESLInt 로 린팅하기. 코드 포매터 with pretttier 사용하기 Husky 사용하기 ( local 환경에서 Git hooks 을 쉽게 관리할 수 있게 해주는 도구) next steps 초기 셋업 git init add .gitignore build 폴더 ignore에 추가 (빌드 생산물을 깃에 저장하지 않을 것임) node_modules add [src] folder 소스코드 add [build] folder 배포를 위한 ..
