npm init으로 시작하는 typescript react 프로젝트 (1)

Hoony·2022년 7월 6일

React

npm init으로 시작하는 typescript react 프로젝트

목록 보기

1/3

react 프로젝트를 setting하는 방법들은 다양하다.

react 초기 세팅 방법들 에서 작성한 방법들 중에
어떠한 tool을 사용하지 않고 설정하는 방법을 소개해본다.

참고사항

진행한 내용은 아래 github repository로 확인할 수 있다.

https://github.com/bh-jang/non-cra-react

기본환경은 windows 10에서 진행되고
PackageManager는 npm으로 한다.

이 시리즈의 대상 독자는
React를 어느정도 다루어 봤다고 가정한다. (CRA로 만들어보거나..)
가급적 자세하게 작성할 예정이지만,
설명이 길어지는 부분들은 따로 학습이 필요할 수 있다.

잘못된 부분이 있다면 댓글남겨주시면 확인하고 수정하겠습니다.

시리즈 목표

시리즈로 작성될 예정이며 아래 순서로 작성될 것 같다.
시리즈는 글의 길이에 따라서 분리하여 작성될 수 있다.

(1) 초기 설정 (react, tyepscript, webpack, babel)
(2) styled-comopnents 적용
(3) ESLint, Prettier 적용
(4) 간단한 App 만들어보기

Project 생성

mkdir non-cra-react
cd non-cra-react
npm init -y

-y 옵션은 프로젝트 init할 때 물어보는 옵션을 모두 default로 하겠다는 의미이다.
옵션은 package.json에 작성될 값들을 물어본다. (프로젝트 이름, 버전 등등... )
package.json은 자유롭게 변경할 수 있기 때문에 옵션을 주고 시작해도 무방하다.

React App에서 'dependencies'와 'devDependencies' 알고가기

고민해보지 않은 문제였고, 별 생각없이 느낌적으로 의존성 관리를 하고 있었다.
글을 공개하려고 마음을 먹고 찾아보다가 알게된 내용을 공유한다.

https://github.com/facebook/create-react-app/issues/6180 에 따르면
React App은 build과정에서 bundler가 App에서 사용된 module들을 모두 필요로 하고
최종 결과물이 Static bundle형태로 제공되기 때문에 dependencies와 devDependencies를 구분할 필요가 없다.
따라서, node module을 배포하는 것이 아니라면 어디에 두어도 상관없다.
이 글에서는 devDependencies를 고려하지 않는다.

잘 이해가 안되어도, 그냥 넘어가도 무방하다.

React 관련 모듈 install

모듈을 설명 하기에는 글이 길어지기때문에 간단하게 요약만 하겠다.

npm install react react-dom react-refresh @types/react @types/react-dom

react react core 모듈
react-dom dom render 모듈
react-refresh react-hot-reloader의 후속 (새로고침 하지 않고 컴포넌트 렌더링)
@types/* typescript 환경이므로 모듈 자체가 @types 를 제공하지 않을 때 별도로 설치해준다.
아래부터는 더이상 설명하지 않는다. 더 알아보고 싶다면 타입스크립트 핸드북을 참조하라. (링크)

Typescript install & tsconifg.json

typescript 환경에서 개발을 하기 위해서는 typescript 설치가 필요하다.
또한 최종 build 결과물은 javascript이므로 javascript로 transpile(compile) 하는 과정이 필요하다.
transpile과 compile에 대한 차이는 링크 로 대신한다.

npm install typescript
npx tsc --init

typescript를 설치하고 tsc --init을 해주면 tsconifg.json 파일이 생성된다.
tsc는 typescript를 설치하면 사용할 수 있는 명령어이다.
Mac환경에서는 npx를 사용하지 않아도 되지만, windows에서는 보안상 이슈로 작동하지 않는다.
powershell을 사용자 권한으로 열면 된다고하지만, 확인해보지는 않았고 그냥 npx를 쓴다.
npx는 npm(5.2 이상) 설치시 포함되어있는 도구이며 1회성 실행을 할 수 있다.

tsconfig.json

tsconfig의 option들을 설명하는 글은 정말 많다.
해당 글에서 다루기에는 방대하기 때문에 모든걸 설명하지는 않는다.

{
  "compilerOptions": {
    "target": "es5",                      
    "jsx": "react",                            
    "module": "commonjs",                                                         
    "moduleResolution": "node",                       
    "allowJs": true,                                  
    "outDir": "./dist/",                                   
    "esModuleInterop": true,                             
    "forceConsistentCasingInFileNames": true,            
    "strict": true,                                    
    "noImplicitAny": true,                            
    "skipLibCheck": true                                 
  },
  "include": [
    "src/**/*"
  ]
}

tsconfig.json은 typescript환경에서의 option들을 설정할 수 있는 파일이다.
위 명령어로 만들어진 tsconfig.json은 모든 옵션들을 확인할 수 있다.
여기서는, default로 설정된 것만 남겨두고 주석들을 다 지웠다.
몇몇 필드는 babel로 typescript를 컴파일 하기 때문에 의미가 없는 것도 있다.
(참고) 2022년 6월부터는 windows10/11에서 IE실행시 Edge로 자동 전환된다고 한다

Hoony

아는 만큼 보인다

다음 포스트

npm init으로 시작하는 typescript react 프로젝트 (1)