2023.03.17 TIL

정승원·2023년 3월 19일

📒 목차

📌 프론트엔드(HTML 버튼)에 axios 연동하기

📌 Axios 연동하기

📌 CORS 문제

📌 apollo-server 설치

📌 GraphQl-API 만들기 실습

📌 프론트엔드(HTML 버튼)에 axios 연동하기

프론트엔드(HTML 버튼)에 axios 연동하기
오늘 Apollo서버를 사용하여 Graphql-api를 제공하는 서버를 만들어보자!!
apollo 서버는 graphql-api를 제공하는 서버를 개발할 수 있게 도와주는 패키지이다.
기존에 사용하던 express와 역할이 비슷하다.

실습을 해보기 위해 우선 간단한 html문서를 만들어보자
휴대폰 번호를 입력한 뒤, 인증하기 버튼을 누르게 되면, 인증상태 문구가 인증완료로 바뀌는 로직이다.

📌 Axios 연동하기

이제 본격적으로 html 문서와 작성한 api간 소통을 할 수 있도록 해보자!!
지금까지는 postman을 통해 api를 테스트해왔다.
이번에는 휴대폰 번호를 백엔드 서버로 요청하기 위해 axios를 사용해 보도록 하겠다.

우선 HTML 파일에서 axios를 사용하려면 <script>태그를 사용하여 다운로드를 받아야 한다.
이렇게 다운로드 받는 방식을 CDN(contens delevery network)라 부른다.

axios.cdn을 검색해보면 공식문서에 아래와 같은 cdn 코드가 있으며, 이것을 앞서 말한 <script>태그 안에 넣어준다.

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

이제 axios를 사용할 준비가 모두 끝났다.
axios를 이용하여 api로 요청을 보내보자

axios.post : api 요청 보내기
axios.then : 요청을 보낸 후, 실행되는 코드 작성하기 (요청에 대한 응답)

// signup.html

<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>

이제 backend에서 서버를 실행시키고, 요청을 보내보자
그런데, 제대로된 응답이 나타나지 않는다...

개발자 도구의 콘솔창을 확인해보면 이유를 알 수 있다.
여러 에러들이 나타나고 있지만 이 중, CORS에 대해 알아보기로 하자!!

📌 CORS 문제

postman에서 성공했던 요청과 같은 요청을 직접 만든 버튼을 활용하여 브라우저에서 진행했는데 왜 에러가 발생한걸까?
이유는 CORS 때문이다.
CORS는 (cross origin resources sharing)의 약자로 서로다른 출처(origin)를 가진 주소로 요청이 들어왔을 때, 발생하는 에러이다.
여기서 출처란 portq번호까지 포함한 url을 의미한다.
예를 들어 http://localhost:3000/tokens/phone)에서 http://localhost:3000부분을 origin이라 한다.
port 번호가 다른 경우에도 CORS가 발생하는데, 이유는 같은 localhost이더라도 다른 출처로 인식되기 때문이다.

따라서, CORS문제를 해결하기 위해서는 백엔드 서버의 응답 헤더의 accss-control-allow-origin항목에 허용하고자하는 origin을 담아 CORS 에러를 방지할 수 있다.

✅ CORS 문제 해결하기

앞서 말한것처럼 직접 응답 헤더에 origin을 적는 방법도 가능하지만, CORS 미들웨어 라이브러리를 설치하게 되면 간편하게 문제를 해결할 수 있다.

							`yarn add cors`

이후에, CORS를 import 하고 적용 시켜주면 문제가 해결된다.
또한, app.use(cors())와 같이 입력하면 origin에서 들어오는 모든 요청을 허용하는 것이며,
원하는 origin만 허용하고 싶다면 app.use(cors{origin: })과 같이 작성하여 특정 오리진만 허용할 수 있다.

// index.js

// ...생략

import cors from 'cors';

const app = express();
app.use(express.json());
app.use(cors()); // 추가된 부분

