[MongoDB 기초부터 실무까지] 3. Node.js 환경 세팅 및 REST API 만들기

이 포스팅은 아래의 강의를 참고한 개인 정리본이니 강의를 통해 공부하시는 것을 추천드립니다.

 

https://inf.run/bWm8

mongoDB 기초부터 실무까지(feat. Node.js) - 인프런 | 강의

---

1. Node.js 설치

Node.js란? Javascript 언어를 서버에서 구동할 수 있게 해주는 런타임 언어

 

설치 방법)

아래의 링크로 접속해 사진처럼 안정적인 버전으로 설치한다.

https://nodejs.org/ko/

Node.js

 

2. Node.js 설치 확인

Node.js가 정상적으로 설치되어 있다면 아래 패키지 2개를 확인해봐야한다.

- npm

- node

 

확인하는 방법은 버전으로 확인하면 된다.

npm -v
node -v

 

 

+) npm이란?

미리 개발된 모듈들을 설치받을 수 있는 환경

다만, 오픈소스이기에 비슷한 기능을 하는 모듈들에도 성능, 보안 이슈가 있을 수 있기 때문에 미리 설치받을 모듈에 대해서 확인 후 설치하는 것이 좋다.

 

 

3. 코드 에디터 설치

자신이 쓰고 있는 것으로 하면 되며, 쓰고 있는 에디터가 없다면 vs code를 추천한다.

포스팅에서는 vs code 기준으로 진행할 예정

vs code 설치 링크 : https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

 

 

4. vs code 사용해보기

바탕화면에 임의의 폴더를 자유롭게 생성 후, vs code에서 해당 폴더를 열어보자

 

 

 

필자는 TEST라는 폴더로 만들었으며, 이 폴더 안에 간단한 Javascript 파일을 생성해보겠다.

 

 

 

테스트용 소스로 아래처럼 간단하게 작성하였다.

let var1 = "welcome nodejs!!";

function sum(a, b){
    return a+b;
}

let intVar = sum(1,5);
let stringVar = sum("key","board");

console.log("intVar : " + intVar);
console.log("stringVar : " + stringVar);

 

 

 

vs code내에 있는 터미널을 열어 확인해보자.

 

 

추가) MODULE_NOT_FOUND 발생 시

node하고 스페이스바를 입력하고 t를 누른상태에서 tab 버튼을 누르면 알아서 자동완성이 된다.

이렇게 생성된 명령어를 치면 잘 될 것이다.

 

필자도 node test.js 했는데 잘 안됐다..

 

 

 

5. Express 설치

Express : Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크

https://expressjs.com/ko/

Express - Node.js 웹 애플리케이션 프레임워크

 

 

해당 폴더의 위치에서 터미널로 아래의 과정을 진행한다.

(필자는 폴더를 참고로 다시 만들어서 경로를 변경함)

 

1. npm init

npm init

 

 

아래 이미지처럼 package name, version, description 정도만 입력하고 나머지는 계속 엔터를 눌러서 진행했다.

 

 

 

npm init이 정상적으로 적용됐다면, 아래의 파일인 package.json이 생성된다.

 

필자의 경우, main에 해당되는 파일인 index.js가 없어서 손수 생성해줬다.

또한, scripts안에 start 명령어를 만들어줬다.

 

start 명령어는 node js 서버의 메인 파일을 실행시키는 명령어이다.

 

start 명령어를 정의하는 이유는 다른 사람들과 협업하다보면 main js파일이 뭔 지 잘 모를텐데 start 명령어를 정의해주면 바로 실행할 수 있기 때문.

 

start 명령어 실행 방법으로는 

npm run start

 

 

 

 

2. express 설치

npm i express

 

설치가 완료되면 node_modules라는 폴더와 package.json 안에 express의 버전 정보가 입력된다.

 

 

 

6. Express로 hello world 출력해보기

npm run start의 명령어로 index.js 를 실행시키도록 해놨기에 index.js에 아래의 코드를 작성한다.

