React, TS boilerplate 만들기

순서

1. npm install --global yarn

2. yarn init --y : package.json 생성, —y를 할 경우 자동으로 모든 물음에 빈칸으로 응답.

3. yarn install, yarn

4. build, src 폴더 생성 및 .gitignore 폴더 생성
1. src 하위 폴더로 index.html을 생성. !로 기본 세팅 후 body에 root라는 id를 가진 div 태그 생성.

5. yarn add react react-dom

6. yarn add -D typescript @types/react @types/react-dom
💡
D는 dev-dependency라는 뜻으로 프로덕트 환경에서는 사용하지 않겠다라는 것을 의미함. 바벨은 빌드할 때만 사용.

7. root에 tsconfig.json 파일 생성.
1. tsconfig.json은 tsc를 실행하면 자동으로 찾아서 변환해주는 환경 설정. 해당 설정을 기반으로 동작함.

8. src 하위에 App.tsx와 index.tsx 파일 생성.

9. 자바스크립트 transcompiler인 babel 설치. yarn add -D @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript @babel/plugin-transform-runtime
1. babel은 최신 ES6, ES7 버전의 javascript코드를, ES5버전의 코드로 바꾸어주는 Node.js 패키지.
2. @babel/core : Babel 기반에 핵심 패키지
3. @babel/cli : Babel command를 사용할 수 있게 해주는 패키지
4. @babel/preset-env : Babel에 여러 플러그인을 스스로 조합해 놓은 미리 준비된 프리셋을 사용할 때 사용되는 패키지
5. @babel/preset-react : 리액트 애플리케이션을 만들 때 필요한 플러그인들의 집합. JSX로 작성된 코드들을 createElement 함수를 이용한 코드로 변환해 주는 바벨 플러그인이 내장되어 있음.
6. @babel/plugin-transform-runtime : babel이 트랜스파일링을 하는 과정에서 폴리필이 필요한 부분을 내부의 헬퍼 함수를 사용하도록 치환해줌.
💡
Plugin : 규칙 하나하나를 세밀하게 적용할 때 사용. Preset : 이 규칙을 모아 놓은 세트로서, 세트들을 적용할 때 사용.

10. 루트에 .babelrc 폴더 생성 : 하위 디렉토리나 파일에서 특정 플러그인이나 변환(규칙)을 실행할 때 사용 → 브라우저가 이해할 수 있는 자바스크립트 형식으로 바꿔줌.

11. yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin
1. 웹팩(Webpack)은 자바스크립트 정적 모듈 번들러(Static Module Bundler).
2. webpack-cli : 터미널에서 webpack 명령어를 사용할 수 있게 해줌.
3. webpack-dev-server : 웹팩 개발 서버. 새로고침 없이 수정된 부분을 즉각 반영해줌.
4. html-webpack-plugin : 번들링한 js, css 같은 파일들은 시작점 html 파일에 <script src='~'> <link ~> 이런 식으로 추가해줘야 하는데 이를 알아서 수행함.

12. yarn add -D babel-loader
1. babel-loader를 사용하면 JS와 webpack 모두 돌아가게 설정해줌.

13. webpack 파일 하위에 webpack.config.js 파일 생성.
1. Entry : 웹팩이 어떤 모듈로부터 시작해서 디펜던시 그래프를 그려나갈지 명시함.
2. Output : 웹팩이 번들을 꾸리고 나서 결과물을 어디로 내보낼지 지정하는 속성.
3. Loader : loader는 모듈을 입력받아 원하는 형태로 변환 후 새로운 모듈을 출력해 주는 함수.
4. Plugin

14. (App.tsx에 style을 적용하고 싶은 경우) src 폴더 하위에 styles.css 생성.
1. yarn add -D css-loader style-loader

15. src 하위에declarations.d.ts 생성.
1. 타입스크립트 선언 파일 d.ts 는 타입스크립트 코드의 타입 추론을 돕는 파일임.
2. 다음과 같은 선언을 해주면 해당 확장자의 이미지를 사용할 수 있음.

declare module "*.png";
declare module "*.svg";