[리액트] 개발환경 구성하기

리액트 개발 환경 구성하기

---

1.  Node.js 설치

https://nodejs.org/ko/

Node.js

노드는 자바스크립트(javascript) 어플리케이션을 실행할수 있는 환경을 제공해주는 서버이다. 내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치 등의 별도 소프트웨어 없이 동작하는 것이 가능하다.

node를 설치하면 npm(node package mager)를 사용할수 있다. 

npm이란?

node에 포함되어있는 기본 패키지이며 개발에 필요한 패키지들은 설치, 제거, 버전관리를 해줄수 있다.

 

노드 설치가 끝났다면 cmd 창을 열어버전을 확인해보자. 버전이 잘 뜬다면 설치가 잘 된 것이다.

 

 

2. VS CODE 설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

마이크로 소프트에서 개발한 소스코드 편집기이다. 디버깅, git, 하이라이트 등등 기본 기능으로도 강력하지만 다양한 확장프로그램들이 있어 활용하면 활용할수록 편리한 편집기다. 무엇보다도 프로그램이 가벼워 react 프로젝트를 진행할때 아주 좋다. 

vs code 실행화면

 

vscode의 유용한 확장프로그램(extention) 추천

왼쪽 탭중 아래에서 두번째 확장프로그램 탭으로 들어가면 다른 사용자들이 만들어 놓은 다양한 확장프로그램들을 볼 수 있다. 개발에 필요한 왠만한 확장프로그램은 다 있으니 찾아보고 설치하면 좀더 생산성 높은 프로그래밍을 할 수 있다.

 

추천1. ESlint

javascript의 문법적 에러(Syntax Error), 선언되었지만 사용되지 않은 변수 등등 우리가 개발하면서 놓치기 쉬운 것들을 잡아준다. ESlint가 잔소리해주는것만 수정해도 코드가 훨씬 깔끔해지는것을 느낄 수 있을 것이다.

 

추천2. Prettier

코드 포맷터이다. 개발자라면 누구나 가독성 높은 코드를 작성하기 위해 고민해봤을것이다. 하지만 매번 tab의 개수, 띄어쓰기 줄바꿈을 통일 시키긴 어렵다는건 너무 잘 알고 있을 것이다.  prettier는 이런 문제를 한번에 해결해준다. 코드를 작성하고 prettier로 돌리면 짜잔! 코드가 완벽하게 정리되어 포맷팅된다. ESlint와 더불어 prettier는 정말 필수중에 필수라고 생각된다.

한가지 더 팁을 주자면 prettier를 코딩중간중간 저장할때마다 자동으로 작동시킬 수 있다.

 

vscode를 실행시킨 상태에서 "ctrl + ," 를 누르면 설정페이지로 접근 할 수 있다. 

상단 검색창에 "Format on Save" 를 검색해서 체크박스가 체크가 되어있는지 확인하자.

그다음 "Default Formatter"를 검색해서 기본 코드형식을 prettier로 설정해주자.

설정이 완료되었다면 코드를 아무렇게나 작성하고 저장을 해보자

그럼 짠! 하고 코드 스타일이 바뀔것이다.

위에 두개만 설치해도 개발하는데 생산성은 많이 올라갈것이며 필요에 따라 인터넷에서 검색해서 추가하면된다. 다만 확장 프로그램이 많다고 무조건 생산성이 올라가는 것은 아니니 개발하면서 필요하다고 느끼는 것이 생길때 찾아서 추가하기를 추천한다! 처음부터 확장프로그램 왕창 추가하고 코딩시작하면 이게 왜 좋은지도 모른다!

 

3. Github Desktop

https://desktop.github.com/

GitHub Desktop

Git 소스관리를 보통 CLI환경인 터미널에서 명령어를 통해 진행하게되는데, 이 프로그램은 GUI로 사용할 수 있도록 도와준다. 기본적으로 Github 계정이 있어야하고 Github을 사용할줄 알아야한다.

형상관리도 되고 언제 어디서나 인터넷만 연결되어있으면 소스코드를 받아 코딩을 할 수 있기 때문에 Github은 개발자 필수 프로그램이라고 생각한다.