🦊codecamp 4~6일차 정리본

JBoB·2023년 2월 25일

복습 정리본

🦊Rest-API 만들기

만들기 전 라우팅 개념을 익혀보자

라우팅

: URL 및 특정한 HTTP 요청 메소드(GET,POST 등)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것

Rest-API에서 데이터를 가져오는 요청은 GET 메서드를 사용한다.

엔드포인트로 get 요청이 들어왔을때, 데이터가 조회 될수 있도록 우리는 로직을 추가해 줘야한다.

보통 데이터는 하나의 값이 아닌 , 여러 값으로 구성되어 있으므로 배열 안에 객체가 들어있는 형태가 대부분이다.

// get방식의 API를 만들겠다
app.get('/boards', function (req, res) {
  // 1.DB에 접속후, 데이터를 조회 => 데이터베이스 조회했다고 가정.
  const result = [
    { number: 1, writer: "cho", title: "제목입니다", contents: "내용이에요!" },
    { number: 2, writer: "jo", title: "바보입니다", contents: "바보에요!" },
    { number: 3, writer: "hyun", title: "주현입니다", contents: "주현이에요!" }
  ]

  // 2.DB에서 꺼내온 결과를 브라우저에 응답(response) 주기 
  
  res.send(result)
})

app.listen(3000, () => {
  console.log("백엔드 API 서버가 켜졌어요!!!")
})

👻 req, res란?

get 함수의 두번째 매개변수 화살표 함수를 받고 있는데 req, res 라는 두 변수를 받고 있다.

req는 요청 이고 res는 응답이다.

이번에는 POST 메서드를 이용하여 데이터를 저장하는 로직을 짜보겠따.

// index.js

// ... 기존 코드

app.post('/boards', (req, res) => {
  // 1. 브라우저에서 보내준 데이터 확인하기
===>req.body로 데이터 저장하는것 확인해주기
	console.log(req)
  console.log("=========================")
  console.log(req.body) // 추가	
	// 2. DB에 접속 후, 데이터를 저장 => 데이터 저장했다고 가정

  // 3. DB에 저장된 결과를 브라우저에 응답(response) 주기
  res.send("게시물 등록에 성공하였습니다.")
});

app.listen(3000, () => {
  console.log("백엔드 API 서버가 켜졌어요!!!")
})

여기서 우리가 클라이언트 에서 보낸 HTTP 요청 정보가 req에 작성되어있다고 배웠다.

그러면 post에서 데이터를 저장하는것을 확인하려면 req.body 를 이용해서 볼 수 있다.

따라서 req 와 req.body를 확인 할수 있는 코드를 추가해주자.

하지만 postmen으로 요청으로 보내주게 되면 성공적으로 응답하지만

req.body에는 undefined 가 출력되었다. 그 이유는??

express 프레임워크는 기본적으로는 json형태를 지원하고 있지 않습니다.

따라서 서버에서 json을 읽어오기 위해 app.use(express.json()) 코드를 추가해 주어야 합니다.

// index.js

// const express = require('express')
import express from 'express';

const app = express();

