프론트엔드
Yarn Workspace를 이용한 Monorepo 구성
두줄요약
Next.js 기반 학생·강사 서비스의 공통 컴포넌트 공유를 위해 Yarn Workspace Monorepo를 구성했습니다. 외부 트랜스파일과 React 중복 문제를 해결하고 의존성과 실행 명령을 루트에서 관리했습니다.
문제 상황
- 학생·강사 프론트엔드 간 공통 컴포넌트 공유 요구
- 별도 공용 저장소 관리 대신 단일 저장소 기반 Monorepo 구성 시도
원인 분석
- Next.js의 프로젝트 외부 파일 트랜스파일 제외로
unexpected token오류 발생 - 직접 상대경로 import로 의존성이 분리되어 React 인스턴스 중복 발생
해결 방법
next-transpile-modules로 common 워크스페이스 외부 모듈 트랜스파일 설정- Yarn Workspace로 common·student·teacher 워크스페이스와 의존성 연결
- 루트
package.json의 hoisting과yarn workspace스크립트로 공통 의존성·실행 명령 관리
성능/운영 포인트
- common 패키지를 경로 대신 패키지명으로 import하는 일반 라이브러리 형태
- 루트 스크립트 및 Dockerfile의 Yarn 명령 조정으로 기존 Cloud Build·Docker 배포 흐름 적용 가능
