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

Node.js
- LTS 버전으로 설치하기
- Long Term Service, 장기 지원 버전
Node.js — Run JavaScript Everywhere
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
- 버전 관리가 필요할 경우 NVM(Node Version Manager)를 설치한다.
Releases · coreybutler/nvm-windows
A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows
github.com
- 설치 후, 터미널에 아래 명령을 실행하여 제대로 설치되었는지 확인한다.
$ node -v
$ nvm -v
yarn
을 패키지 관리자로 사용하고자 할 경우, 터미널의 아래 명령을 실행하여 설치해준다.
$ npm install -g yarn
git 설치
Git
git-scm.com
- 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
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
확장(Extension) 설치
- 리액트로 개발하면서 내가 자주 사용하는 확장들을 정리보았다.
ES7+ React/Redux/React-Native snippets - Visual Studio Marketplace
Extension for Visual Studio Code - Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier.
marketplace.visualstudio.com
ESLint - Visual Studio Marketplace
Extension for Visual Studio Code - Integrates ESLint JavaScript into VS Code.
marketplace.visualstudio.com
- JSX 코드의 일부분만 드래그 해서 다른 컴포넌트 파일로 분리시켜주는 도구
glean - Visual Studio Marketplace
Extension for Visual Studio Code - The extension provides refactoring tools for your React codebase
marketplace.visualstudio.com
- 패키지를 불러올 때, 용량을 보여주는 도구
Import Cost - Visual Studio Marketplace
Extension for Visual Studio Code - Display import/require package size in the editor
marketplace.visualstudio.com
- 들여쓰기(Indent)의 길이에 따라 다양한 색깔을 칠해주는 도구
indent-colorizer - Visual Studio Marketplace
Extension for Visual Studio Code - Makes indentation easier to read
marketplace.visualstudio.com
HTML CSS Support - Visual Studio Marketplace
Extension for Visual Studio Code - CSS Intellisense for HTML
marketplace.visualstudio.com
JavaScript (ES6) code snippets - Visual Studio Marketplace
Extension for Visual Studio Code - Code snippets for JavaScript in ES6 syntax
marketplace.visualstudio.com
Prettier - Code formatter - Visual Studio Marketplace
Extension for Visual Studio Code - Code formatter using prettier
marketplace.visualstudio.com
JS JSX Snippets - Visual Studio Marketplace
Extension for Visual Studio Code - Extensions for React, Redux in JS with babel and ES7 syntax
marketplace.visualstudio.com
JSX HTML <tags/> - Visual Studio Marketplace
Extension for Visual Studio Code - Use HTML Tags into JSX
marketplace.visualstudio.com
Git Graph - Visual Studio Marketplace
Extension for Visual Studio Code - View a Git Graph of your repository, and perform Git actions from the graph.
marketplace.visualstudio.com
Live Server - Visual Studio Marketplace
Extension for Visual Studio Code - Launch a development local Server with live reload feature for static & dynamic pages
marketplace.visualstudio.com
npm Intellisense - Visual Studio Marketplace
Extension for Visual Studio Code - Visual Studio Code plugin that autocompletes npm modules in import statements
marketplace.visualstudio.com
Rainbow CSV - Visual Studio Marketplace
Extension for Visual Studio Code - Highlight CSV and TSV files, Run SQL-like queries
marketplace.visualstudio.com
Reactjs code snippets - Visual Studio Marketplace
Extension for Visual Studio Code - Code snippets for Reactjs development in ES6 syntax
marketplace.visualstudio.com
SQLite Viewer - Visual Studio Marketplace
Extension for Visual Studio Code - SQLite Viewer for VSCode
marketplace.visualstudio.com
Tailwind CSS IntelliSense - Visual Studio Marketplace
Extension for Visual Studio Code - Intelligent Tailwind CSS tooling for VS Code
marketplace.visualstudio.com
Tailwind Docs - Visual Studio Marketplace
Extension for Visual Studio Code - Easily access the Tailwind CSS documentation from within Code
marketplace.visualstudio.com
Typescript React code snippets - Visual Studio Marketplace
Extension for Visual Studio Code - Code snippets for react in typescript
marketplace.visualstudio.com
vscode-icons - Visual Studio Marketplace
Extension for Visual Studio Code - Icons for Visual Studio Code
marketplace.visualstudio.com
- API 테스트 도구
Thunder Client - Visual Studio Marketplace
Extension for Visual Studio Code - Lightweight Rest API Client for VS Code
marketplace.visualstudio.com
기타 설정
Prettier (Code Formatter) 설정하기
- Prettier 확장을 설치한다.
Prettier - Code formatter - Visual Studio Marketplace
Extension for Visual Studio Code - Code formatter using prettier
marketplace.visualstudio.com
[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", }
'ETC. > Job Preparation' 카테고리의 다른 글
[Job Preparation] 코딩 테스트 준비 : 자료구조 (with Python) (1) | 2024.09.22 |
---|---|
[Job Preparation] 코딩 테스트 준비 : SQL (0) | 2024.09.22 |
[Job] 기술 인터뷰 준비 (예상 질문 모음) (0) | 2023.08.08 |