[Step2] 개발 환경 세팅을 해보자!

굳이 Node.JS 와 React를 선택한 이유는?

---

이 글은 내가 나에게 설명하는 것처럼 작성한 글이어서 존댓말로 작성되지 않은 점 양해 부탁드립니다~

웹퍼블리싱을 처음 배울 때 중점적으로 학습했던 JavaScript를 활용한 개발을 하고싶어서 개발 플랫폼으로 Node.js와 웹 프레임워크로 React를 선택했고 마침 인프런에서 관련 강의가 있어서 주저없이 시작했지 ㅎㅎ

강의 내용이 보일러 플레이트(Boilerplate)를 만들면서 학습하는 내용이라 해당 내용을 참고해서 블로그 글을 작성할 예정이니 참고해! 

Node.JS의 설치와 React를 설치하는 방법은 여러 블로그에서 자세하게 설명이 되어있으니 여기에서는 내가 설치하면서 겪었던 문제점이나 기억하고 싶은 내용을 위주로 작성해봤어

참! 내가 사용하는 PC환경은 Mac OS Monterey(ver 12.3.1)이고, 칩은 Apple M1 Pro 이니까 참고해! 

 

Node.JS & Express.JS를 깔아보자!

---

Node.JS 설치 확인 방법

1) 터미널에서 node -v 를 입력했을 때 version이 출력되지 않으면 설치되지 않은 것!
(설치되지 않았다면 https://nodejs.org/ko/  공식 홈페이지에서 LTS버전으로 다운 받아서 사용할 것!)

프로그램 개발할 폴더 생성

문서에 개발할 프로젝트 이름으로 폴더를 생성하고 해당 폴더에 npm 패키지를 만들어야해 터미널에서 아래 코드를 순서대로 입력하면 npm 패키지를 생성할 수 있어 

cd document
mkdir [프로젝트 이름]
cd [프로젝트 이름]
npm init

npm init을 입력하면 프로젝트에 대한 정보를 입력하는 입력창들이 한줄씩 출력되는데 author(작가??만든이??) 정도 정보를 입력해주고 나머지는 skip해도 되고(author 도 스킵해도 상관없어) 입력한 정보들은 VS code를 통해 해당 폴더를 열면 package.json 파일안에 정보가 기록되어 있으니 찾아볼 수 있어.

그리고 npm init를 하면 node_modules라는 폴더가 설치되는데 그건 건드릴 일 없으니 고이 모셔두면돼 ㅎㅎㅎ(삭제는 안돼!)

Express.JS 설치

node.JS를 더 쉽게 사용하기 위해서 Express.JS를 설치해야하는데 터미널에서 아래 코드를 입력하면돼(설치방법을 더 자세하게 알고싶으면 하단에 정보출처 3)를 참고해!)

설치한 라이브러리 정보는 package.json에서 dependencies 에 이름과 version이 추가되니까 해당 파일에서 확인할 수 있어

npm install express --save

 

Express를 통해서 기본 index.js파일 실행하기!

---

 

Express 공식홈페이지에서 설명하는 방법대로 index.js를 만들어서 파일을 실행해보자! (해당 링크는 출처 4)번에 적어놨어!)

index.js 에다가 해당 코드를 추가해줬어

const express = require('express')  // express를 사용하기위해서 정보를 가져오고
const app = express()	//express를 app으로 사용하기위해서 변수에 저장!
const port = 3000	//아무거나 사용해도 되지만 나는 그냥 3000쓸거야 

// 루트경로('/')에 오면 send()로 보내는 내용을 출력하라는 내용
app.get('/', (req, res) => {
  res.send('Boiler Plate를 만들어보자!!!!!!')
})

// 포트에 접속하면 console.log로 접속여부를 확인하기 위한 내용
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

 

코드를 입력한다음 package.json의 "scripts"에다가 "start"라는 명령어를 터미널에서 실행하려면 "index.js"를 실행하라는 명령어를 추가해줘야해. 그래야 npm start를 터미널에 입력했을 때 index.js를 실행한 것을 볼 수 있어!

"scripts": {
	"start": "node index.js",  //이 내용을 추가해주면돼!
    "test": "echo \"Error: no test specified\" && exit 1"
},

(주의할 점!!!! 유튜브 영상에서는 npm run start를 입력하는데 npm버전이 업데이트 되면서 run이라는 명령어 없이 start를 즉시 입력해야 error없이 사용가능하니까 참고해!)

터미널에 출력된 결과창

h-gomi@H-gomi-M1-PRO BoilerPlate % npm start

> boilerplate@1.0.0 start
> node index.js

Example app listening on port 3000

 

localhost:3000에서 실행한 결과

글을 마치면서! 

---

이번 Step에서는 Node.JS 와 Express.JS를 설치하고 index.js를 만들어서 실행하는 방법까지 알아보았어! 

여러가지 설치하고 오류도 많았지만 그래도 무사히 마무리했다니 기쁘네 ㅎㅎ 

앞으로 더 많은 내용을 학습할텐데 화이팅해서 BoilerPlate완성해보자!

---

 

[정보 출처]

1) Node.js란? : https://velog.io/@vermonter/JS-Node.js란-무엇인가

[JS] Node.js란 무엇인가?

2) 인프런 : https://www.inflearn.com/course/따라하며-배우는-노드-리액트-기본/dashboard

[무료] 따라하며 배우는 노드, 리액트 시리즈 - 기본 강의 - 인프런 | 강의

3)Express 설치하기 : https://expressjs.com/ko/starter/installing.html

Express 설치

4)Express Hello World 예제 : https://expressjs.com/ko/starter/hello-world.html

Express "Hello World" 예제