블로그 이미지
윤영식
Full Stacker, Application Architecter, KnowHow Dispenser and Bike Rider

Publication

11-27 11:31

Category

Recent Comment

'React/Start REM Stack'에 해당되는 글 1

  1. 2020.04.22 [NX-REACT] NX 기반으로 React 개발환경 구성하기
2020. 4. 22. 15:22 React/Start REM Stack

NXAngular/CLI를 확장하여 Typescript기반의 멀티 애플리케이션 및 노드 패키지개발을 위한 환경을 제공한다. 또한 Plugin 기반으로 React, Express, NestJS와 같은 프레임워크와 노드환경 확장을 통해 FullStack개발을 지원한다. 

 

 

로컬에 새로운 환경 구성하기

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 v12.16.2
$> nvm use 12.16.2

NX 개발환경 구성을 위한 글로벌 패키지를 설치한다. Typescript는 v3.8.3을 사용한다.

$> npm i -g @angular/cli@latest
$> npm i -g @nrwl/cli@latest
$> npm i -g yarn@latest
$> npm i -g typescript@3.8.3

 

NX 개발환경 생성하기

npx 명령으로 개발환경 생성. REM Stack에서 REM은 React NestJS MongoDB 을 합친 것이다. React Application의 명칭은 "tube" 이다.

$> npx create-nx-workspace
선택하기
   workspace name: rem-stack (빈칸없이 워크스페이스 폴더 명칭)
   type: react
   project name: tube
   style: scss
   
$> cd rem-stack

 

다음으로 NX의 NestJS 플러그인을 설치하고, NodeJS기반 애플리케이션을 생성한다. NestJS 기반 Node Application은 "realtime" 이다.

설치
$> yarn add -D @nrwl/nest

생성
$> nx generate @nrwl/nest:application realtime

 

 

테스트하기

"tube"라는 React 애플리케이션을 Dev Server기반으로 실행하고, "realtime"이라는 NestJS 프렘워크기반 노드 서버를 실행한다. 

  • React Application: http://localhost:4200/  => brwoser 오픈
  • NestJS Application: http://localhost:3333/api

 

React Application
$> nx serve tube

NestJS Node Server
$> nx server realtime

 

Prettier 코드 포멧터 설정하기

MS Code 편집기를 기준으로 prettier를 설정한다. 

  • rem-stack 루트 폴더에 .prettierrc파일을 생성한다.
  • MS Code를 위한 Prettier Plugin을 설치한다. 
  • .vscode/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"]
}

 

 

참조

'React > Start REM Stack' 카테고리의 다른 글

[NX-REACT] NX 기반으로 React 개발환경 구성하기  (0) 2020.04.22
posted by peter yun 윤영식
prev 1 next