Create React App없이 React + Typescript 환경설정

C

NPM

npm init

이것저것 설치하기

(스크롤을 많이 내리다 보면, 한번에 설치하도록 코드를 작성해 놓았습니다. 일일이 복붙 할 필요 없습니다.)

Webpack

webpack / webpack-cli

webpack을 쓰려면 당연히 필요하니까, webpackwebpack-cli모듈을 설치해준다.

npm install --save-dev webpack webpack-cli

webpack-dev-server

local 환경에서 편하게 테스트해보려면 필요하다.

npm install --save-dev webpack-dev-server

typescript

typescript -> javascript 변환해주는 typescript모듈이 필요하다.

npm install --save-dev typescript

node-sass

CSS대신 SCSS를 사용할거니까 SCSS -> CSS 변환해주는 node-sass모듈이 필요하다.

npm install --save-dev node-sass

css-loader

webpack이 css파일을 읽을때 필요하다.

npm install --save-dev css-loader

ts-loader

webpack이 xxx.ts파일을 처리할때 필요하다.

npm install --save-dev ts-loader

sass-loader

webpack이 xxx.scss파일을 읽을때 필요하다

npm install --save-dev sass-loader

html-webpack-plugin

template을 바탕으로 쓸만한 html파일을 생성해준다. 알아서 bundle.js파일을 link해줘서 편하다.

npm install --save-dev html-webpack-plugin

mini-css-extract-plugin

css파일을 싹 읽어가지고 하나의 bundle.css파일로 만들어주는 플러그인이다.

npm install --save-dev mini-css-extract-plugin

autoprefixer

자동으로 아래와 같은 브라우저 전영 CSS 접두어를 붙이는 기능을 한다.

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;

이 autoprefixer는 PostCSS와 연동되는 수많은 plugin중의 하나이다. 그래서 PostCSS와 loader를 설치해줘야한다.

npm install --save-dev postcss postcss-loader autoprefixer

React + React-DOM

리액트 프로젝트를 진행할꺼니까 react와 react-dom도 설치해준다.

npm install react react-dom

Redux

상태관리를 편하게 해주기 위해서 redux를 설치하고, 동시에 redux를 react에서 더 편하게 쓸 수 있도록 react-redux도 같이 설치해준다.

npm install redux react-redux

Immer

상태의 불변성을 쉽게 관리해주기 위해서 Immer가 필요하다.

npm install immer

Types

React

기본적으로 react가 typescript로 만들어진 프로젝트가 아니다보니까 컴포넌트가 어떤 타입인지, 어떤 함수가 어떤 타입인지를 모른다. 그래서 자바스크립트로 쓰여진 컴포넌트, 클래스, 함수 등을 typescript에서도 잘 사용할 수 있도록 미리 해당되는 타입을 @types/react@types/react-dom 에 적어놓았다. 이것들을 설치해줘야한다.

npm install --save-dev @types/react @types/react-dom

Redux

react와는 다르게 redux는 typescript로 만들어졌기 때문에 @types/redux 를 설치할 필요가 없다.

React-Redux

react-reduxredux와 달리 javascript로 만들어졌기 때문에 @types/react-redux가 필요하다.

npm install --save-dev @types/react-redux

Immer

immer는 typescript로 만들어졌기 때문에 @types/immer가 필요 없다.

한번에 설치

위의것들을 일일이 복붙하기는 힘드니까 아래것들을 복붙해서 한번에 설치하자.

npm install --save-dev webpack webpack-cli webpack-dev-server typescript node-sass css-loader ts-loader sass-loader html-webpack-plugin mini-css-extract-plugin postcss postcss-loader autoprefixer @types/react @types/react-dom @types/react-redux
npm install react react-dom redux react-redux immer

package.json의 모습