app.use(express.json()); // 추가된 코드
app.get('/boards', (req, res) => {

// ... 생략

🐤createTokenOfPhone → Rest-API로 만들기

app.post("/tokens/phone", function(req, res){
  
  // post body 만들기 (내가한거)
  // req.body.qqq
  // console.log(req.body);
   //1.구조분해 할당
  // const {myphone} = req.body;
   //2.다른 방법
  // const myphone = req.body[myphone]; 

  // post body 만들기 
  const myphone = req.body.qqq

  
  // 1. 휴대폰 번호 자릿수 맞는지 확인하기 (10~11자리)
  const isValid = checkPhone(myphone)
  if(isValid ===  false){
      return
  }

 // 2. 휴대폰 인증번호 6자리 생성
  const mytoken = getToken()

 // 3. 번호에 인증번호(토큰) 전송하기
  sendTokenToSMS(myphone, mytoken)

  res.send("인증완료")
})

🐧Node.js 5일차

🐤Axios

Axios는 브라우저,Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.
백엔드랑 프론트엔드랑 통신을 쉽게 하기 위해서 Ajax와 더불어 사용한다.

특징

ES6 사용
HTTP 요청과 응답을 JSON 형태로 자동 변경
요청과 응답 데이터의 변형

Axios 설치

yarn install axios

================
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
// HTML 추가

Axios 문법

.then : 비동기 통신이 성공했을 경우, 콜백을 인자로 받아 결과값을 처리

.catch : 오류 초리

<head>
    <title>회원가입 연습하기</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      function check() {
        // 1. 입력한 휴대폰번호 가져오기
        const myphone = document.getElementById('qqq').value;
        console.log('나의 핸드폰번호: ', myphone);

        // 2. 해당 휴대폰번호로 인증번호API 요청하기
        axios
          .post('http://localhost:3000/tokens/phone', {
            qqq: myphone,
          })
          .then((res) => {
            console.log(res);
						document.getElementById("zzz").innerText = res.data
          });
      }
    </script>
  </head>

[axios.post](http://axios.post) 를 사용하여 API요청을 보낸다.

axios.then 을 사용하여 요청을 보낸 후, 실행되는 코드를 작성해 주면 되는데 요청을 대한 응답을 받아준다.

하지만 요청을 보내면 응답이 온것인지 확인할수가 없다.

자세히 보면 cors라는 단어가 눈에 띄는데 cors란 뭘까?

🐙CORS란?

CORS란, Cross-Origin-Resource-Sharing의 약자이다.

즉, 서로 다른 출처(origin)를 가진 주소로 요청이 들어왔을때 발생할수 있는 에러다.

출처는 port번호까지 포함한 url이다.

지금 위에 적은 이러한 url(http://localhost:3000/tokens/phone)에서 http://localhost:3000을 origin이라 부릅니다.

cors 문제 해결하기

직접 응답헤더에 출처를 적어주는 방식도 가능하지만 조금 더 편한 cors미들웨어 라이브러리를 설치해주자.

cors 설치하기

yarn add cors

=============
import cors from 'cors'
app.use(cors())
app.use(express.json())

import한 cors를 적용시켜주기 위하여 app.use 를 사용해준다.
- app.use(cors()) 을 입력하면 모든 출처에서 들어오는 요청을 허용하게 된다.
- 추후 특정 보안과 관련해 특정 출처만을 허용해야 한다면, app.use(cors({origin:})

과 같이 작성하여 특정 origin만을 허용하도록 설정할 수 있다.

🐙apollo-server 설치

우린 지금까지 Rest-API에 대해 사용하기 위해 express

를 사용해 서버를 띄워왔다. express와 비슷한 apollo-server를 사용하고자 한다.

apollo-server 설치하기

 yarn add apollo-server graphql

apollo-server 문법 구성과 express차이

// index.js

// const { ApolloServer, gql } = require('apollo-server');
import { ApolloServer, gql } from "apollo-server";

const typeDefs = gql` // TypeDefs => swagger를 통해 직접 작성하였지만 Graphqldms typeDefs를 통해 자동생성해준다..
  type Query {
    qqq: String
  }
`;

const resolvers = {
  Query: {
    qqq: () => {
      return "Hello World!";
    },
  },
};
====> resolver 는 express 의 get API 와 비슷하다.
// express
app.get('/', function (req, res) {
  res.send('Hello Wordld')
})

const app = new ApolloServer({
  typeDefs: typeDefs,
  resolvers: resolvers,
	cors: true,  // 모든 사이트 허용하고 싶을 때
 // cors: { origin: ["https://naver.com", "https://daum.net"] } // 특정 사이트만 지정하고 싶을 때

});

app.listen(3000).then(() => {
  console.log("백엔드 API 서버가 켜졌어요!!!");
});
================================================

// express
app.listen(3000)

// apollo-server
app.listen(port).then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

🐧6일차 Node.js

🐤Callback

callback 이란?

다른 함수의 인자로 사용 되는 함수
이벤트에 의해 호출되어지는 함수

function add (x, y, callback){
	let result = x * y
	callback(result)
}

function result (data) {
	console.log(data, "콜백함수 실행")
}

add(5, 10, result)

add 함수에는 인자로 x,y,callback이 들어가고 callback 에는 함수 가 들어간다.

add함수를 실행시키면 add안에 인자로 들어가 result가 실행된다.

즉, add함수 인자로 사용된 result 함수를 callback 함수라고 부른다.

🐙이벤트에 의해 호출되어지는 함수

<button onClick={handleClickFunction}></button>

button 안에 onClick 함수가 실행되고 onClick 에선 handleClickFunction 을 실행한다.

즉, onClick이라는 이벤트 함수 안에 handleClickFunction가 들어가 실행하기 때문에

handleClickFunction가 callback 함수라고 부를 수 있다.

callback 방식!!

동기적 함수: 현재 실행중인 코드가 완료한 후 다음 코드를 실행
비동기적 함수: 현재 실행중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가서 실행

callback 지옥과 promise 는 노션 보충 자료 참고!!!

async/await

axios는 기본적으로 async/await 를 지원하는 라이브러리이다.

async function getData(url){
  let data = (await axios.get(url)).data;
	return data;
  }

let url = 'https://koreanjson.com/posts/1';

async function dataArr(){
    let data = await getData(url);
    let result = [];
    for(let v of Object.values(data)){
        result.push(v);
    }
    console.log(result);
}

dataArr();

async

: async 키워드는 function 앞에 사용하고 async가 붙은 함수는 반드시 Promise를 반환하고,

프라미스가 아닌 것은 프라미스로 감싸 반환한다.

await

: async 함수 안에서만 동작한다. Promise가 처리될때까지 기다리는 역할을 한다.

동기 비동식 방식으로 함수 실행

import axios from 'axios';

// 1. 비동기방식
function fetchAsync() {
  const result = axios.get("https://koreanjson.com/posts/1");
  console.log("비동기방식: ", result); // Promise { <pending> }
}

fetchAsync();

// 2. 동기방식
// async function fetchSync() {
//   //  =>   함수 중복 선언 문제를 피하자!!! (화살표 함수로 변경)
//   const result = await axios.get("https://koreanjson.com/posts/1");
//   console.log("동기방식: ", result.data); // 제대로된 결과 => { title: "....." }
// }
const fetchSync = async () => {
  const result = await axios.get("https://koreanjson.com/posts/1");
  console.log("동기방식: ", result); // 제대로된 결과 => { title: "....." }
  console.log("동기방식: ", result.data.title);
};

fetchSync();