[React | node.js] Node.js프로젝트 세팅

🍕개발환경이란? 

- 프로그램 개발에 필요한 컴파일러, 통합개발도구(IDE), 서버런타임, 편집기 및 유틸리티 등을 개발 컴퓨터에 세팅해놓은 것을 말합니다. 

보통 프론트, 백엔드 개발의 경우 컴퓨터나 OS(운영체제)는 큰 영향이 없다. 하지만 애플의 iOS 앱을 개발한다고 하면 맥 컴퓨터가 있어야 하며 xcode라는 개발툴을 사용해 swift라는 프로그램언어로 개발해야 한다. 

 

🍕Node.js 초기 프로젝트 생성 및 실행

1. Node.js설치 

공식홈페이지를 통해 다운로드 LTS 와 최신버전으로 나눠져 있는데 LTS는 안정적, 신뢰도 높은 버전이라 LTS를 선택해서 다운받았다. -> Node.js를 설치할 때 자동으로 자바 패키지 관리 모듈인 NPM이 딸려온다. 

2. VSCode 설치 

3. 원하는 위치에 새폴더 생성 후 vscode로 열어준다. VScode 내에서 Terminal을 열어줍니다. (단축키: ` + ctrl)  // `는 백틱입니다. 

4. 터미널 창에서 npm init이라는 명령어를 치면 프로젝트의 기본정보를 작성하도록 여러 항목이 뜬다. 이때 실제로 작성해도 되며, 그냥 엔터를 연달아 눌러서 Default값으로 세팅된 파일(package.json)을 생성해준다.

성공적으로 완료됐다면 프로젝트 폴더에 package.json 파일이 생성된다.

5. 프로젝트 최초 실행 자바스크립트 파일인 index.js파일을 생성한다. (package.json파일 main 항목에 설정되어 있음)

간단한 코드를 짜고 터미널에서 node index.js 명령을 통해 프로젝트를 실행할 수 있다.

+ VS code의 Run and Debug 메뉴를 통해 쉽게 실행할 수 있도록 세팅해준다.

 -> 왼쪽 디버그 아이콘을 누르고 'create a launch.json file 버튼을 누른다. 이 다음 Launch Type을 Node.js로 선택해줍니다. launch.json파일이 생성됐다면 성공  

• terminal을 통해서 하는 것보다 간단하게 실행하고 디버깅을 할 수 있음
• VScode에서 프로젝트 실행은 Run and Debug 탭으로 이동하여 Launch name을 선택 후 F5버튼 혹은 화살표 버튼을 클릭하면 정상적으로 실행됩니다. 

 

🍕프론트엔드 개발환경

프론트의 경우, HTML, CSS, JS 등을 주로 다루기 때문에 별도의 컴파일러 설치가 필요없다. 여러 IDE 도구가 있지만 최근에는 다양한 플러그인과 풍부한 기능을 제공하는 Visual Studio Code를 많이 사용한다. 

 

사용 IDE: VSCode(Visual Studio Code)

 

VSCode 필수 플러그인 (왼쪽 배너에서 마지막 아이콘을 누르면 Extension 창이 뜬다.) 

• open in broswer //내 html파일을 브라우저에서 보여준다
• prettier (optional) //코드를 예쁘게 정렬해준다. 개인적으로 필수로 있는게 편했음

---

 

리액트 프로젝트 필수프로그램 설치

• github 
• VScode (IDE)
• (window 사용사만) Git bash 
• NVM 설치 
  • 윈도우 사용자의 경우 꼭 NVM을 설치하지 않아도 된다. node 공식 사이트에서 LTS버전을 다운받자. 
  • node.js를 다운받으면 npm도 같이 딸려옴 
  • NVM(Node Version Manager)은 Node.js를 설치하지 위한 툴이기 때문에 순서를 주의해야 합니다.

설치 순서

nvm -> node.js -> npm ⭕
apt or yum or brew -> node.js -> npm ⭕ (하지만 비추천)
node.js -> nvm ❌(불가능)

NVM 이 뭔가요?
Node.js 의 버젼 관리자라고 하기에는 의미가 조금 더 넓습니다. 버젼 관리자라고 이해를 하면 업데이트 하는 프로그램? 정도로 생각하기 쉬운데, 이 보다는 Node.js 의 각 버젼을 유지하면서 시스템을 구성해야 하는 경우를 위해 사용하는 경우에 많이 이용됩니다. 다시말해 같은 시스템 안에서 여러 Node.js 를 사용하기 위해 버젼별로 Node.js 환경을 격리시키는 역할로써 더 많이 사용되지 않나 싶습니다.