{
  "name": "react-hook-tetris",
  "version": "1.0.0",
  "description": "React의 Hook 함수를 활용해서 만든 Tetris입니다",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/rpf5573/react-hook-tetris.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/rpf5573/react-hook-tetris/issues"
  },
  "homepage": "https://github.com/rpf5573/react-hook-tetris#readme",
  "devDependencies": {
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-redux": "^7.1.11",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.0",
    "mini-css-extract-plugin": "^1.3.1",
    "node-sass": "^5.0.0",
    "postcss": "^8.1.10",
    "postcss-loader": "^4.1.0",
    "sass-loader": "^10.1.0",
    "ts-loader": "^8.0.11",
    "typescript": "^4.1.2",
    "webpack": "^5.8.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "immer": "^8.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5"
  }
}

.gitignore

.gitignore 파일을 만들어주고.

touch .gitignore

아래와 같이 작성해준다.

node_modules
package-lock.json

Webpack.config.js

webpack관련 플러그인과 loader들을 설정한 webpack.config.js파일의 내용은 다음과 같다.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const join = require('path').join;
module.exports = {
  entry: join(__dirname, '/src/index.tsx'),
  devtool: 'source-map',
  output: {
    filename: "main.js",
    path: join(__dirname, '/dist'),
  },
  module: {
    rules: [{
      test: /\.(ts|tsx)$/,
      exclude: /node_modules/,
      use: {
        loader: "ts-loader"
      }
    },
    {
      test: /\.(scss)$/,
      use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader", "sass-loader"]
    }]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "style.css",
    }),
    new HtmlWebpackPlugin({
      template: join(__dirname, '/src/index.html')
    }),
    require('autoprefixer')
  ],
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx", "scss"]
  }
};

tsconfig.json

NPM

npm init

이것저것 설치하기

(스크롤을 많이 내리다 보면, 한번에 설치하도록 코드를 작성해 놓았습니다. 일일이 복붙 할 필요 없습니다.)

Webpack

webpack / webpack-cli

webpack을 쓰려면 당연히 필요하니까, webpackwebpack-cli모듈을 설치해준다.

npm install --save-dev webpack webpack-cli

webpack-dev-server

local 환경에서 편하게 테스트해보려면 필요하다.

npm install --save-dev webpack-dev-server

typescript

typescript -> javascript 변환해주는 typescript모듈이 필요하다.

npm install --save-dev typescript

node-sass

CSS대신 SCSS를 사용할거니까 SCSS -> CSS 변환해주는 node-sass모듈이 필요하다.

npm install --save-dev node-sass

css-loader

webpack이 css파일을 읽을때 필요하다.

npm install --save-dev css-loader

ts-loader

webpack이 xxx.ts파일을 처리할때 필요하다.

npm install --save-dev ts-loader

sass-loader

webpack이 xxx.scss파일을 읽을때 필요하다

npm install --save-dev sass-loader

html-webpack-plugin

template을 바탕으로 쓸만한 html파일을 생성해준다. 알아서 bundle.js파일을 link해줘서 편하다.

npm install --save-dev html-webpack-plugin

mini-css-extract-plugin

css파일을 싹 읽어가지고 하나의 bundle.css파일로 만들어주는 플러그인이다.

npm install --save-dev mini-css-extract-plugin

autoprefixer

자동으로 아래와 같은 브라우저 전영 CSS 접두어를 붙이는 기능을 한다.

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;

이 autoprefixer는 PostCSS와 연동되는 수많은 plugin중의 하나이다. 그래서 PostCSS와 loader를 설치해줘야한다.

npm install --save-dev postcss postcss-loader autoprefixer

React + React-DOM

리액트 프로젝트를 진행할꺼니까 react와 react-dom도 설치해준다.

npm install react react-dom

Redux

상태관리를 편하게 해주기 위해서 redux를 설치하고, 동시에 redux를 react에서 더 편하게 쓸 수 있도록 react-redux도 같이 설치해준다.

npm install redux react-redux

Immer

상태의 불변성을 쉽게 관리해주기 위해서 Immer가 필요하다.

npm install immer

Types

React

기본적으로 react가 typescript로 만들어진 프로젝트가 아니다보니까 컴포넌트가 어떤 타입인지, 어떤 함수가 어떤 타입인지를 모른다. 그래서 자바스크립트로 쓰여진 컴포넌트, 클래스, 함수 등을 typescript에서도 잘 사용할 수 있도록 미리 해당되는 타입을 @types/react@types/react-dom 에 적어놓았다. 이것들을 설치해줘야한다.

