사전투표날 기절해서 쉬느라
당일 투표하기 위해 아침 일찍 기상....ㅎㅎ
공휴일인데도 학원에 온 나 제법...대단해요..ㅠㅠ
오늘의 목표
-
CORS? 이것때문에 짜증나 죽겠네
-
GRaphql-API가 이렇게 쉽게 만들어지다니!
-
백엔드 개발자가 없을땐 Firebase/BAAS
open-api 활용한 포트폴리오
제네릭..
이렇게 스테이트에 타입을 지정할때는 : 이 아닌 <>를 이용한다
-forEach와 맵의 차이
Jsx를 만들때 여러가지 반복문이 있는데 사용하는 목적에 따라 어떤것을 써야할지 헷갈리는데..
map은 반복 후 리턴값이 있어서 게시판 같은 것을 만들 때 유용하며
forEach는 리턴되지 않고 반복만 하고 끝나기에 빠르고 위처럼 내용을 각각 보내주고
별도 리턴값이 필요없을떄 유용하다
1. CORS
- cross origin resource sharing
같은 웹사이트에서 프론트와 백이 공유하는 것이아닌
다른 웹사이트의 프론트 혹은 백을 공유할 것을 요청하는 것
다른 웹사이트라도 CORS 허용 되어 있을 경우 사용하는 것이 가능함
내가 다른 사이트의 백엔드에 요청을 보내고 싶다면
내 사이트 백엔드를 거쳐서 갈수 있게 내 사이트 백으로 우회해서 요청하는 방법이 있다.
이경우 내 사이트 백엔드는 프록시(대리인) 서버가 된다.
2.GRaphql-API
apollo-sever-express
grapql과 next.js를 함께 쓰려면 설치
우린 apollo-sever만 설치
이렇게 타입을 만드는데 fetchboard에 있는 board는 어제 만들어두었던 테이블의 board이다
여기서 board를 찾으려고 하는데 찾는데 시간이 걸린다
async와 await로 잠시 대기를 걸어주어 정상작동을 하게 한다.
브라우저에서 요청을 받기 위해 args가 필요하다
api에서 api를 요청하는 것이 가능한데 이때 parent를 통하여 받을 수 있음.
그러나 거의 쓰지 않기에 _ 로 표현하여 넣어둠
createBoardInput 처럼 Input 타입은 타입을 만들때 type가 아닌 input이라 선언하고 타입을 입력해야한다.
이렇게 만들고 내가 설정한 포트 넘버를 주소창에 넣고
/graphql 주소로 넘어가면 docs와 함께 테스트 하는 것이 가능하다.
3. Firebase/BAAS
- 파이어베이스 셋팅
- _app.tsx 키 설정
- 등록 조회 실습
-
파이어베이스 가입후 프로젝트 생성
*google 애널리틱스 설정 : 마켓팅하는 곳에서 자주 씀 -
빌드에서 원하는 데이터 베이스나 스토리지, 호스팅 등등 확인이 가능함
채팅처럼 쓸거면 리얼타임 데이터베이스를 쓰면 됨
웹 앱 추가를 한뒤 firebase를 설치하고 설정 코드를 _app.tsx에 입력할 것
이렇게 접속정보로부터 파이어베이스 데이터베이스 정보를 가져와서 사용하면 된다.
