본 캠프 5일차 TIL

정희준·2023년 3월 19일
0
post-thumbnail

📌 오늘의 내용

Axios

프론트엔드에서 백엔드 api를 요청할때 어떻게 해야할까?
fetch로도 가능하지만 간편한 Axios라는 라이브러리를 이용해보자

백엔드 처럼 설치해서 사용하는게 아닌
HTML 파일에 script 태그를 사용하여 다운을 받아 사용하여야한다
이러한 방식을 CDN(Contents Delevery Network)이라고 부릅니다.

Axios 공식 문서에서 코드를 가져와 예제 코드를 만들어보자!

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

            // 2. 해당 휴대폰번호를 myPhone에 담아서 인증번호API 요청하기(fetch, axios 등 사용)
            // axios.post("http://백엔드IP주소:포트번호/endPoint",{넘길 데이터}.then((res)=>{응답데이터}))
            axios.post("http://localhost:3000/tokens/phone",{
                phone : myPhone
            }).then((res) => {
                console.log(res.data)
                document.getElementById("result").innerText = res.data
            });
        }
    </script>
</head>
<body>
    휴대폰번호 : <input id="pNum" type="text"> <button onclick="test()">인증하기</button>
    <div id="result">인증상태</div>
    <button>회원가입하기</button>
</body>
</html>

CORS

위 api 요청을 실행시 아래의 에러가 발생한다

왜 에러가 발생하는 것 일까? 바로 CORS 정책 때문이다
CORS란, Cross-Origin-Resource-Sharing의 약자입니다.

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

여기서 말하는 출처(origin)이란, port번호까지 포함한 url을 의미합니다.

예를 들어 이러한 url(http://localhost:3000/tokens/phone)에서 http://localhost:3000origin이라 부릅니다.

port번호가 다른 경우에도 CORS 에러는 발생하는데 이는 같은 localhost임에도 다른 출처로 인식되기 때문입니다.

cors관련 특징에 대해 더 알아보자면
cors가 막혀잇는경우 백엔드 서버에서 백엔드 서버로는 가능하기때문에 자신의 서버에서 요청 후
그것을 자신의 브라우저에 돌려주는 서버proxy server(대리해주는서버) 를 통해 우회 할수 있다
또한 모바일앱도 브라우저가 아니기때문에 cors 정책에 상관없이 가능하다

브라우저가 cors 정책으로 막히는 이유는 브라우저를 보호하기 위해서다
브라우저에는 로그인시 쿠키에 로그인증표 같은 중요정보가 담겨져있어서
해커가 만든 사이트에서(endpoint가 같은) 요청시 쿠기값이 딸려가기때문에
로그인증표가 있을시에 삭제가 가능한 기능이 작동이 되기 때문에 막아놓고
백엔드 서버 끼리는 쿠기값이 없기때문에 우회해서 받아와도 로그인증표가 없기때문에
삭제기능이 작동하지 않아 서버끼리는 cors를 사용하지 않는것이다

이러한 문제를 해결하기 위해 cors 라이브러리를 사용해 해결해보자

$ yarn add cors	-> cors 설치
import express from 'express'
import cors from 'cors'

const app = express()

// app.use(cors({  origin : "http://127.0.0.1:5500/" })) // -> 이주소만 허용
app.use(cors()) // -> 모두 허용

위 코드는 cors 사용 예제이다!


apollo-server

우린 지금까지 Rest-API에 대해 사용하기 위해 express를 사용해 서버를 띄워왔습니다.

지금부터는 GraphQL-API를 사용해보기 위해서 express와 비슷한 역할을 해주는 apollo-server를 설치하고 그에 대해 알아보도록 하자!

$ yarn add @apollo/server graphql -> @apollo/server, graphql 설치

띄어쓰기로 모듈 이름 구분 시 동시 설치 가능!

사용 예제를 알아보자

import { ApolloServer } from "@apollo/server";
import { startStandaloneServer } from "@apollo/server/standalone";


// 이곳이 api명세서
const typeDefs = `#graphql
  type Query {
    test: String
  }
`;

// 이곳이 api
const resolvers = {
  Query: {
    test: () => "abcdefg",
  },
};

/*  rest-api 버전
app.get('/test', function (req, res) {
  res.send('abcdefg')
})
*/

// api와 명세서를 만들고 결합 후 서버실행
const server = new ApolloServer({
  typeDefs,
  resolvers,
});


startStandaloneServer(server);	// 기본 포트 4000
/* app.listen(3000).then(({ url }) => {
  console.log(`🚀 Server ready at ${url} on port ${3000}`);
});*/

위 코드 처럼 사용가능하며 rest-api와 달리 api docs 기능이 함께 포함된 것을 볼 수 있고
api 작성도 따로 나눌 필요 없이 , 로 구분하여 이어서 작성 가능하다! 조회는 Query 안에 수정 삭제 등록은 Mutation 안에 작성 하면 된다!

profile
같이 일하고 싶은 사람이 되어보자! 다시 시작하는 개발 블로그.

0개의 댓글