20220207_TIL

1. CORS
2. Apollo-Server
3. Firebase

1. CORS

API를 사용하다 보면 CORS와 관련된 오류가 콘솔에 뜨는 경우를 종종 볼 수 있는데, CORS는 도대체 무엇일까?
MDN 에서는 CORS를 다음과 같이 정의하고 있다.
교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.

여기서 origin이란 protocol, host, port가 동일할 때를 뜻한다. 예를 들어 다음과 같은 URL이 있으면

https://gchoi.site:8080/boards/1

origin은 다음과 같이 구성된다.
protocol: https://, host: gchoi.site, port: 8080

또한, SOP(Same Origin Policy)같은 Origin 안에서만 요청을 보낼수 있게 제한하는 브라우저의 보안 정책이다.
즉 원래는 SOP에 의해 불가능한 요청을 CORS를 통해 사용할 수 있게 된다.

apollo-server에서의 cors 해결 방법

const server = new ApolloServer({
  typeDefs,
  resolvers,
  cors: true, //
   cors: {
     origin: "http://gchoi.site" // 접근을 허용할 도메인
   }
});

2. Apollo-Server

Apollo-Server는 GraphQL Server개발에 사용할 수 있는 오픈 소스 라이브러리이다.

사용 방법

먼저 Apollo-Server와 GraphQL을 설치해준다.

npm install apollo-server
npm install graphql

Apollo-Server를 만들기 위해선 생성자에 typeDefs와 resolvers를 반드시 전달해줘야한다.
(resolvers에 정의한 내용이 typeDefs에 없는 경우에도 오류가 발생한다.)

• typeDefs: GraphQL-API의 요청, 파라미터, 반환값을 정의
• resolvers: 실제 요청이 들어왔을 때 실행할 함수 요청의 결과로 해당 함수의 반환값이 전달된다.

typeDefs 예시

const typeDefs = gql`
  type Board {
    number: Int
    wrtier: String
    title: String
    Age: Int
  }
  type Query {
    fetchBoards: [Board]
  }

  input CreateBoardInput {
    wrtier: String
    title: String!
    age: Int!
  }
  type Mutation {
    createBoard(createBoardInput: CreateBoardInput!): String!
    deleteBoard(number: Int!): String!
  }
`;

resolvers 예시

const resolvers = {
  Query: {
    fetchBoards: async () => {
      const result = await Board.find({
        where: { isDeleted: false, deletedAt: null },
      });
      console.log(result);

      return result;
    },
  },

  Mutation: {
    createBoard: async (_: any, args: any) => {
      try {
        await Board.insert({
          ...args.createBoardInput,
        });
        return "createBoard를 요청하셨습니다!!";
      } catch (err: any) {
        console.log(err.message);
      }
    },

    deleteBoard: async (_: any, args: any) => {
      Board.update({ number: args.number }, { deletedAt: new Date() });
      return "삭제성공";
    },
  },
};

서비스의 크기가 커지거나 API의 수가 많아질 경우 여러 파일로 나눠서도 사용 가능하다.

작성한 typeDefs, resolvers를 인자로 Apollo-Server를 생성한다.

import { ApolloServer } from "apollo-server";
import { ApolloServerPluginLandingPageGraphQLPlayground } from "apollo-server-core";
const server = new ApolloServer({
  typeDefs,
  resolvers,
  cors: true,
  // API-DOCS 페이지를 구버전 Playground로 바꿔주는 플러그인
  // 최신버전이 기능도 많고 좋다. 익숙한게 좋아서 설정해줌
  plugins: [ApolloServerPluginLandingPageGraphQLPlayground()],
});

server.listen({ port: 4000 })

3. Firebase

Firebase는 구글에서 제공하는 BAAS(Backend as a service) 플랫폼으로 Database, Storage등 여러 백앤드 서비스를 제공한다.
Firebase를 사용하면 백앤드 기능을 구현하는 수고를 덜고, 클라이언트 개발에 더 힘을 쓸 수 있다.
(현재 300달러 무료 크레딧을 제공중이다. storage는 일정 범위 무료인데 혼자 개발하는데 충분히 사용할듯하다.)