CRA없이 Webpack, React, TypeScript로 개발 환경 설정하기

 토이 프로젝트를 만드는 과정에서 CRA에 TypeScript를 적용하는 것이 아닌, npm init을 통한 초기 설정부터 Webpack, Babel, React, TypeScript를 하나하나 적용하는 과정을 이번 글로 작성해보려 합니다.

 

npm init

 원하는 이름의 폴더를 생성한 후, npm init부터 시작해보도록 하겠습니다.

mkdir ts-react-noncra

cd ts-react-noncra

npm init

 

 여기서 npm init을 실행하면 package name, version, description 등 프로젝트에 대한 정보를 입력하는데, 따로 작성하고 싶은 정보가 있다면 작성해도 되지만, 작성하고 싶은 내용이 없는 경우, npm init -y로 스킵할 수 있습니다. 과정을 진행하면 package.json 파일이 생성된 것을 확인할 수 있고, package.json 폴더에 작성한 정보가 저장되어 있을 것입니다. 필자는 아무것도 작성하지 않았기 때문에 다음과 같은 내용이 작성되어 있습니다.

 

package.json

 

Webpack

 webpack을 적용하기 위해 webpack, webpack-cli, webpack-dev-server를 설치해주세요.

npm i -D webpack webpack-cli webpack-dev-server

또한, html 파일을 템플릿으로 생성할 수 있게 도와주는 플러그인인 html-webpack-plugin을 설치합니다.

npm i -D html-webpack-plugin

루트 폴더에 webpack.config.js 파일을 만들어 Webpack 관련 개발 환경을 세팅해줍시다.

 

Babel

 babel을 적용하기 위해 babel-loader, @babel/core, @babel/preset-env @babel/preset-react @babel/preset-typesciprt를 설치해주세요.

npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript

 

루트 폴더에 babel.config.js 파일을 만들어 설치한 preset을 적용해줍니다.

babel.config.js

 

React

 react를 적용하기 위해 react, react-dom을 설치해야 합니다. 여기서, react는 개발 환경만이 아닌 실제 환경에서도 동작해야 하므로 devDependencies에 설치하는 것이 아닌, dependencies에 설치해야 합니다.

npm i react react-dom

 

TypeScript

 typescript를 적용하기 위해 typescript, @types/react, @types/react-dom을 설치합니다.

npm i -D typescript @types/react @types/react-dom ts-loader

프로젝트에 적용할 타입스크립트 옵션을 tsc --init을 통해 만들어줍니다.

tsc --init

tsconfig.json 파일이 생성됩니다.

 

 

 

만약 여기서, tsc --init이 안된다면?

우선, typescript를 global로 설치한 적이 있는가 확인해봅니다.

npm i -g typescript

 

Windows 환경에서 global로 설치했음에도 에러가 나온다면?

Windows PowerShell을 관리자 권한으로 실행한 후, 다음과 같은 명령어를 실행합니다.

Set-ExecutionPolicy Unrestricted

Y를 입력한 후 엔터를 눌러, 실행 규칙을 변경합니다.

 

tsc --init을 입력하면 tsconfig.json 파일이 생성됩니다.

 

public/index.html

 구 버전의 Webpack으로 진행하면 public 폴더 없이 루트 디렉토리에 index.html을 만들어도 정상적으로 동작했지만, 모던 Webpack은 public 디렉토리를 만든 다음 index.html을 만들어야 동작합니다. 따라서 루트 디렉토리에 public 디렉토리를 만들고, public 디렉토리에 index.html을 만들어줍니다. 

동작 확인하기

 react가 제대로 동작하는지 확인하기 위해 index.tsx, App.tsx 파일을 만들어줍시다.

index.tsx

App.tsx

혹시, tsx에서 코드를 작성하다 보면 다음과 같은 에러를 만날 수 있습니다.

tsconfig.json에서 'jsx'설정을 'react-jsx'로 변경하면 됩니다.

tsconfig.json

마지막으로, pacakge.json에서 script 명령어를 설정해줍니다.

package.json

npm run dev를 통해 실행해봅시다.

npm run dev

다음과 같은 화면을 확인할 수 있습니다.

---

프로젝트 소스 코드는 Github에서 확인하실 수 있습니다.

https://github.com/jaeyooniverse/ts-react-noncra