node.js와 express

오늘은 node.js와 express에 대해서 쪼끔... 알아보기로 한다.

그냥 node.js 홈페이지에 가서 설치를 해도 되지만, 이전에 프로젝트를 수행하다가 노드 버전 때문에 계속 나 혼자 충돌? 이 일어났던 적이 있어 nvm으로 설치를 하는 게 좋은 것 같다.

알고 보니 이전에 개발 공부를 하시던 분들은 그때 최신버전이 16이었고, 나는 새싹에서 처음 다운로드하였어서 18 버전이라 그랬던 것...

 

https://github.com/coreybutler/nvm-windows/releases

nvm-setup.zip 이었던가..? 설치를 하고 실행하면 됐던 것 같다.

$ nvm install v16 <- 설치하고 싶은 버전

// 내가 설치한 목록 확인
$ nvm ls

// 사용할 버전
$ nvm use 16

 

이렇게 사용하면 된다..!

 

 

index.js

console.log("Hello");

원래라면 해당 파일은 브라우저 상의 console에서 확인이 가능했었는데, node.js를 설치함으로 인해서 node 명령어를 사용하여 해당 내용을 확인할 수 있게 되었다.

node 명령어를 이용하여 실행!

 

 

 

express

node.js 기반의 웹 프레임워크(요청에 따라 응답해 주는 역할)

 

설치방법

$ npm i express
$ yarn add express

yarn은 npm을 보완하여 나온 패키지 매니저인데, node를 설치하면 사용할 수 있는 npm과 달리 따로 설치를 해주어야 한다.

$ npm install yarn -g
$ yarn --version

 

이제 express를 사용해보자!

index.js

// 예제는 express 공식 문서에서 가져왔다.
const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  // 응답에 Hello World 라는 문자를 담아서 보내겠다
  // send 대신 좀 더 명시적으로 해주려면 json을 사용해도 된다.
  res.send('Hello World!')
})

// 항상 돌아가고 있다.
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

 

port가 3000번이니 localhost:3000번을 듣고 있을 때(주소창에서 localhost를 포트 3000으로 열었을 때) 명령어를 실행할 수 있게 된다.

port는 서버의 주소로 3000, 5000등 포트마다 다른 프로그램의 실행이 가능하다.

HTTP 메서드는 요청의 목적, 종류를 알리는 수단으로 여기에서는 위의 예제에서는 get을 사용하고 있다.

get과 post의 차이점을 간단하게 알아보자면  get(주소창에서 데이터 전달), post(body에 정보를 담아서 전달)

'/'는 라우팅이라고 한다. 

 

cf) axios와 express의 차이

axios: 요청을 보내서 받아오는 것
express: req를 받아서 res를 돌려주는 기능

 

 

 

get

get으로 정보를 전달할 때는 2가지 방법이 있는데 params와 query가 있다.

 

params

유튜브 등 라우팅 뒤에 각각 채널의 아이디가 들어가는데, 유튜버마다 각각 라우팅을 해준다는 것은... n만자가 넘어갈 것이기 때문에  말이 안 된다. 아이디에 따라 화면을 다르게 보여줘야 하는데 이때 각각의 아이디를 파라미터를 통해 받아올 수 있다.

app.get("/user/:id", (req, res) => {
  const q = req.params;
  console.log(q);
  res.json({ id: q.id });
});

localhost로 접근

console로 나오는 값

 

 

query

app.get("/user/:id", (req, res) => {
  const q = req.query;
  console.log(q);
});

위와 같이 코드를 작성하고 주소창에 아래와 같이 입력을 하면

http://localhost:3000/user/water?q=query&name=water&age=30

이렇게 값을 받아올 수 있게 된다

 

 

잠깐 알고 가는 package.json과 package-lock.json의 차이

package.json | 내용을 대략적으로 확인하기 위함
package-lock.json | 내용을 상세하게 확인하기 위함

(아직 뭔가 설치를 하지는 않았지만...)

패키지 설치를 하게 되면, 오른쪽 화면과 같이 해당 패키지의 버전 등 조금 더 상세한 내용이 package-lock.json에 들어가게 된다.

 

 

 

동물 소리 API 서버 만들어보기

조코딩님의 유튜브 참고

원래는 param를 p에 담았다면 p.id 혹은 p.name을 찍어주어야 그 값이 나왔는데, 중괄호 안에 key값을 입력하여 사용하면 간단해진다. (구조분해할당)

const { name } = req.params

 

그래서 새로 작성한 index.js를 실행해 보면...

app.get("/sound/:name", (req, res) => {
  const { name } = req.params;

  if (name == "dog") {
    res.json({ sound: "멍멍" });
  } else if (name == "cat") {
    res.json({ sound: "야옹" });
  } else if (name == "pig") {
    res.json({ sound: "꿀꿀" });
  } else {
    res.json({ sound: "알 수 없음" });
  }
});

이런 식으로 params에 따라 다른 값들을 얻을 수 있다.

 

 

 

CORS Error

CORS는 Cross Origin Resource Sharing의 약자이다. (Origin : Protocol + Host + Port)

로컬에 프론트엔드 서버를 3000번으로 띄웠다면 http://localhost:3000 이 Origin에 해당한다.

Same Origin이란 같은 Origin을 뜻하고, Cross Origin이란 서로 다른 Origin을 뜻하는데 CROS는 서로 다른 Origin 간의 리소스 교환을 뜻한다.
같은 Origin상에서는 요청이 오는 곳과 처리하는 곳이 동일하기 때문에 특별히 보안상 처리해 줄 이유가 없는데, 다른 Origin에서 오는 요청이라면 요청으로 받아온 결과를 믿을만한지 그렇지 않은지 검증하는 과정이 필요하다. 그리고 브라우저에서는 결과의 헤더 값을 통해 CORS를 확인한다.
CORS 에러는 브라우저에서 발생하는 에러로 postman 등으로 서버에 요청을 하면 문제없이 응답이 날아오는데, 프론트엔드 작업을 할 때 브라우저에서 개입을 하기 때문에 발생한다고 한다.

 

해결방법...?

이라기에는 조금 애매한가 싶지만 cors라는 모듈이 있다고 한다.

$ npm i cors

const express = require("express");
const cors = require("cors");
const app = express();
const port = 3000;

app.use(cors());

cors모듈을 설치하고 require로 불러와서 use를 해주면 된다.

cors(어떤 포트들을 허용할 건지 등 조건을 설정해 줄 수 있다)라고 한다..!