본문 바로가기
카테고리 없음

쏘카(socar) 프론트엔드 팀의 모노레포 전환과 코드 생성기 도입 이야기: 생산성 향상의 비결

by SURFINFO 2024. 9. 25.
반응형

7

안녕하세요! 오늘은 소카의 모노레포 전환과 코드 생성기(CODE GENERATOR)의 도입에 대해 알아보는 시간을 가지려 해요. 🤗 소카의 프론트엔드 팀이 모노레포 환경으로 전환하면서 겪은 문제들과 이를 해결하는 과정에서 어떤 도구들을 활용했는지 살펴볼까요?

🌟 모노레포 전환의 필요성

소카의 프론트엔드 팀은 규모가 커지면서 여러 단일 레포지토리(Repository)를 관리하는 데 어려움을 겪었어요. 예를 들어, 각 프로젝트마다 중복되는 코드가 늘어나고, 공통 라이브러리를 업데이트하는 데 많은 시간이 소요되는 등 문제가 발생했죠.

문제점들

  1. 중복 코드: 여러 리포지토리에 비슷한 기능을 하는 코드가 중복되기 시작했어요.
  2. 공통 라이브러리 업데이트: 공통 라이브러리를 여러 리포지토리에 동시에 업데이트하는 것이 힘들었죠.
  3. 러닝 커브: 새로운 프로젝트를 세팅하는 과정 자체가 복잡하고 시간 소요가 컸어요.

이러한 문제를 해결하기 위해 소카는 모노레포 환경으로 전환하게 되었어요.

🤔 모노레포 도입의 장점

모노레포 환경을 도입함으로써 소카 프론트엔드 팀은 다음과 같은 장점을 누리게 되었습니다:

  1. 중앙화된 공통 컴포넌트 관리: 공통 컴포넌트를 중앙화된 방식으로 관리할 수 있게 되었어요.
  2. 코드 재사용성 증가: 중복된 코드를 줄이고, 재사용성을 높일 수 있었어요.
  3. 일관된 개발 환경: 동일한 개발 환경에서 모든 프로젝트를 일관성 있게 관리할 수 있었죠.
  4. 의존성 관리 간소화: 공통 라이브러리나 의존성 관리를 더욱 효율적으로 할 수 있었어요.

🔧 코드 생성기(CODE GENERATOR) 도입

모노레포 환경으로 전환하면서 소카는 코드 생성기(Code Generator)를 도입하여 프로젝트 세팅 과정을 자동화했습니다. 이를 통해 다음과 같은 이점을 얻을 수 있었어요:

이점들

  1. 코드 일관성 유지: 모든 새로운 컴포넌트나 유틸리티가 동일한 구조와 스타일로 생성되어 코드 베이스 전체의 일관성을 유지할 수 있었어요.
  2. 시간 절약: 반복적인 보일러 플레이트 코드 작성을 자동화함으로써 개발자의 시간을 절약할 수 있었어요. 결과적으로 새로운 프로젝트 생성/세팅 시간이 기존 대비 80% 이상 감소했죠.
  3. 오류 감소: 수동으로 파일을 생성하고 설정하는 과정에서 발생할 수 있는 인적 오류를 줄일 수 있었어요.
  4. 쉬운 온보딩: 새로운 팀원들이 프로젝트 구조와 컨벤션을 빠르게 이해하고 적용할 수 있게 되었어요.

코드 생성기의 자세한 구성

코드 생성기(Code Generator)는 JavaScript 기반의 프롬프트 라이브러리인 Plop을 활용하여 구현되었어요. 이를 통해 새로운 컨트롤러와 구성 요소가 변경되어도 손쉽게 유지 보수가 가능했답니다.

예를 들어, socar-design-system 생성 스크립트는 다음과 같이 정의되어 있어요:

import { type PlopTypes } from '@turbo/gen'
import path from 'path'
import { lintAndFixFiles } from '../utils'

const SOCAR_DESIGN_SYSTEM_SRC_PATH = 'packages/socar-design-system/src' as const
export const socarDesignSystemPlopConfig: PlopTypes.PlopGeneratorConfig = {
  description: "'packages/socar-design-system' 공통 UI 컴포넌트를 생성합니다.'",
  prompts: [
    {
      type: 'input',
      name: 'file',
      message: '작업할 컴포넌트 이름을 입력해주세요. (ex: button 입력 시 Button 컴포넌트가 생성됩니다.)',
    },
  ],
  actions: [
    {
      type: 'add',
      path: `${SOCAR_DESIGN_SYSTEM_SRC_PATH}/components//styles`,
      templateFile: ...,
    },
    {
      type: 'add',
      path: `${SOCAR_DESIGN_SYSTEM_SRC_PATH}/components//index.tsx`,
      templateFile: ...,
    },
    {
      type: 'modify',
      pattern: /(\n\s*)$/,
      path: `${SOCAR_DESIGN_SYSTEM_SRC_PATH}/components/index.ts`,
      template: ...,
    },
    async () => {
      const filePath = path.resolve(__dirname, "배럴 파일 경로")
      return await lintAndFixFiles(filePath)
    },
  ],
}

위와 같은 설정을 통해 빠르고 정확하게 프로젝트 세팅을 마무리할 수 있었죠.

🚀 결론

소카 프론트엔드 팀은 모노레포 환경으로의 전환과 코드 생성기 도입을 통해 팀의 생산성을 크게 향상시킬 수 있었어요. 이를 통해 개발자들이 실제 서비스 로직에 더 집중하고, 복잡한 환경 설정에서 오는 부담을 줄일 수 있었습니다.

앞으로의 계획

앞으로도 소카의 Common Resource 팀은 끊임없이 개발 생산성 향상을 위한 다양한 도구들을 모색하고, 이를 도입하여 개발자들에게 더 나은 환경을 제공할 계획이에요. 여러분도 비슷한 문제를 겪고 있다면 소카의 사례를 참고해 보세요!

궁금한 점이나 의견 있으시면 언제든지 댓글 달아주세요! 😊

반응형
저작자표시

티스토리툴바