코드캠프 FE 18일차 - TIL(CORS,Graphql / Apollo-sever,Firebase / BASS)

📔 학습목표

1. CORS란? >> CORS
2. Graphql-API이 이렇게 쉽게 만들어지다니 >> Graphql / Apollo-sever
3. 백엔드 개발자가 없을 땐 >> Firebase / BASS
   (PASS,DASS,SASS, Backend as a service)

지난 시간 포트폴리오 코드리뷰

1. 네비게이션에 메뉴 추가
2. Open API를 이용해서 메뉴 추가

상수화해서 맵으로 뿌려주는 방식
실무에서 많이 쓰인다.

 <div>
        {props.imgUrls.map((el, index) => (
          <>
            <DogImg key={el} src={el} />
            {(index + 1) % 3 === 0 && <br />}
          </>
        ))}
      </div>

한줄에 강아지 사진이 세 장씩 보여지는 코드
-> 실무에서는 안 씀. 보통 css로 한다 (이런 방식도 있다~)

state에 타입을 명시해주고 싶을 때?

const [age, setAge] = useState<number | string>(13)

꺽쇠괄호 안에 타입을 명시해준다.
(이래야 "13살" ,13 도 모두 가능해진다 -> generic 이라고 함)

map | forEach

map은 반복해서 리턴해준다
forEach 는 반복은 하지만 리턴은 안한다. (속도는 빠르다, 반복을 해서 2차적인 계산이 필요할 때.)

aync 옆 괄호에는 (el, index) 가 들어가지만
필요하지 않으면 넣지 않는다.
(_) 이렇게 쓰이기도 하는데 그냥 개발자들 사이에서의 관례이다.

axios가 어떤 걸 줄지 모르기 때문에 result의 타입을 any로 적음.

사진의 주소

오류!

CORS에서 블락됐다.

Cors

: 응답 데이터 (객체)

cross origin recolution apllo

cors가 허용이 되있으면 데이터를 받아올 수 있고, 허용이 되어있지 않다면, 받아올 수 없다.

옵션을 어떻게 트루로 푸는지 배워볼 예정...

cors {
"naver.com"
"daum.net"
}

다음에서 네이버는 허용 x
다음 백엔드에서 네이버는 허용

막는건 서버가 막는게 아니라 브라우저가 막음

브라우저에서 OPEN API를 쓰고 싶다?

프록시 서버

---

Graphql / Apollo-sever

REST: express

GRAPHQL : ApolloServer

ApolloServer express
REST랑 ApolloServer 합쳐진 거

apollo server 설치하기

yarn add apollo-server graphql

서버

const server = new ApolloServer({
  typeDefs
  resolvers
})

1. 타입(typeDefs)을 먼저 만들고
2. 함수(API) - resolver

에이피아이는 쉽게말해서 함수인데
리졸버라고 써준다.

위에서 쓰인 보드와 아래 보드는 아예 다르다
임포트한 보드이다.

인풋값에 들어가는 타입은
앞에 타입을 쓰는게 아니라 "input" 이라고 명시해줘야 한다.

앞에꺼

---

1. 파이어베이스 셋팅
2. _app.tsx 키 설정

배포를 프로덕션
northeast3 : 서울