본문으로 건너뛰기

일단 시작하기

일본여행 다녀와서부터 매일 TIL을 쓰려고 했는데 아프고, 하기 싫고 등 모종의 이유로 시작을 하지 않고 있다.

그래서! 일단 하고 보기!

먼저 cra에서 벗어나고자 직접 번들러, 웹팩을 다루는 방법을 터득하고자 한다.

번들러

초기엔 필요가 없었지만, 규모가 커지면서 중복된 이름, 파일전송 등의 문제가 발생하면서 필요해짐

번들링​

웹 어플리케이션을 구성하는 여러 개의 자원들을 하나로 병합 및 압축해주는 동작

번들러​

번들링을 하기위한 도구

웹팩

프론트엔드 프레임워크에서 사용되는 모듈 번들러이다.

모듈 번들러란, 웹 어플리케이션을 구성하는 자원을 각각의 모듈(최소한의 기능을 하는 가장 작은 단위)로 보고, 이를 조합해 병합된 하나의 결과물을 만드는 도구이다.

나만의 프로젝트 만들기

cra 없이 기본 설정하기​

npm init -y
npm i react react-dom
npm i -D typescript @types/react @types/react-dom tsc --init
npm install clean-webpack-plugin --save-dev
npm i -D babel-loader @babel/core @babel/preset-env
npm i -D @babel/preset-react @babel/preset-typescript
npm i -D webpack webpack-cli webpack-dev-server webpack-merge
npm i -D html-webpack-plugin ts-loader
//index.html
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React App without CRA</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
//index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

const rootElement = document.getElementById('root');

ReactDOM.render(<App />, rootElement);
//App.tsx
import React from 'react';

const App = () => (
  <>
    <h1>React without CRA...</h1>
  </>
);

export default App;
//tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["dom", "ES2015", "ES2016", "ES2017", "ES2018", "ES2019", "ES2020"],
    "allowJs": true,
    "jsx": "react-jsx",
    "sourceMap": true,
    "outDir": "./dist",
    "isolatedModules": true,
    "strict": true,
    "moduleResolution": "node",
    "baseUrl": "./",
    "paths": {
      "@components/*": ["components/*"],
      "@pages/*": ["pages/*"]
    },
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  }
}
//webpack.common.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './src/index.tsx',
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: ['babel-loader', 'ts-loader'],
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'bundle.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
    new CleanWebpackPlugin(),
  ],
};
...
  "scripts": {
    "dev": "webpack-dev-server --config webpack.dev.js --open --hot",
    "build": "webpack --config webpack.prod.js",
    "start": "webpack --config webpack.dev.js"
  },
...

url(https://velog.io/@tnehd1998/CRA%EC%97%86%EC%9D%B4-ReactTypeScript-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0)

내가 사용하는 라이브러리​

emotion​

npm i @emotion/react

설치 후 tsconig.json의 compilerOptions에 "jsxImportSource": "@emotion/react"를 추가해줘 emotion을 쓸 것을 알려준다.

svg​

npm add @svgr/webpack -D

설치 후 src 디렉토리에 svg.d.ts를 만든다.

//svg.d.ts
declare module '*.svg' {
  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
  export default content;
}

이를 통해 svg파일을 인식하게 해준다.