[React] Webpack으로 React 시작하기 2 - react, typescript, eslint, prettier

2022.12.29 - [react] - [React] Webpack으로 React 시작하기 1 - webpack, babel-loader

[React] Webpack으로 React 시작하기 1 - webpack, babel-loader

스스로 불러온 웹팩

길고 험난한 웹팩 설정의 길..

react 설치

npm i react react-dom

이제 대략적인 웹팩 설정을 마치고 리액트를 설치한다. 

 

typescript 설치 및 설정 파일

npm i -D typescript

프로젝트 내에서 타입스크립트를 사용하기로 했으니 typescript를 설치한다.

 

npx tsc --init

타입스크립트 설정파일인 tsconfig.json에 설정 옵션들을 작성한다.

 

tsconfig.json

// tsconfig.json

{
  "compilerOptions": {
  
    // 언어, 환경
    "target": "es2016", // 자바스크립트 버전
    "jsx": "react-jsx", // jsx 코드
    "jsxImportSource": "react", // 
    
    // 모듈
    "module": "NodeNext", // 모듈 설정
    "moduleResolution": "node", // 타입스크립트
    "typeRoots": [
      "node_modules/@types",
      "src/@types"
    ],
    "resolveJsonModule": true, // json 파일 import 가능 여부
    "allowJs": true, // 
    "allowSyntheticDefaultImports": true, // default export가 없을 때, import를 허용할지
    "esModuleInterop": true, // 
    "forceConsistentCasingInFileNames": true, // 
    
    // 타입 검사
    "strict": true,
    "skipLibCheck": true, // 모든 .d.ts 파일의 타입 체크를 건너뛰는지
  },
  "include": ["src"],
  "exclude": ["dist", "node_modules"]
}

 

typescript 로더

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

webpack에서 typescript를 사용하기 위해 타입스크립트 로더인 ts-loader를 설치한다.

 

webpack 기본 설정

// webpack/webpack.common.js

const commonConfig = {
  ...
  module: {
    rules: [
      ...
      { test: /\.tsx?$/i, loader: "ts-loader" },
    ],
  },
  ...
};

export default commonConfig;

Webpack 기본 설정 파일에 ts-loader 설정을 추가해준다.

Typescript에서 alias 설정하기

npm i -D tsconfig-paths-webpack-plugin

alias를 이용하면 복잡한 경로를 @를 사용해서 간단하게 나타낼 수 있다.

₩import ~ from '../../page'₩ → ₩import ~ from '@/page'₩

 

webpack 기본 설정

import { resolve } from 'node:path';
import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';

import paths from "./paths.js";

const commonConfig = {
  ...
  resolve: {
    modules: ["node_modules"],
    extensions: [".js", ".ts", ".tsx"],
    alias: {
      '@': resolve('src')
    },
    plugins: [new TsconfigPathsPlugin()],
  },
};

export default commonConfig;

Webpack 기본 설정에도 alias 관련된 설정을 추가한다.

 

- 설치한 TsconfigPathsPlugin을 플러그인에 추가한다.

tsconfig.json

// tsconfig.json

{
  "compilerOptions": {
	...
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    ...
}

src 폴더 하위의 폴더는 ₩'@/page'₩, ₩'@/components'₩ 등으로 경로를 나타낼 수 있다.

 

ESLint & Prettier

prettier

npm i -D prettier

prettier는 formatter로 코드를 일관된 스타일로 작성할 수 있게 변환해준다.

 

.prettierrc

// .prettierrc

{
  "arrowParens": "always",
  "htmlWhitespaceSensitivity": "css",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "printWidth": 100,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false
}

prettier 추가 옵션 설정을 추가할 수 있다.

 

ESLint

npm init @eslint/config

ESLint는 Linting 도구로 코드에 문제가 있는지 검사해준다.

 

위 명령어로 eslint를 설지하게 되면 터미널에서 질문에 따라 옵션을 선택할 수 있다.

ESLint 플러그인 확장

npm i -D eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-config-prettier