React & Typescript Setup (without CRA) - 1 (React / Typescript 설정)

Asher·2021년 10월 5일

React-Typescript Setup (without CRA)

목록 보기

1/6

React / Typescript 설정

React 프로젝트를 생성할 때, npm에서 제공하는 creat-react-app(CRA)를 사용하여 쉽게 생성할 수 있다. 하지만 직접 webpack, babel 등을 사용하여 CRA의 도움 없이 프로젝트를 생성해보고자 한다.

(프로젝트 설정을 내 맘대로 커스터마이징 할 수 있다는 장점도 있고 그냥 webpack&babel 등의 프론트엔드 초기 설정에 익숙해지고 싶었다)

1. 프로젝트 생성

npm으로 프로젝트를 초기화한다. (name, author 등 설정)

$ npm init

초기화 후 package.json 파일이 생성되는데, 프로젝트의 정보와 설치된 라이브러리 (dependancies)등을 담고 있다.

2. React & Typescript 설치 및 설정

1) 리액트 패키지를 설치한다

$ npm install react react-dom react-router-dom

2) 타입스크립트 패키지를 설치한다

$ npm install -D typescript

3) 타입 정의 라이브러리를 설치한다 (라이브러리가 추가되면, @types/[라이브러리] 형식으로 설치해준다)

$ npm install -D @types/react @types/react-dom @types/react-router-dom

4) styled-components 라이브러리를 설치한다 (styled-components 사용할 경우)

npm install styled-components styled-reset

npm install -D @types/styled-components

5) 아래 명령어로 tsconfig.json 파일을 생성 후 내용을 수정한다.

$ npx tsc --init

{
  "compilerOptions": {
    "target": "es5",                                
    "module": "commonjs",                           
    "lib": ["es2015", "dom", "dom.iterable"],       
    "strict": true,                                 
    "noImplicitAny": true,                          
    "esModuleInterop": true,                        
    "skipLibCheck": true,                           
    "forceConsistentCasingInFileNames": true,
    "jsx": "react",
    "declaration": true,
    "isolatedModules": true,
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noEmit": true
  }
}

5) 기본 React 프로젝트 디렉토리 & 파일을 생성한다.

// index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

// index.tsx
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

// App.tsx
import React from "react";

function App(): JSX.Element {
  return (
    <>
      <h1>App</h1>
    </>
  );
}

export default App;

지금까지 React & Typescript 패키지 설치 및 설정을 해보았다
다음 포스트에서 Webpack 및 babel 설정을 해보겠다.

(Move to Github Repository)

Asher

Frontend Developer

다음 포스트

React & Typescript Setup (without CRA) - 1 (React / Typescript 설정)