Node.js 백엔드(ft. API 구축)

Backend/Node.js

Node.js 백엔드(ft. API 구축)

코딩하는 친구 2023. 5. 7. 22:29

vscode에서 index.js 파일 생성
새 터미널을 열고

npm init : npm을 시작하겠다.

package.json 폴더 생성 : npm을 이용해서 여러 모듈을 다운받고 현재 프로젝트의 이름, 버전, main이 뭔지 등 정보를 정리해주는 메모장 같은 역할

npm install express 모듈 설치
npm uninstall express 모듈 삭제

express모듈 : node.js 기반의 웹 프레임워크
구글 - npm - 검색창에 express - 위에 있는 페이지 선택 - 코드 vscode에 복붙

const express = require('express')
const app = express()
const port = 3000


//HTTP 메소드, 라우팅, 콜백 함수
app.get('/', (req, res) => {
  res.send('Hello World')
})

//3000번 포트에 대해서 listen하고 있다.
app.listen(port, () => {
//서버에 접속 성공하면 teminal 창에 해당 문구를 출력한다.
    console.log('example app listening on port $(port)')
})

저장하고 teminal 창에 node index.js 입력
서버가 실행되고 주소창에 localhost:3000입력하면 Hello World가 뜬다.
💡내 컴퓨터의 IP는 localhost라고도 한다.
즉 localhost:3000은 localhost라는 특수한 주소를 통해 접속 가능한 포트번호 3000번을 의미한다.

//HTTP 메소드, 라우팅, 콜백 함수
app.get('/', (req, res) => {
//res(응답)에 'Hello World'를 보내겠다
  res.send('Hello World')
})

코드 분석

HTTP 메소드 : 요청의 목적, 종류를 알리는 수단

요청 방식

Get - 주소창에서 데이터를 전달
Post - 주소창이 아닌 내부적으로 body에 데이터 전달

app.get() : get방식으로 들어온 요청은 여기서 받음

라우팅 : 보통 웹 어플리케이션은 여러 페이지로 구성되어 있으며, 각 페이지는 고유한 URL을 가지고 있다.

이때 URL 라우팅은 요청된 URL에 해당하는 페이지를 찾아서 그 페이지를 렌더링하는 역할을 한다.

ex) ‘/’, ‘/hello’, ‘/hello/world’

콜백 함수: (req, res) =>{} 함수 끝나고 실행 할 함수

즉 위의 코드는 Express.js 프레임워크에서 HTTP GET 요청이 '/' 경로로 들어왔을 때,

콜백 함수가 실행되어 'Hello World'라는 문자열을 응답으로 보내는 코드이다.

app.get('/dog', (req, res) => {
    res.send("<h1>강아지</h1>")
})

💡 다음과 같이 HTML 코드를 사용하여 보낼 수도 있다.

JSON (JavaScript Object Notation)

app.get('/cat', (req, res) => {
    res.json({'sound' : '야옹'})
})

Json 형태의 객체를 클라이언트에게 반환한다. 반환되는 객체는 ‘{’sound’ : ‘야옹’}’이다.

GET : params, query (URL 파라미터 값을 추출할 때 사용하는 객체)
get방식으로 어떠한 정보를 전달할 때 두가지 방법이 있다.
params:
URL 파라미터는 동적인 URL을 생성할 때 사용되며, URL내에 ‘:’ 문자를 사용하여 지정할 수 있다.

app.get('/users/:id', (req, res) => {
  const q = req.params
  // URL 파라미터 값을 이용한 처리
    console.log(q.id)
    res.json({'userid' : q.id})
})

예를 들어, /users/:id와 같은 URL은 /users/1 와 같이 id 값이 변화하는 동적인 URL을 생성할 수 있다.

이때, req.params를 사용하면 URL 파라미터 값을 추출할 수 있다. (’:id’ 부분에 파라미터 값을 넣어주면 json형태로 ‘{'userid' : q.id에 저장된 }’를 보낸다.)

query:

app.get('/user/:id', (req, res) => {
    const q = req.query
    console.log(q)
    console.log(q.q)
    //res.json({'userid' : q.id})
    res.json({'userid' : q.name})
})

HTTP GET 요청에서 Query String은 URL 끝에 ?를 붙이고, 그 뒤에 key=value 형태의 데이터를 &로 구분하여 나열하는 방식으로 데이터를 전달하는 방식이다.

예를 들어, ‘localhost:3000/user/abcd?name=john&age=20’ 와 같은 URL에서 ? 다음의 name=john&age=20부분이 Query String이다.

POST : params, body

post 요청은 get 요청과 달리, 데이터를 HTTP Request Body에 담아 전송한다.

Axios, Fetch를 이용할 때 POST방식으로 요청할 수 있다.

(params는 get 방식과 동일하다.)

따라서 POST요청에서는 전달하는 데이터의 양이 많거나, 데이터가 보안적으로 민감한 경우에 사용된다.

app.use(express.json());
app.post('/user/:id', (req, res) => {
    const p = req.params;
    console.log(p);
    const b = req.body;
    console.log(b);
    res.send({'message' : 'Hello World'});
})

CORS

:HTML의 요청을 응답이 잘 되도록 해준다.

const cors = require('cors');
app.use(cors({
	origin: '*'
}));

HTML 파일로 서버에 요청을 했을 때 CORS가 없으면 보안상 차단되는 경우도 있다.
terminal 창에서

npm install cors 모듈을 설치한다.

var cors = require('cors')
app.use(cors())//비워두면 모든 요청에 대해서 허용(조건을 설정할 수 있음))

간단한 동물소리 API 서버 만들기

const express = require('express')
const app = express()
const port = 3000
var cors = require('cors')

app.use(cors())

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' : '알수없음'})
    }
})

app.listen(port, () => {
    console.log('example app listening on port $(port)')
})

:name 따라서 dog, cat, pig의 울음 소리를 보내주는 API 서버

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animal Sound API 서버 구축</title>
</head>
<body>
    <h1 id="sound"></h1>
    <input id="name" type="text">
    <button onclick="getSound()">API 요청</button>
    <script>
        function getSound(){
            const name = document.getElementById('name').value//input에 입력한 값을 받아서 name에 저장
            //fetch로 API요청을 보냄
            fetch(`http://localhost:3000/sound/${name}`)//문자열을 '`' 로 감싼 후 ${변수}를 넣으면 문자열에 변수를 넣을 수 있다.
            .then((response) => response.json())
            .then((data) =>{
                console.log(data.sound)
                document.getElementById('sound').innerHTML = data.sound//결과를 받아서 h1태그에 넣어주겠다.
            });
        }
    </script>
</body>
</html>

HTML에서 script 태그를 사용하면, JavaScript 코드를 HTML 문서에 삽입할 수 있다.

https://youtu.be/Tt_tKhhhJqY

해당 블로그는 유튜버 조코딩님의 영상을 참고하여 작성하였습니다.

출처: 조코딩 JoCoding 유튜브 채널(한시간만에 Node.js 백엔드 기초 끝내기 (ft. API 구축))