// ...생략

이제 다시 백엔드 서버를 명령어로 실해시켜보면, 아래와 같이 CORS에러가 나타나지 않는 것을 확인할 수 있다.

📌 apollo-server 설치

지금까지는 Rest-api를 사용하기 위해 express를 사용하여 서버를 열었지만, 지금부터는 graphql-api를 사용해보기 위해 express와 유사한 역할을 하는 apollo-server를 설치하는 실습을 해보자!!

								$ yarn add @apollo/server graphql

위의 명령어를 터미널에서 설치하게 되면 npm 사이트의 초기 소스코드를 내가 생성한 파일에 붙여넣기 한다.
추가적으로, 띄어쓰기로 모듈의 이름을 구분해주면 다수의 모듈을 한번에 설치할 수 있다!!!

코드를 살펴보게 되면, 우선 이전에 학습했던 express에서 특정 포트를 통해 서버를 열 수 있도록 도와주었던, listen이 있는 것을 확인할 수 있다.
또한

// index.js
import { ApolloServer, gql } from "apollo-server";

const typeDefs = gql`
  type Query {
    qqq: String
  }
`;

const resolvers = {
  Query: {
    qqq: () => {
      return "Hello World!";
    },
  },
};

const app = new ApolloServer({
  typeDefs: typeDefs,
  resolvers: resolvers,
});

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

import를 하기 위해서는 package.json에 "type": "module"을 추가해야 한다!!!

{
  "name": "03-06-grqphql-api-with-apollo-server",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "type": "module",  // 추가
  "dependencies": {
    "@apollo/server": "^4.5.0",
    "graphql": "^16.3.0"
  }
}

코드를 조금 더 위로 올려보게 되면, app을 정의하고 있고 typedefs, resolvers가 입력되는 것을 확인할 수 있다.
const app = new ApolloServer({
  typeDefs: typeDefs,
  resolvers: resolvers,
});

먼저, resolver를 보게 되면, express 서버를 사용할 때, 보았던 api와 같은 역할을 하는 것을 확인할 수 있다.

// express
app.get('/', function (req, res) {
  res.send('Hello Wordld')
})

// apollo-server
const resolvers = {
  Query: {
    qqq: () => 'Hello world',
  },
};

typeDefs는 express에서 보지 못했던 코드인것 같다.
express의 경우, swagger를 통해 api-docs를 직점 작성했지만 graphql의 경우, docs 부분을 typeDefs에서 swagger와 같이 자동으로 생성해준다.

또한 CORS의 경우, ApoolloServer 내에 적용시키면 된다.

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

📌 GraphQl-API 만들기 실습

✅ graphql 접속하기

http://localhost:3000/graphql를 입력하게 되면, grapgql에 접속할 수 있다.

Query : 데이터베이스에서 데이터를 읽는 요청이다. (조회)
Mutation : 데이터베이스를 등록, 수정, 삭제하는 요청이다.

이제 graphql-api를 활용하여 api를 만들어볼 것이다.
이전에 만들었던 fetchBoards 와 createBoard api를 만들어 보자!!
그 전에, resolvers 부분은 express의 api와 같고, typeDefs는 api-docs를 구성하고 응답을 돌려줄 타입을 정의해주는 부분이다.

✅ fetchBoards API 생성

GET메서드를 사용하여 데이터를 조회할 수 있다.

// index.js

const resolvers = {
  Query: {
    fetchBoards: () => {
      // 1. 데이터를 조회하는 로직 => DB에 접속해서 데이터 꺼내오기
      const result = [
        {
          number: 1,
          writer: '철수',
          title: '제목입니다~~',
          contents: '내용이에요@@@',
        },
        {
          number: 2,
          writer: '영희',
          title: '영희 제목입니다~~',
          contents: '영희 내용이에요@@@',
        },
        {
          number: 3,
          writer: '훈이',
          title: '훈이 제목입니다~~',
          contents: '훈이 내용이에요@@@',
        },
      ];

      // 2. 꺼내온 결과 응답 주기
      return result;
    },
  },
}

