on
[React HH-2] NX 기반으로 React 개발환경 구성하기
[React HH-2] NX 기반으로 React 개발환경 구성하기
NX는 Angular/CLI를 확장하여 Typescript기반의 멀티 애플리케이션 및 노드 패키지개발을 위한 환경을 제공한다. 또한 Plugin 기반으로 React, Express, NextJS와 같은 프레임워크와 노드환경 확장을 통해 FullStack개발을 지원한다.
목적
SPA/CSR의 React 애플리케이션 생성
SSR을 위한 Next기반 애플리케이션 생성
CSR/SSR 두가지 애플리케이션에 대한 향후 비교 테스트 진행하여 성능 이점과 차이점 비교.
로컬에 새로운 환경 구성하기
NodeJS기반 테스트 환경 구축시 NodeJS버전을 변경하며 사용할 수 있도록 Local PC에 nvm (Node Version Manager)를 설치한다. Windows는 관련 링크를 참조하여 설치한다.
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
NodeJS LTS버전을 nvm을 통해 설치하고 사용설정한다.
$> nvm install v14.17.5 $> nvm use 14.17.5
NX 개발환경 구성을 위한 글로벌 패키지를 설치한다. Typescript는 v4.3.5 이상을 사용한다.
$> npm i -g @angular/cli@latest $> npm i -g @nrwl/cli@latest $> npm i -g yarn@latest
NX 개발환경 생성하기
npx 명령으로 개발환경 생성. REM Stack에서 REM은 React NextJS MongoDB 을 합친 것이다. React Application의 명칭은 "tube" 이다.
반드시 latest 버전으로 설치한다. $> npx create-nx-workspace@latest 선택하기 ✔ Workspace name (e.g., org name) · rem-stack ✔ What to create in the new workspace · react ✔ Application name · tube ✔ Default stylesheet format · scss ✔ Use Nx Cloud? (It's free and doesn't require registration.) · No $> cd rem-stack
다음으로 NX의 NextJS 플러그인을 설치하고, NodeJS기반 애플리케이션을 생성한다. NextJS 기반 Node Application은 "realtime" 이다.
설치 $> yarn add -D @nrwl/next@latest 생성 $> nx generate @nrwl/next:app realtime 또는 $> nx g @nrwl/next:app realtime
sass-node버전을 v5.0.0이 아닌 v4.14.1 을 사용한다.
$> npm uninstall node-sass $> npm install [email protected]
Nx 환경파일 재구성
애플리케이션과 라이브러리를 많이 만들다 보면 rem-stack/workspace.json 안에 설정이 계속 추가된다. 따라서 애플리케이션(라이브러리 포함) Nx의 환경설정을 분리한다.
workspace.json의 설정 정보를 각 애플리케이션 root 폴더에 "project.json" 파일을 생성하고 옮긴다.
workspace.json은 애플리케이션 위치를 표현한다.
테스트하기
"tube"라는 React 애플리케이션을 Dev Server기반으로 실행하고, "realtime"이라는 NextJS 프렘워크기반 노드 서버를 실행한다.
React Application: http://localhost:4200/
NextJS Application: http://localhost:4200/
React Single Page Application $> nx serve tube NextJS Application with Server $> nx server realtime
Prettier 코드 포멧터 설정하기
MS Code 편집기를 기준으로 prettier를 설정한다.
rem-stack 루트 폴더에 .prettierrc 파일을 생성한다.
파일을 생성한다. MS Code를 위한 Prettier Plugin을 설치한다.
.vscode/settings.json 에 prettier 옵션을 설정한다. settings.json 파일이 존재하지 않다면 생성후 설정한다.
에 prettier 옵션을 설정한다. settings.json 파일이 존재하지 않다면 생성후 설정한다. .vscode/extensions.json의 recommandation으로 prettier를 설정한다.
.prettierrc 내역
{ "printWidth": 120, "singleQuote": true, "useTabs": false, "tabWidth": 4, "semi": true, "bracketSpacing": true }
. vscode/settings.json 내역
{ "editor.formatOnPaste": true, "editor.formatOnType": true, "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[scss]": { "editor.suggest.insertMode": "replace", "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[html]": { "editor.suggest.insertMode": "replace", "editor.defaultFormatter": "esbenp.prettier-vscode" } }
.vscode/extensions.json 내역
{ "recommendations": ["ms-vscode.vscode-typescript-tslint-plugin", "esbenp.prettier-vscode"] }
참조
from http://mobicon.tistory.com/570 by ccl(A) rewrite - 2021-08-25 16:00:39