18일차 / CORS , Apollo-Server, Firebase

16일차 코드리뷰

스프레드 연산자 리팩토링

에러메세지까지 처리해주기 위해 새로운 변수를 하나 만들어서 저장을 하고, 빈 값이 있는지 검증

조금 더 간단하게 하는 방법?

object 활용

every에 조건 주기. 하나라도 조건에 해당하지 않으면 false

모든 object.values로 value를 뽑아서 every로 조건을 준다

! 정답은 없으므로 고민을 많이 해보고 이런 저런 방법으로 시도해볼 것 !

CORS

origin이 다르기 때문에 브라우저에서 차단함
CORS가 NO라고 하는 것들의 데이터는 어떻게 받아올까?

myAPI를 만들어서 OpenAPI에 요청을 하고 브라우저에 돌려줌
Backend에서 CORS:true로 해줘야 브라우저에서 받아줄 수가 있다.
NO가 되어있다는건 CORS가 true가 아닌 것.
default가 false니까 true설정을 따로 안 한 것일 수 있다.

최초 요청은 브라우저가 했지만 최초 요청자를 숨기고 myAPI로 받아오는 서버를 proxy서버라고 한다. (무료 프록시 서버가 있음)
(ex 내 IP를 차단당했다면 접속을 못하니까 다른 컴퓨터를 통해서 접속하는 것이 proxy서버가 됨.
최초요청자를 숨기고 마치 다른 컴퓨터가 요청한 것처럼 하는 것.)

반대로 reverse proxy가 있다. (CORS랑 관련있는 건 아님)
브라우저에서 각 사이트로 접속하면 알맞는 서버에 접속한다.
하지만 이 서버들 앞에 컴퓨터를 설치해서 proxy서버를 두고 (reverse-proxy 역방향 프록시) 요청을 하게 되면 주소는 하나밖에 없다(qqq.com)
브라우저는 qqq.com에 접속을 하는데 페이지는 ccc 홈페이지가 보여지는 것.
대표적으로 nginx를 사용한다.

Decorator

Entity는 함수!

Graphql / Apollo-Server

nest는 express를 포함시키고 있는 프레임워크
backend에서는 apollo-server를 사용함

yarn add apollo-server
yarn add graphql

hello라는 함수가 생기고

world라는 값을 리턴

두개를 아폴로 서버로 합쳐주고 server.listen하게되면 ctrl+C 누르기 전까지는 종료가 되지 않는다.
접속을 기다리는 상태가 됨.

const { ApolloServer, gql } = require('apollo-server');

// 1. 타입
const typeDefs = gql`
  type Query {
    "A simple type for getting started!"
    hello: String
  }
`;

// 2. API
const resolvers = {
  Query: {
    hello: () => 'world',
  },
};

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

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

npm에서 코드를 복사

import { ApolloServer, gql } from 'apollo-server'
(require은 삭제)

리슨은 서버를 연 후에 작동해야하므로 옮겨준다.

AppDataSource.initialize()
  .then(() => {
    console.log("연결성공");
    // 백엔드 API를 리슨(24시간동안 접속가능하게끔 열어주기)
    server.listen(4000).then(({ url }) => {
      console.log(`🚀 Server ready at ${url}`);
    });
  })
  .catch(() => {
    console.log("연결실패");
  });

리슨()에 호스트번호를 넣는다.

yarn dev

쿼리와 뮤테이션이 만들어진 것을 확인가능

run까지 확인할 수 있다.

여기서 cors를 true로 설정하면, 브라우저에서 다이렉트로 받아올 수 있게 설정할 수 있다.
혹은, 원하는 사이트만 풀어줄 수도 있다.
네이버로 설정하면 네이버에서만 뮤테이션과 쿼리가 가능하게 된다.

DB에서 데이터를 리턴하는 방법?
예전엔 SQL문을 외워서 했지만 요즘에는 ODM과 ORM을 사용하면 그럴 필요가 없어진다.

class 컴포넌트로 만드려면 extends로 확장시켜준다

DB에 데이터가 저장이 됨

등록이 될 때까지 기다려주기 위해 async, await 추가

fetch도 같이 해준다.

result란 값에 담아주어서 result출력

타입을 변경해준다.
Board라는 타입은 우리가 만들어준다.

오른쪽은 타입스크립트의 타입이므로 헷갈리지 말 것

fetchBoards는 배열안에 들어있음므로 대괄호 안에 넣어주기
느낌표는 필수라는 의미

철수라는 데이터만 들어가게 되므로 변경해줌.
args = 데이터
info = api에 대한 정보들

parent
console에 찍으면 철수가 나옴
하지만 지금은 쓰지 않는다

스프레드 연산자로 정의해줄 수 있다.

타입을 플레이그라운드와 동일하게 작성해준다.
위에 것은 연습용이고 아래 것처럼 작성

input 함수 만들어서 넘겨주기

스프레드 연산자의 이름도 변경해준다.

실행

업데이트와 딜리트 방법

소프트 딜리트 방식?

데이터를 삭제하게 되면 데이터 자체가 사라지게 된다.
누가 언제 뭘 삭제했는지 기록을 알 수 없게 됨. 추적불가
그래서 실제로 삭제를 하는게 아니라, 가짜로 deletedAt이라는 컬럼을 하나 만든다.
디폴트로는 빈값을 넣는다.
조회를 할 때 deletedAt이 비어있는 컬럼만 조회를 하면 됨.
비워진 게 10개라면 다 가져오면 됨.
글을 하나 지웠다면 deletedAt에 날짜가 들어가게 되고,
데이터베이스에서 지워진건 아니지만 지워진 것처럼 보이게 됨.
문서를 조회할 때는 비워진것만 조회하면 됨. (9개)
실제로 DB에는 살아있지만 조회하는 사용자들은 안보이게 됨.
그래서 이것을 실제 딜리트가 아니라 소프트 딜리트라고 한다.

Firebase / BAAS

백엔드 개발자가 없을때 사용할 수 있다.

애널리틱스를 이용하면 특정 페이지 이탈율...등 분석가능
마케터 쪽과 협업으로 버튼에 설정을 추가하는 등...

프로젝트를 만들면 Firestore와 Realtime Database가 있는 것이 보인다.

yarn add firebase

간단하게 혼자 만들기에는 좋지만 크기가 커지면 보안상의 문제 등이 생긴다.
테스트 서비스에는 좋음.