[Job Preparation] 개발 환경 구축 (React.js)

개발 환경 구축 (React.js)

들어가며

• 리액트(React.js) 개발 환경 구축을 위해서 필요한 과정들을 정리해본다.

 

Node.js

• LTS 버전으로 설치하기
  • Long Term Service, 장기 지원 버전

Node.js — Run JavaScript Everywhere

 

• 버전 관리가 필요할 경우 NVM(Node Version Manager)를 설치한다.

Releases · coreybutler/nvm-windows

 

• 설치 후, 터미널에 아래 명령을 실행하여 제대로 설치되었는지 확인한다.

$ node -v

$ nvm -v

 

• @yarn@을 패키지 관리자로 사용하고자 할 경우, 터미널의 아래 명령을 실행하여 설치해준다.

$ npm install -g yarn

 

 

git 설치

Git

 

• git 설치 후, 터미널에 아래 명령을 실행하여 사용자 이름(@name@)과 이메일(@email@)을 설정해준다.

$ git config --global user.name "user"
$ git config --global user.email "user@domain.com"

 

 

IDE : Visual Studio Code

프로그램 설치

Visual Studio Code - Code Editing. Redefined

 

확장(Extension) 설치

• 리액트로 개발하면서 내가 자주 사용하는 확장들을 정리보았다.

 

ES7+ React/Redux/React-Native snippets - Visual Studio Marketplace

ESLint - Visual Studio Marketplace

• JSX 코드의 일부분만 드래그 해서 다른 컴포넌트 파일로 분리시켜주는 도구

glean - Visual Studio Marketplace

• 패키지를 불러올 때, 용량을 보여주는 도구

Import Cost - Visual Studio Marketplace

• 들여쓰기(Indent)의 길이에 따라 다양한 색깔을 칠해주는 도구

indent-colorizer - Visual Studio Marketplace

HTML CSS Support - Visual Studio Marketplace

JavaScript (ES6) code snippets - Visual Studio Marketplace

Prettier - Code formatter - Visual Studio Marketplace

JS JSX Snippets - Visual Studio Marketplace

JSX HTML <tags/> - Visual Studio Marketplace

Git Graph - Visual Studio Marketplace

Live Server - Visual Studio Marketplace

npm Intellisense - Visual Studio Marketplace

Rainbow CSV - Visual Studio Marketplace

Reactjs code snippets - Visual Studio Marketplace

SQLite Viewer - Visual Studio Marketplace

Tailwind CSS IntelliSense - Visual Studio Marketplace

Tailwind Docs - Visual Studio Marketplace

Typescript React code snippets - Visual Studio Marketplace

vscode-icons - Visual Studio Marketplace

• API 테스트 도구

Thunder Client - Visual Studio Marketplace

 

기타 설정

Prettier (Code Formatter) 설정하기

• Prettier 확장을 설치한다.

Prettier - Code formatter - Visual Studio Marketplace

 

• @[Ctrl]@ + @[,]@를 클릭하여 VSCode의 설정에 들어간다.
• @Editor: Default Formatter@를 검색한 후, 다음과 같이 설정해준다.

• @Format on save@를 검색한 후, 다음과 같이 체크해준다.

• 프로젝트 내부에  @.prettierrc@ 파일을 생성하여 프로젝트별로 Prettier 설정을 해줄 수 있다.

 

기본 터미널을 Git Bash 셸로 설정하기

• VSCode의 기본 터미널을 Git Bash 셸로 설정해주는 방법이다.
  • git을 설치할 때 함께 설치되는 셸이다.
• @[Ctrl]@ + @[Shift]@ + @[P]@를 눌러서 명령 팔레트를 실행시킨 후 @default@를 검색하여 @Terminal: Select Default Profile@을 클릭한다.

• 기본 셀을 @Git Bash@를 클릭한다.

• @[Ctrl]@ + @[Shift]@ + @[P]@를 눌러서 명령 팔레트를 실행시킨 후 @json@를 검색하여 @Preferences: Open User Settings@를 클릭한다.

• 아래의 내용을 입력하고 저장한다.

{
    "terminal.integrated.defaultProfile.windows": "Git Bash",
}

 

기본 들여쓰기(Indent) 간격 설정하기

• @[Ctrl]@ + @[Shift]@ + @[P]@를 눌러서 명령 팔레트를 실행시킨 후 @json@를 검색하여 @Preferences: Open User Settings@를 클릭한다.

• 아래의 내용을 입력하고 저장한다.
  • 기본 들여쓰기 사이즈는 스페이스 4칸, JavaScript의 경우 2칸으로 지정한다.

{
  // I want my default to be 4, but JavaScript/JSON to be 2
  "editor.tabSize": 4,
  "[javascript]": {
    "editor.tabSize": 2
  },
  "[json]": {
    "editor.tabSize": 2
  },

  // This one forces the tab to be **space**
  "editor.insertSpaces": true
}

 

JSX 자동 완성 기능 켜기

• @[Ctrl]@ + @[Shift]@ + @[P]@를 눌러서 명령 팔레트를 실행시킨 후 @json@를 검색하여 @Preferences: Open User Settings@를 클릭한다.

• 아래의 내용을 입력하고 저장한다.

{
  ...
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "emmet.syntaxProfiles": {
    "javascript": "jsx"
  }
}

 

에디터 기본 폰트 설정하기

• @[Ctrl]@ + @[Shift]@ + @[P]@를 눌러서 명령 팔레트를 실행시킨 후 @json@를 검색하여 @Preferences: Open User Settings@를 클릭한다.

• 아래의 내용을 입력하고 저장한다.

{
    "editor.fontFamily": "Consolas, 'Malgun Gothic', 'Courier New', monospace",
}