Portfolio

Repo 생성

github 컨벤션 수립 후 branch protection rule 지정

webpack, babel + ts

babel

반드시 필요한가?

emotion 관련 필요 확인

⚠️ emotion babel plugin 사용을 위해 babel/core 설치필요한가?

webpack

eslint, prettier

TS 세팅

내 설정


{
  "compilerOptions": {
    "target": "es5", // 컴파일 된 결과물이 어느 버전의 ECMAScript를 따를 것인지
    "strict": true,
    "module": "esnext", // 프로그램에서 사용할 모듈 시스템. import/export 코드가 어떤 방식의 코드로 컴파일 될지 결정
    "esModuleInterop": true, // es module 사용시 컴파일 단계에서 헬퍼 함수를 사용 여부

    "allowJs": true, // js files를 허용 여부
    "sourceMap": true, // map 파일 생성 여부
    "skipLibCheck": true, // 사용하는 라이브러리의 타입 검사를 skip 여부
    "forceConsistentCasingInFileNames": true, // 파일명에 대소문자 구분하지 않아도 되는 기능 사용 여부
    "moduleResolution": "node", // 모듈 해석 방법
    "isolatedModules": true, // 각 파일을 분리된 모듈로 트랜스파일링 할 지 여부
    "noEmit": true, // 컴파일러의 js 파일 등 출력 결과물 여부
    "jsx": "react-jsx", // jsx 코드를 어떻게 컴파일 기준
    "baseUrl": "./", // 비상대적 import 모듈 해석시 기준이 되는 경로
    "paths": {
      "@/*": ["src/*"]
    }
  },

  "include": ["src"]
}

Webpack 세팅

[core 설치]


npm install -D webpack webpack-cli webpack-dev-server

webpack : 번들 작업을 하는 웹팩의 코어

webpack-cli : 웹팩 터미널 도구, 웹팩을 커맨드 라인에서 사용

webpack-dev-server : 웹팩을 메모리 상에 빌드하여 개발 서버를 구동

[ loader 및 플러그인 ]

💡

npm i -D ts-loader css-loader style-loader file-loader html-webpack-plugin fork-ts-checker-webpack-plugin

❓ loader와 plugin은 무슨 차이일까?

단순히 비교하면 번들이 생성 되기 전(빌드 전)에 쓰이냐, 후에 쓰이냐로 구분할 수 있다

loader는 webpack으로 빌드를 진행하기 전/진행 중에 개별 파일들(빌드 과정에 포함되는 각 파일들)에게 적용하기 위해 사용된다

plugin은 번들이 생성 된 후 결과 파일에 적용하기 위해 사용된다. 번들된 js 난독화, 압축, 복사, 특정 텍스트 추출, 별칭 등 부가 작업 등등 후처리를 한다.

❓ ts-loader, fork-ts-checker-webpack-plugin (링크)

ts-loader는 타입스크립트 컴파일 단계를 웹팩안으로 통합하여 진행하도록 함

fork-ts-checker-webpack-plugin은 타입스크립트 타입 검사를 별도로 실행하는 웹팩 플러그인입니다. 웹팩을 실행하면 먼저 컴파일과 번들링만 빨리 실행하고 타입 체크는 좀 늦게 따로 실행할 수 있습니다.

❓ ProvidePlugin (link)

자주쓰는 플러그인 생략 기능

ex) react import 생략가능

[ webpack config 설정]

webpack.config.js 설정

code


require("dotenv").config(); // ❓

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");

const isProd = process.env.NODE_ENV === "production"; // ❓
const PORT = process.env.PORT || 3001;

module.exports = {
  mode: isProd ? "production" : "development",
  devtool: isProd ? "hidden-source-map" : "source-map",
  entry: "./src/index.tsx",
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "public"),
    publicPath: "/",
    clean: true,
  },
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"],
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        loader: "ts-loader",
        options: {
          transpileOnly: isProd ? false : true,
        },
      },
      {
        test: /\.css?$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(webp|jpg|png|jpeg)$/,
        loader: "file-loader",
        options: {
          name: "[name].[ext]?[hash]",
        },
      },
    ],
  },
  plugins: [
    new ForkTsCheckerWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "public", "index.html"),
    }),
  ],
  devServer: {
    port: PORT,
    historyApiFallback: true,
  },
};

프론트 컨벤션 논의 사항

PR 및 리뷰 관련

conversation 모두 resolve 시 merge
리뷰 강도 및 시간

0724 repo 생성

Repo 생성

TS 세팅

Webpack 세팅

프론트 컨벤션 논의 사항