npm install --save-dev @types/react @types/react-dom

Redux

react와는 다르게 redux는 typescript로 만들어졌기 때문에 @types/redux 를 설치할 필요가 없다.

React-Redux

react-reduxredux와 달리 javascript로 만들어졌기 때문에 @types/react-redux가 필요하다.

npm install --save-dev @types/react-redux

Immer

immer는 typescript로 만들어졌기 때문에 @types/immer가 필요 없다.

한번에 설치

위의것들을 일일이 복붙하기는 힘드니까 아래것들을 복붙해서 한번에 설치하자.

npm install --save-dev webpack webpack-cli webpack-dev-server typescript node-sass css-loader ts-loader sass-loader html-webpack-plugin mini-css-extract-plugin postcss postcss-loader autoprefixer @types/react @types/react-dom @types/react-redux
npm install react react-dom redux react-redux immer

package.json의 모습

{
  "name": "react-hook-tetris",
  "version": "1.0.0",
  "description": "React의 Hook 함수를 활용해서 만든 Tetris입니다",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/rpf5573/react-hook-tetris.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/rpf5573/react-hook-tetris/issues"
  },
  "homepage": "https://github.com/rpf5573/react-hook-tetris#readme",
  "devDependencies": {
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-redux": "^7.1.11",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.0",
    "mini-css-extract-plugin": "^1.3.1",
    "node-sass": "^5.0.0",
    "postcss": "^8.1.10",
    "postcss-loader": "^4.1.0",
    "sass-loader": "^10.1.0",
    "ts-loader": "^8.0.11",
    "typescript": "^4.1.2",
    "webpack": "^5.8.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "immer": "^8.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5"
  }
}

.gitignore

.gitignore 파일을 만들어주고.

touch .gitignore

아래와 같이 작성해준다.

node_modules
package-lock.json

Webpack.config.js

webpack관련 플러그인과 loader들을 설정한 webpack.config.js파일의 내용은 다음과 같다.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const join = require('path').join;
module.exports = {
  entry: join(__dirname, '/src/index.tsx'),
  devtool: 'source-map',
  output: {
    filename: "main.js",
    path: join(__dirname, '/dist'),
  },
  module: {
    rules: [{
      test: /\.(ts|tsx)$/,
      exclude: /node_modules/,
      use: {
        loader: "ts-loader"
      }
    },
    {
      test: /\.(scss)$/,
      use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader", "sass-loader"]
    }]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "style.css",
    }),
    new HtmlWebpackPlugin({
      template: join(__dirname, '/src/index.html')
    }),
    require('autoprefixer')
  ],
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx", "scss"]
  }
};

tsconfig.json

{
  "compilerOptions": {
    "target"                           : "es6"      , // ts -> es6 js코드로 변환한다.
    "module"                           : "commonjs" , // module을 import/export하는 방식은 commonjs방식을 따른다.
    "jsx"                              : "react"    , // jsx/tsx파일은 typescript가 처리한다. 고로, babel은 필요없다.
    "outDir"                           : "./dist"    , // typescript가 js로 코드 변환한 결과물은 dist폴더에 넣어놓는다.
    "rootDir"                          : "./src"    , // ts코드들은 src폴더에 있다.
    "strict"                           : true       , // any를 사용하지 않는다. 엄격하게 타입검사를 진행한다.
    "esModuleInterop"                  : true       , /** 우리는 es6의 모듈 방식인 import/export를 사용하는데, 가끔 어떤 라이브러리들은 require와 같은 commonjs방식을 사용한다.
                                                       이때 require대신에 import를 써도 에러가 안나게끔 처리한다. */
    "skipLibCheck"                     : true       , // 모든 선언 파일(*.d.ts)의 타입을 검사합니다
    "forceConsistentCasingInFileNames" : true         // myComponent.ts와 MyCompoenet.ts를 다른 파일로 간주한다
  },
  "exclude": [
    "node_modules",
    "build"
  ]
}

Add Comment