[React.js] 리액트 개발 환경 세팅 - Node.js 및 VSCode 설치

 

Node.js 설치

 

Node.js란?

Node.js는 위키백과에 아래와 같이 설명 되어 있는데요. 간단히 정의 해서 V8 자바스크립트 엔진을 사용해 Back-End(웹서버) 개발에 사용되는 플랫폼이라고 생각 합니다.

 

Node.js는 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용하며 논블로킹(Non-blocking) I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있다. [위키 백과 https://ko.wikipedia.org/wiki/Node.js]

 

node.js를 설치 하기위해서 일단 node.js 사이트에 접속 해 사용자 운영체제에 맞는 버전의 설치 파일을 받아서 설치 해 줍니다. 현재 블로그 포스팅 하는 시점에서는 20.16.0 LTS버전으로 설치 하시면 됩니다.

 

https://nodejs.org/ko/

Node.js — Run JavaScript Everywhere

 

설치가 완료되고, 명령 프롬프트를 실행하여 노드의 버전을 확인하는 명령어를 쳤을때 버전 정보가 나오면 정상적으로 설치가 완료 된겁니다.

(저는 이미 노드가 설치가 되어 있어 20.11.0버전으로 나오는데요. 설치 버전에 따라 다르게 나올 수 있습니다.)

C:\> node -v

 

---

VSCode 설치 및 react 관련 플러그인 설치

 

VSCode(Visual Studio Code)는 코딩을 하기위해서 쓰는 에디터 툴이라고 생각하면 됩니다. VSCode 외에 Notepad++, Atom Editor, Brackets, Sublime Text 등 다양한 에디터들이 있는데요. 꼭 VSCode가 아니더라고 사용자가 익숙하고 편안한 환경의 에디터를 사용하셔도 됩니다. 운영체제에 맞는 버전의 설치 파일을 다운받고 여러분들의 PC에 설치 해 줍니다.

 

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

설치 완료 후 VSCode 실행 화면

 

VSCode를 설치 완료 했으면 실행 시켜줍시다. 이러면 이제 react 어플리케이션을 개발하기 위한 환경을 어느정도 세팅 완료 했는데요. 하지만 react 코딩을 편하게 하기 위해서 몇 가지 플러그인을 설치 하겠습니다.

플러그인을 설치하기 위해서는 위 사진과 같이 왼쪽 상단의 블럭모양의 버튼이 있는데요. 이부분을 클릭 해주고 "ES7"을 검색창에 입력하고 검색을 해주세요.

 

위 그림과 같이 검색이 된다면, 빨간색 박스 부분에 install 버튼을 눌러 플러그 인을 설치 해줍니다.

(저는 이미 설치가 되어 있어 사용자들 분과 조금 다른점 이해해 주세요^^)

ES7+ Snippets 플러그인은 react 코딩시 조금더 편리하게 코딩하기 위해 짤게 약어만 입력하여 자동 완성 시켜주는 플러그인 이라고 생각하시면 됩니다. 예를 들어 아래와 같은 코드를 입력 한다고 합시다.

import React from 'react'

function blog() {
  return (
    <div>blog</div>
  )
}

export default blog

 

위 코드를 직접 다 입력 할 수도 있지만, react componet를 생성 할 때마다 계속 반복해서 코드를 치려면 번거롭고 귀찮기도 하고 입력 하다가 오타라도 나면 또 어디 오타가 났다 찾으려면 여간 귀찮은 작업의 반복이 될 수도 있습니다. 하지만 ES7+ Snippets 플러그인을 통해 쉽게 입력 할 수 있습니다.

ES7+ Snippets 플러그인 통해서 아래와 같이 스니펫을 한다면 쉽고 정확하고 빠르게 입력이 가능합니다.

** rfce : React Function Component + Export의 약자 입니다.

 

rfce말고도 여러가지 스니펫들이 있는데요. 이 부분은 구글링을 다양하게 자료를 찾아 볼 수 있고 자주 쓰다보면 쉽게 익 숙해지니 다같이 열심히 공부해 봐요^^

ES7+ Snippets 플러그인 외에도 prettier, vscode-styled-components, Live Server 등 편리하고 다양한 플러그인들이 있는데요. 플러그인 설치는 필수는 아니니 여러분들 입맛에 맞게 그때그때 설치 하셔서 사용 하셔도 됩니다. 여기까지 react 개발 환경 세팅 포스팅을 마치겠습니다. 읽어주셔서 감사합니다~