220601 프론트엔드 부트캠프 22일차 : CORS, API, firebase

1. CORS? 이것 때문에 짜증나 죽겠네 → CORS : openapi인데 왜 막아
2. Graphql-API 가 이렇게 쉽게 만들어지다니! → Graphql / Apollo-Server
3. 백엔드 개발자가 없을 땐 이걸 써봐! → Firebase / BAAS(Backend as a service) 바스, 사스(Software as a service), 파스(Platform as a service)..

  freeboard 리뷰 

라이브 강아지ㅠㅠ 짱 귀여워

네비게이션에 메뉴 - 맵으로 뿌려줌

추가할 때 menus에만 추가하면 자동으로 메뉴 생김

 

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

state에 타입 지정해주기. number 또는 string

 

사용하지 않는 변수는 _로 쓰는 관례가 있다.

 

이름이 메시지라는 변수에 담겨서 오는데, 문제가 생김

setImgUrls로 강아지 1.jpg 가 들어가, 근데 forEach하다보니까 두 번째로 들어온 결과를 넣어서 강아지 2.png 넣어야하는데 같은 곳으로 들어가서 기존 것을 덮어쓰게 된다. 결국 배열에 하나밖에 못 들어가는 것

기존에 있던 걸 가지고 오고, 그 뒤에 추가해주는 방식을 써야한다.

기존에 있는 값(첫번째)을 가져와서 넣고 거기에 result.data.message(두번째)

기존에 있는 값 알맹이들 스프레드 시켜줘야하니까 …prev!

 

  CORS (cross origin resouce sharing)

 

CORS(cross origin resouce sharing)

리소스는 자원, 응답 데이터. sharing 받아온다.

origin 어디서 요청했는가. 출발이 cross되어 주고 받을 수 있는 정책

 

반드시 이해하고 있어야 한다.

 

  [Backend] API 만들기 

REST : express

GRAPHQL : ApolloServer

apollo server express - 그래프큐엘, 레스트 같이 쓰고 싶다! 하면 이것

 

https://www.npmjs.com/package/apollo-server

apollo-server

apollo-server 설치

graphql 설치

yarn add apollo server graphql

typeDefs: 타입

resolvers: 실제 실행되는 함수

타입 - 플레이그라운드에 type보면 알 수 있음

 

타입 보드 의미하는 게 아니라 임포트한 보드 말하는 것

 

  파이어베이스

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

yarn add firebase

후 독스 참고, _apx.tsx 에 붙여넣기 해줘야할 것 있음

 

aisa-northeast3 (서울)

구글 컴퓨터 빌려서 사용하는 거다!

 

SQL, NoSQL

테이블, 서류봉투(콜렉션)

 

컬렉션 시작 - 테이블 만들기. 데이터 한 장 한 장 row

NoSQL에선 한 장 한 장 document

 

NoSQL 편한데 안정성이 떨어질 수 있다.(넣으면 넣는대로 다 들어감)

 

addDoc - 문서를 추가해주세요. (데이터 한 줄)

getDocs - 문서들 가져와주세요. 시간 걸리니까 await 달아주기

하나하나 .data를 해야지만 값이 보여진다.

 

포트폴리오 - 레벨업

Docs 읽는 훈련

파이어베이스 독스는 한글로 되어있어서 독스에 친숙해질 수 있는 기회~

파이어베이스 - 문서로 이동 - 빌드 - Firestore

백엔드보다 파이어베이스에 집중하는 것이 중요



 전기수분들 팀플 발표가 있던 날. 우리가 본캠프 시작한 날부터 지금까지 만드신 것...! 아니 내가 이런 걸 하게 된다고...? 진짜 아직 모르겠는데... + 내가 뭘 안다고 점수를 매길 수 있는걸까ㅠ생각 듦... 일곱팀인가 여덟팀이였던 것 같은데 안 적어뒀으면 헷갈릴 뻔 했다. 기능 자체에 대한 평가를 하긴 어려워서 기획이랑 디자인 쪽으로 점수를 드리게 된 것 같다... 이런 제가 채점해서 죄송합니다,,

 약간 안 좋은 환경 + graphql 직접 만들기라는 숙제의 콜라보로 별로 한 게 없는 것 같다. 프리보드에 발전이 없는 것 같아 너무 괴롭다... 알고리즘 테스트가 하루 미뤄져서 시험 다음 날 시험이라는 환상의 조합도 이루어졌다. 근데 생각보다 나쁘진 않은 것 같다... 막상 시험을 봐야한다고 하니 시험 공부 해야되고 거기에 집중해야돼서 오히려 자유로운 느낌 ? 드디어 미쳤나 ❤️‍🔥

 

 

 

 점심 PF님과 둘이서 서브웨이 샌드위치, 분수대 앞에 땡볕에 돗자리 깔고 먹으려는데 어떻게 아셨는지 당신들 이제 갈꺼니까 자리에 앉으라고 해주셔서,,,(🥹) 그늘에서 돗자리 깔고 있었다. 남들이 날 쳐다보는 걸 잘 의식 안 하고 모르는 편인데도 알 수 있을 정도로 빤히 쳐다보시는 분들도 있어서 약간 당황스러웠지만...! 너무 좋았다. 바람도 불고 분수대에서 물 튀는 것도 좋았다. PF님은 내가 이렇게 밝게 웃는 거 처음 본다고 하셨다..😎 내가 생각해도 학원에 있었던 시간 중에서 제일 행복했던 것 같아...!

 숙제 다 못한 건 거의 처음인 것 같다...??(고난이도 제외)