CRA 대신 직접 개발 환경을 설정 한 이유

부스트캠프 이전까지 항상 CRA를 통한 개발 환경 구성만 해왔습니다. CRA 로 개발 환경을 구성해도 불편한 점이 없었고, 개발 환경을 직접 설정할 필요성을 체감하지 못했습니다. 6주 프로젝트를 시작할 때 스프린트 기간동안 학습했던 내용을 최대한 활용하기로 하였습니다. 여러 주제로 의견을 나누던 중 팀원들과 왜 현업에 계시는 개발자 분들은 대다수 CRA 를 사용하지 않고 직접 환경설정을 할까? 라는 주제로 의견을 나눴습니다.

현업에서의 서비스의 크기는 비교도 안될만큼 클 것이고, 그만큼 각 모듈의 크기가 크고 개수도 많습니다. 모듈이 많아질수록 번들링된 결과물의 크기도 커질 것이고, 이를 효율적으로 관리할 필요성도 커질 것입니다. 효율적인 모듈 관리는 서비스의 UX 향상을 위한 방법 중 하나라고 생각됩니다.

좋은 UX 제공은 저희가 프로젝트를 시작할 때 설정했던 도전 목표들 중 하나였습니다. 사용자에게 어떻게 하면 좋은 경험을 제공할 수 있을지 고민하다 나온 생각들 중 하나는 로딩시간의 최소화였습니다. 서비스가 커질수록 늘어나는 코드를 로딩하는 시간 역시 늘어나기 마련입니다.

HyupUp을 개발할때 사용한 리액트는 컴포넌트별로 개발한 뒤 Webpack과 같은 번들러를 이용해 나뉘어진 컴포넌트를 한 파일로 합쳐서 제공합니다. 이때 '사용되는 리소스의 크기를 줄일 수 있다면 합친 결과물의 크기를 줄일 수 있을 것이고, 로딩시간도 줄일 수 있지 않을까?' 라는 생각으로 리소스 최적화에 대해 고민했습니다. 그 과정에서 어떤 툴을 사용할지, 빌드 옵션에 어떤 것을 넣을지 등 직접 개발환경을 바닥부터 구성하는 경험은 이러한 렌더링/리소스 최적화에 대한 이해도를 높일 것이라고 판단했습니다.

Webpack 설정하고 최적화하기

Webpack 설정하기

웹팩은 Entry로 설정된 파일에서 의존성을 가진 모든 파일을 압축하고, Output으로 지정한 위치로 번들 파일을 생성합니다. 그뿐만 아니라 추가적인 설정을 통해서 원하는 환경에 맞는 압축 결과물을 만들어낼 수 있습니다.

압축할 Bundle 을 찾아내기 위해서 LightHouse 와 Webpack Bundle Analyzer 를 활용했습니다. LightHouse 를 통해서는 사용자 경험을 저해시킬 수 있는 요소에 대해 확인하고, Webpack Bundle Analyzer 라는 도구를 통해 번들의 세부 구성을 확인했습니다.

Code Splitting 을 통해 번들을 쪼개고, 필요한 리소스를 필요한 시점에 로드하도록 했습니다. 팀원들과 논의 후에 초기 렌더링 과정에서 필요하지 않은 파일들을 선정하고, React 에서 제공하는 React.lazy 를 활용함으로써 code splitting 을 구현했습니다.

HTML Webpack Plugin 을 통해서는 배포환경에서 불필요한 주석과 공백을 제거함으로써 Bundle 파일을 압축했습니다. 불필요한 주석은 의도하지 않은 메모리 누수의 원인이 될 수 있기 때문에 해당 플러그인의 옵션을 활용했습니다.

plugins: [
  new HtmlWebpackPlugin({
    template: '/public/index.html',
    favicon: 'public/favicon.ico',
    minify:
      process.env.NODE_ENV === 'production'
        ? {
            collapseWhitespace: true,
            removeComments: true,
          }
        : false,
}),

폰트 최적화하기

저희는 프로젝트에서 Pretendard 라는 로컬폰트를 사용하였습니다. woff2, woff, eot, ttf 라는 글꼴 중 IE 를 제외한 대부분의 브라우저에서 지원하며 압축률이 좋은 woff2 형식을 사용하였습니다. dataUrlCondition 에 maxSize 를 설정해서 해당 크기 이하의 리소스는 URL 인코딩이 되도록하였습니다.

module: {
  rules: [
//...
		{
		  test: /\\.(woff|woff2|eot|ttf|otf)$/,
		  type: 'asset',
		  parser: {
		    dataUrlCondition: {
		      maxSize: 1000000 // 1 MB 이하의 이미지와 폰트가 번들에 포함됨
		    },
	  },
//...
},

초기 개발 단계에서는 기존의 리소스를 수정할 요소들이 많지않았습니다. 따라서Lighthouse 보고서에서 진단해준 문제를 우선적으로 해결하였습니다.

Lighthosue 에서 진단한 글꼴 문제