[MFA]Front-End 모노레포-Turborepo 개발환경 구축

터보레포(Turborepo)란?

Turborepo는 JavaScript와 TypeScript 프로젝트를 위한 고성능 빌드 시스템이다. 모노레포를 지원하여, 여러 패키지와 애플리케이션을 하나의 저장소(repository)에서 관리할 수 있게 해준다. 이는 코드 공유, 의존성 관리, 그리고 프로젝트 간 협업을 용이하게 만든다.

 

터보레포의 장점

1. 효율적인 빌드 시스템: 터보레포는 캐싱과 병렬 처리를 통해 빌드 및 테스트 시간을 단축.
2. 의존성 관리: 공통 의존성을 중앙에서 관리하여 각 패키지의 의존성 충돌을 방지.
3. 코드 재사용성 향상: 공통 코드를 모듈로 분리하여 여러 프로젝트에서 재사용할 수 있다.
4. 협업의 용이성: 한 저장소에서 여러 프로젝트를 관리함으로써 팀 간 협업이 향상.

 

터보레포 도입이유

이번 토이 프로젝트는 규모 면에서 볼 때 사실 터보레포를 도입할 필요가 없는 소규모 프로젝트다. 하지만, 현재 대세인 MFA (Modern Frontend Architecture)의 경험을 쌓고 싶은 마음에 의도적으로 오버스펙을 적용하기로 결정했고, 이를 통해, 최신 기술 트렌드에 대한 실질적인 이해를 높이고, 나아가 이러한 고급 도구들을 실제 대규모 프로젝트에 어떻게 적용할 수 있는지에 대한 경험을 조금이라도 얻고자 도입하게 되었다.

 

Turborepo설치 - 패키지 매니저는 PNPM으로

1-1. pnpm 설치 확인

pnpm -v // 설치확인

 

1-2.  Turborepo create

pnpx create-turbo@latest

 

 

1. 프로젝트 생성 위치 선택:
   • 생성 도구가 "Where would you like to create your turborepo(터보레포를 어디에서 생성 할 것인지)?"라고 물었습니다.
   • 여기에 "./"로 답하여 현재 디렉토리(즉, 현재 터미널이 위치한 디렉토리)에 Turborepo 프로젝트를 생성하기로 했습니다.
2. 패키지 관리자 선택:
   • 다음으로 "Which package manager do you want to use(어떤 패키지 관리자를 사용할 것인지)?"라는 질문이 나왔습니다.
   • 이에 pnpm workspaces를 선택하여, pnpm 워크스페이스를 사용하는 패키지 관리자로 설정했습니다.

 

이렇게 설정을 마치면, Turborepo는 현재 디렉토리에 새로운 프로젝트를 생성하고, pnpm 워크스페이스를 사용하여 패키지 관리를 진행하게 됩니다

 

1-3.  프로젝트 빌드 및 실행

pnpm buld
pnpm dev

 

1. 'pnpm build' 명령어를 통해 전체 프로젝트를 빌드.
2. 빌드가 완료된 후 'pnpm dev' 명령어로 프로젝트를 실행

아래의 이미지는 이러한 과정을 거쳐 성공적으로 실행된 모습을 보여준다.

 

 

 

1-4.  웹 애플리케이션과 문서 앱 접속 테스트

실행 후, 실제로 로컬 호스트 주소인 localhost:3000과 localhost:3001에 접속해보자.

아래 이미지들은 각각 웹 애플리케이션과 문서 앱에 성공적으로 접속한 화면 캡처해 보았다.

• 웹 애플리케이션 (localhost:3000)
• 문서 앱 (localhost:3001)

web app

docs app

 

 

마치며

이번 포스팅에서는 Turborepo에 대해 알아보고, 직접 설치 및 실행, 접속 해보았다. 접속까지는 문제가 없었지만 root 경로에 위치한 tsconfig.json 파일에서 "File '@repo/typescript-config/base.json' not found."라는 오류 메시지가 나타났다. 해당 경로를 제대로 인식을 못하는것 같은데.. 이 오류를 해결하는 것도 중요하지만 오늘은 여기까지만 진행하려고 하고,  추후에 이 오류를 해결하고 그 과정을 다시 포스팅으로 작성할 예정이다. 그럼 20000.