항해99 여섯 째주 회고록

2021.12.06~2021.12.11

한 것

시연 영상

https://www.youtube.com/watch?v=JKkBGYm7PV8&feature=emb_logo

코드

백엔드
https://github.com/kwak9898/ChaChaCha_Back_end
프론트엔드
https://github.com/picapipicca/chachachaFE

필수 키워드

CORS

• 브라우저에서는 보안적인 이유로 cross-origin HTTP요청들을 제한함.
  이러한 것을 허락하고 거절하는 것을 교차 출처 리소스 공유(cross-origin resource sharing)이라고 부름.
• 프론트엔드와 백엔드가 따로 배포되었기 때문에 npm에서 cors라이브러리를 받아 cross-origin HTTP요청을 허락해줬다.

cors동작 시나리오

• simple requests(특정하게 단순한 요청)
  특정 조건에 부합하는 요청은 cors preflight요청을 보내지 않고 바로 요청을 보냄
• preflight requests(대부분의 요청)
  클라이언트에서 실제 요청을 보내기전 options메소드를 이용하여 preflight request를 서버로 보냄
  이 요청에는 Access-Control-Request-method/Headers 정보가 담겨져있어 사전요청을 하게됨.
  서버는 이 요청을 보고 Access-Control-Allow-Origin/method/Headers 응답을 보내줌.
  이 후 실질적인 요청, 응답이 이루어지게 됨.
• credentialed requests(쿠키포함)
  요청을 보내는 쪽과 응답을 하는쪽에서 특정 http header를 집어넣어야지 쿠키를 포함시켜서 reqeust할 수 있음

감상

음. 안탑깝게도 완성을 못했다. 우리는 이번 한 주는 프론트와 백으로 나뉘어 협업하는 법을 배우는데 중점을 두기로 하고 프로젝트 스코프를 아주 작게 잡았다. 기능은 회원가입, 로그인, 댓글 기능, 메인에 차량정보 목록보기, 차량정보 상세 보기 밖에 없다. 사실상 웹크롤링으로 차량정보를 끌어오기만 하면 벡엔드에서 할 일은 개인과제 코드 복붙이나 마찬가지다. 그래서 사흘만에 끝냈다. 그런데 프론트 분들은 전혀 아니더라. 하나하나 다 새로 만드셔야했다. 그러다 기한을 못 맞춰서 미완성이다.

어쨌든 이번 주 목표인 협업하는 법은 배운 것 같다. api명세서가 아주아주 중요했다. 우리는 '제출용'으로 대강 만들고 우리끼리 잘 얘기해서 조율하면 되겠거니 했는데 그게 안 되더라. 정말 아주 처음부터 잘 만들어야 했다. 그리고 프론트엔드와 백엔드가 따로 개발되고 따로 배포되는 것도 처음해봤고 다음 주엔 더 잘 하겠지