Lerna+Nextjs 프로젝트 구성

tk_jang·2022년 10월 27일

lerna next.js

오늘부터기술블로그

목록 보기

1/1

1. Lerna를 이용한 첫번째 프로젝트 기본 구성

1. lerna 초기화

lerna 를 글로벌 로 설치하는 방법과 npx 를 사용해 최신버전을 사용하는 방법이 있다.
이 글에서는 npx 를 활용하는 방법을 사용할 예정이다.

1. 프로젝트 초기 세팅을 해준다.

npx lerna init

를 사용해서 먼저 프로젝트 초기 세팅을 해준다.

위와 같이 파일이 생성되면 넘어가도 된다.

2. lerna.json 파일을 들어가서 아래와 같이 변경 해준다.

{
  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
  "useWorkspaces": true,
  "version": "independent",
  "packages": [
    "packages/*"
  ]
}

3. package.json 파일을 수정해준다.

먼저 실행 스크립트 추가

"scripts": {
   "bootstrap": "npm install; npx lerna bootstrap;",
   "package:admin": "npx lerna run --scope admin --stream dev",
   "start": "run-p --print-label package:*",
   "build": "lerna run --parallel build"
 },

다음 npm-run-all 을 설치 해준다. 개발할때만 필요한 라이브러리 이므로 devDependencies에 설치해준다.

npm install npm-run-all --save-dev

2. package 생성

먼저 package 를 생성 해주기 위해 내부에 생성되어있는 packages폴더로 이동한다.

cd packages

next.js프로젝트를 생성하는 방법은 CNA(create-next-app)을 사용하는 방법과 next를 인스톨하고 직접 설정해주는 방법이 있다 나는 CNA를 사용하지 않고 next 를 직접 인스톨해서 사용하는 방법을 사용해 봤다.
먼저 next프로젝트를 만들기 위해 폴더를 생성해주고 그 폴더로 이동해준다.

mkdir admin && cd admin

그 다음 package.json 파일 생성을 위해 다음 명령어를 입력한다.

npm init -y

그다음 admin 폴더 안에서 next 와 리액트를 설치해준다.

npm i next react react-dom -y

설치된게 확인 됐다면 package.json 에 아래 스크립트를 추가해준다.

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
 },

그다음 admin 폴더에 폴더 구조를 구성해준다.
next의 기본 구성은 아래 링크를 확인하면 됩니다.
Next.js 기본 폴더 구성

next의 기본 폴더 구성을 맞춰주고 먼저 next 빌드를 해주고 정상적으로 실행 되는지 테스트 해본다.

npm run build

npm run start

정상 적으로 실행 된다면 이후에 레르나를 통해 연동해줄 모듈을 생성한다 다시 /packages폴더로 나온다음

shared폴더를 만들어주고 위와 똑같이 npm 을 초기화 해주겠다.

그리고 나서 버튼 공용으로 사용할 버튼 컴포넌트와 컴포넌트들을 감싸줄 컨테이너 컴포넌트를 하나 만들어준다.

폴더구조는 위와 같이 해줬다. 자세한 코드는 마지막에 git 주소를올리겠습니다.

이제 기본적인 package 구성은 됐다 이제 admin 모듈에서 shared 모듈에 있는 버튼을 사용하기 위해 next.config.js 설정을 해야한다.
먼저 admin 폴더로 다시 이동한다.
이동 한뒤 next-transpile-modules 를 설치 해준다.

npm i next-transpile-modules -y

설치가 완료되면

next.config.js 파일을 생성하고 내부에 아래에 코드를 작성해준다.

const withTM = require("next-transpile-modules")(["../shared"]);
module.exports = withTM();

그다음 package.json에 dependencies 에

"shared" : "1.0.0",

를 추가 해주고 root 폴더로 이동한다음

npm run bootstrap

위와같이 부트스트랩을 진행 해주고 npm run start 로 프로젝트를 실행시켜본다.

실행된다면 성공!

tk_jang