리액트 + 타입스크립트를 숙달하기 위해 스터디 시작.

인프런 Slack 클론 코딩

해당 강좌로 스터디를 진행한다.

타입스크립트뿐 아니라, 웹팩, SWR, socket.io를 이용한 실시간 채팅 등 평소에 배워보고 싶던 기술이 많았기 때문에 하나하나 쏙쏙 빼먹을 예정이다.

섹션 0, 프론트엔드 초기 설정하기를 들으며 배운 점, 느낀 점들을 기록해보려고 한다.

---

📚배운 점

1. CRA 없이 리액트 프로젝트 만들기

지금까지는 항상 CRA를 통해 프로젝트를 시작해나갔다. 어떤 파일들이 생기고 어떤 것들이 그 안에 적혀 있는지는 대충 알고 있었지만, 역시나 대충이었다. 또한 webpack을 사용해본 적이 없기 때문에, 이 초기 설정 포맷은 두고두고 써먹을만 해보였다.

그 중 새로 알게 된 꿀팁 몇 가지.

1-1. path 설정법

// tsconfig.json
"compilerOptions": {
    "paths": {
      "@hooks/*": ["hooks/*"],
      "@components/*": ["components/*"],
      "@layouts/*": ["layouts/*"],
      "@pages/*": ["pages/*"],
      "@utils/*": ["utils/*"],
      "@typings/*": ["typings/*"]
    }
  },

// webpack.config.ts
const config: Configuration = {
    alias: {
      '@hooks': path.resolve(__dirname, 'hooks'),
      '@components': path.resolve(__dirname, 'components'),
      '@layouts': path.resolve(__dirname, 'layouts'),
      '@pages': path.resolve(__dirname, 'pages'),
      '@utils': path.resolve(__dirname, 'utils'),
      '@typings': path.resolve(__dirname, 'typings'),
    },
  },
}

이런 식으로 tsconfig 파일과 webpack.config 파일에
자주 쓰게 될, 중복되는 path들을 미리 설정해놓을 수 있다는 것이다.
구조가 복잡한 프로젝트를 진행하다 보면

import Button from '../../../components/Button '; 

과 같이 .이 난무하는 path를 쓰게 될 때가 있는데, 이를

import Button from '@components/Button'

과 같이 쉽게 쓸 수 있게 해주는 것이다.
에디터도 빨간 줄을 긋지 않는다. 이 얼마나 좋은 설정인가...

1-2. 개발 모드와 production 모드의 구분

// client.tsx
axios.defaults.baseURL =
process.env.NODE_ENV === 'production' ? 'https://sleact.nodebird.com' : 'http://localhost:3090';

// package.json
"scripts": {
"dev": "webpack serve --env development",
"build": "cross-env NODE_ENV=production webpack"
},

위와 같이 개발 모드와 production 빌드의 구분을 통해,

개발 모드에서는 코드 변경 시 핫 리로딩 등의 기능으로 즉시 반영되어 개발 효율성을 높이고,

프로덕션 빌드에서는 코드 최적화 및 압축 등으로 이루어져 파일 크기를 줄이고 실행 속도를 높인다. 이 과정에서 필요 없는 코드(Dead Code) 제거나 Tree Shaking 등의 최적화 기법을 통해 번들 사이즈를 줄일 수 있게 된다.

목적에 맞게 구분하여 실행하는 꿀팁도 얻게 되었다...

💎느낀 점

1. 나도 나만의 세팅을 만들어두자.

초기 세팅할 때마다 귀찮아 죽겠다. 미리 만들어두자.
그래도 명심해야 할 것 - 고이지는 말자.

2. 웹팩 도전해보자.

사실 적용해보려고 검색하다가 귀찮고 어려워보여서 포기했다.
이번엔 진짜 프로젝트에 적용시켜보자.

3. 슬랙 클론코딩 완강 및 나만의 기능 추가까지 힘내보자.

아자아자.