rest-api 에서는 res.send를 사용하여 데이터를 반환했지만, graphql-api는 return을 사용하여 함수를 종료하면서 데이터를 반환한다.

또한, resolvers에서 반환되는 값들의 type 역시 typeDefs에서 지정해주어야 한다.

# index.js

const typeDefs = gql`
  type BoardReturn {
    number: Int
    writer: String
    title: String
    contents: String
  }

  type Query {
    # fetchBoards: BoardReturn => 객체 1개를 의미
    fetchBoards: [BoardReturn] # => 배열 안에 객체 1개 이상을 의미
  }
`;

반환값은 배열 안의 객체의 형태로 이루어져 있다.
최종적으로 아래와 같은 결과를 얻을 수 있다.

✅ createBoard API 생성

게시글을 만드는 api를 만들어보자!!
생성 즉, POST하는 메소드이기 때문에 MUTATION을 사용하여 작성한다.
이때, 생성된 함수를 통해 입력값을 받을 수 있는데, 해당 함수는 4개의 매개변수를 가질 수 있다.

parent : 부모타입 resolver에서 반환된 결과를 가진 객체
args : 쿼리 요청 시 전달된 parameter를 가진 객체
context : graphql의 모든 resolver가 공유하는 객체 (로그인 인증, 데이터베이스 접근 권한 등에 사용된다)
info : 명령 실행 상태 정보를 가진 객체

// index.js

const resolvers = {
  Mutation: {
    createBoard: (parent, args, context, info) => {
   
    },
  },
};

rest-api에서는 요청 데이터를 확인하기 위해 매개변수로 req를 사용했다.
graphql에서는 4개의 매개변수 중 요청 데이터를 확인 가능한 args를 사용하여 입력값을 가져온다.

// index.js

const resolvers = {
  Query: {
    fetchBoards: () => {
      // ...
    },
  },

  Mutation: {
    createBoard: (_, args) => {
      // 1. 브라우저에서 보내준 데이터 확인하기
      console.log(args);
			console.log("=========================")
      console.log(args.createBoardInput.writer)
      console.log(args.createBoardInput.title)
      console.log(args.createBoardInput.contents)

			// 2. DB에 접속 후, 데이터를 저장 => 데이터 저장했다고 가정

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

이번에는 요청 데이터 타입을 지정해보았다.
아래와 같이 input을 사용해 데이터의 타입을 지정한다.

# index.js

const typeDefs = gql`
  input CreateBoardInput {
    writer: String
    title: String
    contents: String
  }

  type Mutation {
    # createBoard(writer: String, title: String, contents: String): String => 입력값을 낱개로 받아오는 것을 의미
    createBoard(createBoardInput: CreateBoardInput!): String # => 입력값을 객체로 받아오는 것을 의미
  }
`;

최종적으로 apollo sever를 열고 localhost:3000/graphql에 접속해서 api 테스트를 진행해본다.

# index.js

mutation {
  createBoard(createBoardInput: {
    writer: "코드캠프",
    title: "온라인 부트캠프 백엔드",
    contents: "매우 좋습니다!!!"
  })
}

🌈 오늘 하루

점점 조금씩 지쳐가는 요즘이다. 날씨도 많이 풀려 봄이 오고 있고, 나른해지는 기분이 든다. 항상 결심을 유지하는 것이 어려운 것 같다. 물론 오늘도 최선을 다한 하루였지만, 조금씩 지치는 것이 느껴져 걱정이든다. 문제는 하루하루 쌓여가는 복습량이다... 그래고 긍정적인 마음으로 하루하루 최선을 다할려 노력 할 것이다!!!!

정승원

이전 포스트

2023.03.16 TIL

다음 포스트