재택근무 전환 후 React 프로젝트 개발 환경 정비

배경

3월 말부터 전사 재택근무로 전환되면서 예상치 못한 문제들이 발생했다. 사무실에서는 괜찮았던 개발 환경이 집에서는 제대로 작동하지 않는 경우가 많았다. 특히 신입 개발자들의 환경 세팅에 시간이 과도하게 소요되었다.

문제점

• 각자 로컬 환경이 달라 동일한 이슈 재현이 어려움
• 환경변수 관리가 Slack DM으로 이루어져 보안 취약
• Webpack Dev Server 설정이 최적화되지 않아 Hot Reload가 느림
• VPN 연결 시 API 프록시 설정이 복잡함

해결 방법

1. Docker 기반 개발 환경

# docker-compose.yml
version: '3.8'
services:
  app:
    build: .
    volumes:
      - .:/app
      - /app/node_modules
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=development

2. 환경변수 관리 개선

.env.example 파일을 레포지토리에 커밋하고 민감 정보는 1Password로 공유했다.

3. Webpack 설정 최적화

// webpack.config.js
module.exports = {
  devServer: {
    hot: true,
    compress: true,
    historyApiFallback: true,
    proxy: {
      '/api': {
        target: process.env.API_URL,
        changeOrigin: true
      }
    }
  },
  optimization: {
    removeAvailableModules: false,
    removeEmptyChunks: false,
    splitChunks: false,
  }
}

removeAvailableModules: false 설정만으로도 빌드 속도가 체감상 30% 이상 개선되었다.

결과

신규 개발자 온보딩 시간이 반나절에서 1시간으로 단축되었다. Hot Reload 속도 개선으로 개발 경험도 나아졌다. 재택 환경에서도 생산성을 유지할 수 있는 기반을 마련했다.

다음 스프린트에서는 Storybook 환경도 Docker에 통합할 예정이다.