Share
Sign In
⚙️

React initial setting

폴더 구조 (Atomic design pattern)
과거 폴더 구조
현재 폴더 구조
TS configuration
project start
tsconfig
Prettier
설치
.prettierrc & .prettierignore 설정
Eslint
설치
.eslintrc.json
코드 보기
Resources 추가 (eslint-plugin-license-header플러그인 설치한 경우만)
라이선스에 따라 내용 수정 필요함.
husky
설치
package.json 수정
.husky/pre-commit 파일 생성
webpack
모듈 번들러로, 웹에서 모듈을 하나로 합쳐 브라우저가 사용하도록 한다.
설치
tools/webpack/*.js 파일 추가
webpack.aliase.js
webpack.config.dev.js
webpack.config.prod.js
webpack.helpers.js
webpack.optimizer.js
webpack.plugins.js
webpack.rules.js
package.json script 수정
cross-env가 설치되어 있어야 함 (yarn add -D cross-env)
Babel
최신 자바스크립트를 지원하지 않는 브라우저에서 사용가능하도록 설정.
설치
설치 코드 확인
.babelrc
연관된 페이지
React Coding Guide
React 홈으로 돌아가기
React.js
메인으로 돌아가기
폴더 구조 (Atomic design pattern)
과거 폴더 구조
현재 폴더 구조
TS configuration
project start
tsconfig
Prettier
설치
.prettierrc & .prettierignore 설정
Eslint
설치
.eslintrc.json
코드 보기
Resources 추가 (eslint-plugin-license-header플러그인 설치한 경우만)
라이선스에 따라 내용 수정 필요함.
husky
설치
package.json 수정
.husky/pre-commit 파일 생성
webpack
모듈 번들러로, 웹에서 모듈을 하나로 합쳐 브라우저가 사용하도록 한다.
설치
tools/webpack/*.js 파일 추가
webpack.aliase.js
webpack.config.dev.js
webpack.config.prod.js
webpack.helpers.js
webpack.optimizer.js
webpack.plugins.js
webpack.rules.js
package.json script 수정
cross-env가 설치되어 있어야 함 (yarn add -D cross-env)
Babel
최신 자바스크립트를 지원하지 않는 브라우저에서 사용가능하도록 설정.
설치
설치 코드 확인
.babelrc
연관된 페이지
React Coding Guide
React 홈으로 돌아가기
React.js
메인으로 돌아가기
폴더 구조 (Atomic design pattern)
과거 폴더 구조