JS의 핵심! Node.js : API

YouTube Link
	한시간만에 Node.js 백엔드 기초 끝내기 (ft. API 구축)
	https://youtu.be/Tt_tKhhhJqY
	API란? 개념 및 유용한 API들 소개, 날씨 API 자바스크립트 실전 활용 방법
	https://youtu.be/pLBJgvC_ZUA

---

API의 오해

npm은 하나의 패키지를 제공해주는 사이트이다. 물론 npm 패키지들 중 어떤 패키지는 API를 제공해준다.  Document(/Documentation/Doc)는 프로그램의 사용법,기능,동작 등을 설명하는 설명서(문서)다. 그리고 API는 프로그램 간의 상호작용을 위한 규칙, 규약, 함수, 프로토콜 등의 집합이다. 초창기에 나는 API와 Doc가 같은 개념으로 퉁쳐 생각했다. 뿐만 아니라 그렇게만 알아두란 식인 잘 못된 정보를 접한 적도 있다. 하지만 내가 궁극적으로 API와 Doc를 햇갈려했던 이유는 JAVA의 API, Doc와 Unity의 API, Doc들을 보면서 오해들이 시작 되었다. 이 오해의 진실은 다음과 같다. 보통 해당 언어,프로그램 사이트에서(또는 Doc만 존재하는 사이트) API를 Doc를 함께 묶어서 제공해주는 것이 보통인데 이것 때문이다. 그래서 API를 기능의 집합체라기보단 설명서로써 생각하고 그렇게 보아왔던 것이다. 개념 없이 코드만 들여다 보니 발생한 오해들이다. 물론 API를 단순 Doc,문서화해서 제공 할 수 있다.

 

JDK 20 Documentation - Home

- JAVA의 API's Documentation

Unity 스크립팅 API

- Unity Documentation > Scripting API

(지금 다시 보니 유니티 Doc가 굉장히 잘 되어 있다.)

MDN Web Docs

- JS MDN

---

한시간만에 Node.js 백엔드 기초 끝내기 (ft. API 구축)

 

express

express

 

---

post : get과 post의 차이

post는 데이터를 서버에 제출하는 데 사용되며, 요청 본문에 데이터를 추가하여 전송한다. 따라서 post요청은 캐시되지 않으며, 브라우저 기록에서 볼 수 없다. 또한 post요청은 get요청과 달리 데이터 크기에 제한이 없다.

get은 주로 데이터를 검색하고, post는 데이터를 생성하거나 업데이트하는 데 사용된다. 예를 들어, 검색 결과를 가져오는 경우에는 get요청을 사용하고, 새로운 게시물을 게시하는 경우에는 post요청을 사용할 수 있다.
이번 강의에선 get을 중심으로 다루었기에 post의 설며이 많이 미약하다. 이는 Nodejs의 심화편 포스팅에서 확인 할 수 있다.

---

get : response&require (Route/Routing)

app.get('/', (req, res) => {

  res.send(`Hello!:Port:${port}!!`);

})

app.listen(port, () => {

  console.log(`Contact Port ${port}`);

})

get의 기본적 형태이다. res는 response를 뜻한다. '응답'이란 의미를 가지고 있듯이 우리가 '/'(localhost:3000/)라는 라우팅을 통해 res.send(~)의 값을 서버가 해당 주소 웹 브라우저에 응답을 해준다고 보면 된다. node를 통해 출력해보면 다음과 같다.

현재 해당 포트 서버에 접속 되었음을 서버가 listen 해주고 있다.

해당 포트에 서버가 response(응답)을 해준 'Hello!:Port:3000!!이다. 이제 require(요청)을 해보자

이제 require(요청)을 해보자 우리가 서버에게 요청을 하는 것이다. 요청코드는 아래와 같다.

app.get('/sound/:name', (req, res) => {

  const { name } = req.params;

  // const p = req.params;

  // p.name

  if (name == "dog") {

    res.json({ 'sound': '멍멍' })

  } else if (name == "cat") {

    res.json({ 'sound': '야옹' })

  } else if (name == "pig") {

    res.json({ 'sound': '꿀꿀' })

  } else {

    res.json({ 'sound': 'unknown' })

  }

})

우리는 현재 localhost:3000/sound/name 이라는 주소(경로)를 라우팅 했다. 그리고 const{name}=req.params;를 보면 params라는 것을 서버에게 require(요청)하고 있다. {name}은 비구조화 할당 문법이다. 이는 좀 있다 다시 확인해보겠다. 이제 해당 주소로 가서 웹 브라우저를 확인해 보자

해당 주소에 잘 접속이 되었고 주소(경로)를 통해 require(요청)한 'dog'의 해당되는 값을 JSON형태로 response(응답)해주었다.

---

위에 코드를 res.send를 활용해서 좀 더 쉽게 작성 해본다면 아래와 같다.

app.get('/sound/:name', (req, res) => {

  const { name } = req.params;

 

  if (name === "dog") {

    res.send("멍멍")

  } else if (name === "cat") {

    res.send("야옹")

  } else if (name === "pig") {

    res.send("꿀꿀")

  } else {

    res.send("retry")

  }

})

