백엔드 스프링부트3, 프론트엔드 Next.js로 모노레포 구성하기
1. D:\bootbasic 폴더를 생성한다.
2. D:\bootbasic 폴더 하위에 apps 폴더를 만들고, 그 안에 backend 폴더를 만든다. 그 안에 스프링부트3 프로젝트를 넣는다.
ex)
bootbasic
├── .idea (인텔리제이 파일)
├── apps
│ └── backend
│ ├── gradle
│ ├── src
│ ├── build.gradle
│ ├── gradlew
│ ├── gradlew.bat
│ ├── HELP.md
│ └── settings.gradle
├── .gitattributes (backend에 있던 것을 이쪽으로 옮겨야 함)
└── .gitignore (backend에 있던 것을 이쪽으로 옮겨야 함)
bootbasic
├── .idea (인텔리제이 파일)
├── apps
│ └── backend
│ ├── gradle
│ ├── src
│ ├── build.gradle
│ ├── gradlew
│ ├── gradlew.bat
│ ├── HELP.md
│ └── settings.gradle
├── .gitattributes (backend에 있던 것을 이쪽으로 옮겨야 함)
└── .gitignore (backend에 있던 것을 이쪽으로 옮겨야 함)
위와 같이 스프링부트3 프로젝트는 D:\bootbasic\apps\backend 폴더 안에 들어간다.
(1) .idea는 인텔리제이에서 사용하는 파일로, 인텔리제이에서 워크스페이스 폴더를 D:\bootbasic 폴더로 열면 자동으로 생긴다.
(2) .gitattributes 파일과 .gitignore 파일은 원래 backend 폴더 안에 있는 파일인데, D:\bootbasic 폴더 하위로 옮겨야 한다.
3. cmd 열고 D:\bootbasic 하위로 이동한다.
참고로 윈도우 터미널에서 드라이브 이동은 cd D: 가 아니라, 그냥 D: 만 입력해야 이동된다.
(1) D:
(2) cd D:\bootbasic\apps
(3) npx create-next-app@latest 입력
? What is your project named? 라고 나오면 엔터를 입력한다. 임의의 값(ex : my-app)으로 폴더가 생성되는데, 나중에 폴더명을 frontend로 바꿔도 상관없다.
? Would you like to use the recomended Next.js defaults? 나오면 Yes, use recommended defaults 선택하고 엔터
(2025년 말 기준으로 recomended Next.js defaults는 TypeScript, ESLint, Tailwind CSS, App Router 라고 나온다.)
4. Next.js 프로젝트가 생성되었으면, my-app 폴더명을 frontend로 변경한다.
이후 D:\bootbasic\apps\frontend 경로에 위치시킨다.
5. my-app 명칭을 frontend로 변경한다.
D:\bootbasic\apps\frontend\package.json 파일을 열어 "name" 필드를 "frontend"로 변경해야 한다.
[AS-IS]
{
"name": "my-app",
[TO-BE]
{
"name": "frontend",
{
"name": "my-app",
[TO-BE]
{
"name": "frontend",
6. pnpm-workspace.yaml 파일 생성
최상위 루트에 pnpm-workspace.yaml 파일을 생성한다. (주의할 점은 최상위 루트 폴더에 만들어야 한다는 점이다. 경로를 잘볼것)
ex) D:\bootbasic\apps\pnpm-workspace.yaml
packages:
# 'apps' 폴더 아래의 모든 폴더(backend, frontend 포함)를 워크스페이스로 지정
- 'apps/*'
# (선택 사항) 공통 코드를 담을 폴더를 미리 정의
- 'packages/*'
# 'apps' 폴더 아래의 모든 폴더(backend, frontend 포함)를 워크스페이스로 지정
- 'apps/*'
# (선택 사항) 공통 코드를 담을 폴더를 미리 정의
- 'packages/*'
7. package.json 파일 생성
최상위 루트에 package.json 파일을 생성한다. (주의할 점은 최상위 루트 폴더에 만들어야 한다는 점이다. 경로를 잘볼것)
ex) D:\bootbasic\package.json
{
"name": "my-monorepo",
"version": "1.0.0",
"private": true,
"scripts": {
"dev:fe": "pnpm --filter frontend dev",
"build:fe": "pnpm --filter frontend build"
}
}
"name": "my-monorepo",
"version": "1.0.0",
"private": true,
"scripts": {
"dev:fe": "pnpm --filter frontend dev",
"build:fe": "pnpm --filter frontend build"
}
}
위 내용은, Next.js 앱을 'pnpm --filter frontend'로 실행하도록 스크립트 변경하는 것이다.
참고로, "private": true 는 pnpm 워크스페이스 사용 시 필수다.
8. 기존 패키지 설치내역 삭제
(1) apps/frontend/node_modules 폴더를 모두 삭제한다. ex) D:\bootbasic\apps\frontend\node_modules폴더 전체삭제
(2) apps/frontend/package-lock.json 파일을 삭제해야 한다. ex) D:\bootbasic\apps\frontend\package-lock.json 파일 삭제
(여기서 주의할 점. 헷갈리지 말자. apps/frontend/package.json 파일은 삭제해서는 안된다. 이 파일이 앱에 필요한 패키지 목록을 담고 있다.)
9. 패키지 호이스팅 및 재설치 실행
패키지를 끌어올리기(호이스팅) 위해 터미널을 열고 루트폴더에서 pnpm을 실행해야 한다.
9-1. pnpm 설치
만약 pnpm이 설치되어 있지 않다면 아래 명령어로 먼저 설치하자.
npm install -g pnpm
9-2. pnpm install 수행
(1) D:
(2) cd D:\bootbasic (주의할 점은 D:\bootbasic\apps\frontend 로 가는게 아니라 루트폴더인 D:\bootbasic 폴더로 가야 한다)
(3) pnpm install 입력
D:
cd D:\bootbasic
pnpm install
cd D:\bootbasic
pnpm install
10. 이제 pnpm dev:fe 명령어로 프론트엔드 서버를 실행하자.
(1) D:
(2) cd D:\bootbasic
(3) pnpm dev:fe 입력
D:
cd D:\bootbasic
pnpm dev:fe
cd D:\bootbasic
pnpm dev:fe
http://localhost:3000 접속해보면 Next.js 화면이 나온다.