const express = require('express');
const app = express();

// 링크 설정
app.get('/', function(requset, response){
    return response.send("hello world");
})

// 포트 설정
app.listen(3000, function(){
    console.log("server opened port : 3000");
})

 

 

그리고 npm run start 입력하면 아래의 이미지처럼 나타날 것이다.

 

 

 

이제 웹브라우저(크롬 or Edge 등 무관)에서 localhost:3000 을 주소창에 입력하면 hello world가 나올 것이다.

서버를 종료하고 싶을 땐 터미널에서 Ctrl + C를 누르면 된다.

 

 

 

 

7. nodemon 모듈 설치하기

위에서 js 코드를 작성하고 npm run start를 이용해 서버를 띄울 수 있다.

하지만, 서버 실행 도중 js 코드가 수정된다면 바로 서버에 반영되지 않아 서버를 재시작해야 한다.

 

nodemon 모듈은 서버 재시작 없이 수정사항이 반영될 수 있게 도와주는 모듈이다.

 

npm i -D nodemon

(-D : 개발 환경에서 사용하는 것이라는 것을 명시)

 

 

node로 실행하는 것이 아닌 nodemon으로 서버를 시작해야 한다.

간편하게 사용하기 위해 아래의 명령어처럼 명령어를 등록해둔다.

 

 

 

npm run dev로 실행하기

 

 

 

 

해당 서버는 REST API로 개발할 예정이다.

REST API란?

데이터를 어떻게 조작하느냐에 따라서 HTTP METHOD를 다르게 통신하는 방법이다.

(물론, 하나의 HTTP METHOD로 모든 기능을 할 수 있지만 개발자들 사이에서의 일종의 약속. 규칙이라고 보면 된다.)

ex) POST를 이용해 데이터를 조회, 등록, 수정, 삭제가 가능하지만 REST API 에서는 주로 등록하는데 사용한다.

 

규칙표

Create : POST Read : GET Update : PUT Delete : DELETE

 

 

8. User 데이터를 조회할 수 있는 간단한 API 만들기

위에서 소개한 REST API의 방식으로 유저를 조회하고 추가하는 API를 만들어보자.

 

(브라우저에서 주소창을 이용해 서버에 요청하는 방식은 GET 방식이므로 다른 방식을 사용하기 위해서는 postman이라는 툴을 이용해서 확인해볼 것이다.)

postman 관련 포스팅 : https://ajdahrdl.tistory.com/255

 

const express = require('express');
const app = express();

// 포트 설정
app.listen(3000, function(){
    console.log("server opened port : 3000");
});

// GET METHOD로 된 링크 설정
app.get('/helloWorld', function(requset, response){
    return response.send("hello world");
});

/*** user API 정의(시작)  ***/

// GET Method : 유저 조회
const users = [{name:"test1", email:"test1@naver.com"}];
app.get("/user", function(request, response){
    let data = {users: users};
    response.send(data);
});

// POST Method : 유저 추가
app.post("/user", function(request, response){
    users.push({name:"test2", email:"test2@naver.com"});
    let data = {success:true};
    response.send(data);
});

/*** user API 정의(끝)  ***/

 

 

1) GET 요청

 

2) POST 요청(POST 요청 후 다시 유저를 조회)

 

 

9. 실제로 데이터를 담아서 서버에 요청해보기

위에서 user에 추가를 할 때 서버에서 임의로 지정해둔 test2가 추가되도록 하였다.

하지만, 클라이언트에서 직접 데이터를 넣어서 이 데이터가 user에 추가되도록 구현해보자.

 

표시된 부분을 수정하였다. (request로 받은 데이터를 넣도록 구현함)

request? 클라이언트쪽에서 보낸 데이터가 모두 담기는 곳

response? 서버쪽에서 보낸 데이터가 모두 담기는 곳

 

 

1) 초기 상태

 

 

 

2) User 추가

 

 

3) 추가된 User 확인