참고로 const { name } = req.params;의 형태는 아래와 같이 바꿀 수 있다.

const p = req.params;

 const name = p;

 console.log(name);

---

참고 : 비구조화 할당과 .json()

비구조화 할당(Destructuring Assignment)은 객체나 배열에서 필요한 값만 추출하여 변수에 할당하는 방법이다. 예를 들어, 객체에서 특정 속성의 값만 추출하여 변수에 할당하거나, 배열에서 특정 요소를 추출하여 변수에 할당할 수 있다. 아래 예시코드를 보자
객체의 경우 아래와 같다.

const person = { name: 'John', age: 30 };

const { name, age } = person;

console.log(name); // 출력: 'John'

console.log(age); // 출력: 30

배열의 경우 아래와 같다.

const numbers = [1, 2, 3, 4, 5];

const [first, second, ...rest] = numbers;

console.log(first); // 출력: 1

console.log(second); // 출력: 2

console.log(rest); // 출력: [3, 4, 5

 
.json()은 Express.js에서 제공하는 메소드 중 하나로, HTTP 응답으로 JSON 형식의 데이터를 보내는 데 사용된다. 이 메소드는 응답의 Content-Type 헤더를 자동으로 설정하므로 JSON 형식의 데이터를 보내는 것이 간단하고 빠르다. 예를 들어, res.json({ 'sound': '멍멍' })은 JSON 형식의 { 'sound': '멍멍' } 객체를 응답으로 보낸다. 이때 Content-Type 헤더는 자동으로 application/json으로 설정된다. 쉽게 말해 .json()은 데이터 형식으로 변환해주는 것이다.
깊은 내용은 JOSN 포스팅을 통해 다시 알아보자

---

params와 query

params의 코드는 다음 아래와 같다.

app.get('/user/:id', (req, res) => {

  const q = req.params;//params는 콜론뒤에 ':id'와 같이 들어간 값

  console.log(q);

  res.send(`Sending id is ${q.id}`);//?왜 안되는거지?

  //q자체로는 req.params가 가지고 있는 광범위한 값들을 지칭하고 있기때문

  // res.json({'userid' : q.id});

})

params는 콜른뒤에 id와 같이 들어간 값을 의미한다. 주소(경로)는 http://localhost:4000/user/mytest이며 q자체로만 출력해보면 아래와 같이 출력된다.

보았 듯 params는 하나의 객체의 구조, 속성으로 존재한다. 하지만 res.send의 q.id라고 params의 id를 직접 지정하면 아래와 같다.

웹 브라우저를 통해 확인한 모습이다.

이제 query를 살펴보자 코드는 아래와 같다.

app.get('/user/', (req, res) => {

  const q = req.query;//?가 들어가야 하는 값

  console.log(q);

  console.log(q.q)

  console.log(q.name)

  console.log(q.id)

  res.send(`Sending id is ${q.id}`);

})

주소(경로)를 http://localhost:4000/user/?q=mytest&name=test&type=my&id=mytt로 접속해보면 출력되는 값은 아래와 같다.

주소(경로)를 보면 ?뒤에서 부터 지정된 값들이 res.query로 객체로 구조화 되어 있고 parmas와 마찬가지로 이를 특정 명칭으로 지정해서 출력해 볼 수 있다. 이를 객체(Object)의 속성(Property)이라한다.

---

아주 잠깐 속성의 기본적 형태를 보자면 아래와 같다.

const person = {

  name: 'John',

  age: 30,

  greet: function() {

    console.log('Hello, my name is ' + this.name);

  }

};

//person.name; person.age; ...

---

CORS

CORS(Cross-Origin Resource Sharing)란, 웹 페이지에서 로드되는 리소스가 다른 출처(도메인, 포트, 프로토콜)의 리소스와 상호작용하는 것을 제한하는 보안 기능이다.

cors

---

Ndoejs + HTML

const express = require('express');

const cors = require('cors');

const app = express();

const port = 3000;

app.use(cors());

app.get('/', (req, res) => {

  res.send(`Hello!:Port:${port}!!`);

})

app.get('/sound/:name', (req, res) => {

  const { name } = req.params;

  // const p = req.params;

  // p.name

  if (name == "dog") {

    res.json({ 'sound': '멍멍' })

  } else if (name == "cat") {

    res.json({ 'sound': '야옹' })

  } else if (name == "pig") {

    res.json({ 'sound': '꿀꿀' })

  } else {

    res.json({ 'sound': 'unknown' })

  }

})

app.listen(port, () => {

  console.log(`Contact Port ${port}`);

})

<!DOCTYPE html>

<html lang="en">

<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>test_CORS</title>

</head>

<body>

  <h1 id="sound"></h1>

  <input id="name" type="text">

  <button onclick="getSound()">API name</button>

  <script>

    function getSound() {

      const name = document.getElementById('name').value;

      fetch(`http://localhost:3000/sound/${name}`)

        .then((response) => response.json())

        .then((data) => {

          console.log(data.sound)

          document.getElementById('sound').innerHTML = data.sound;

        });

    }

  </script>

</body>

</html>

Html 코드를 보면 fetch함수를 사용하고 있다. 이는 차후에 fetch관련 포스팅에서 다룰 예정이다.