4.14

쿠키와 세션은 웹 서버와 클라이언트 간의 데이터를 저장 교환에 사용되는 기술. 쿠키는 클라이언트, 세션은 서버에 데이터 저장. http 프로토콜의 약점을 보완하기 위해 사용.
쿠키 : 사용자 인증, 장바구니 정보 저장. 유효기간을 설졍하여 시간이 지나면 자동 삭제. HTTP 헤더에 쿠키를 포함 시켜 응답
세션 : 서버에서 생성. 쿠키에 세션id를 저장하고 이 아이디로 데이터를 가져올수 있다. 쿠키보다 안전, 서버자원을 사용하므로 성능 문제 가능성.
JWT( JSON Web Token ) 요즘은 토큰기반 인증 방식을 사용하는 추세.

쿠키의 동작 순서
1. 클라이언트가 페이지를 요청한다. (사용자가 웹사이트 접근)
2. 웹 서버는 쿠키를 생성한다.
3. 생성한 쿠키에 정보를 담아 HTTP 화면을 돌려줄 때,
같이 클라이언트에게 돌려준다.
4. 넘겨 받은 쿠키는 클라이언트가 가지고 있다가(로컬 PC에 저장)
다시 서버에 요청할 때 요청과 함께 쿠키를 전송한다.
5. 동일 사이트 재방문시 클라이언트의 PC에 해당 쿠키가 있는 경우,
요청 페이지와 함께 쿠키를 전송한다.

세션의 동작 순서
1. 클라이언트가 페이지를 요청한다. (사용자가 웹사이트 접근)
2. 서버는 접근한 클라이언트의 Request-Header 필드인 Cookie를 확인하여, 클라이언트가 해당 session-id를 보냈는지 확인한다.
3. session-id가 존재하지 않는다면, 서버는 session-id를 생성해 클라이언트에게 돌려준다.
4. 서버에서 클라이언트로 돌려준 session-id를 쿠키를 사용해 서버에 저장한다.
쿠키 이름 : JSESSIONID
5. 클라이언트는 재접속 시, 이 쿠키(JSESSIONID)를 이용하여 session-id 값을 서버에 전달

SEO(Search Engine Optimization)는 검색 엔진에서 웹사이트의 노출 순위를 올리기 위한 마케팅 전략. seo에 맞게 최적화. 거기에 헬멧도 쓰나보다.

jwt 동작순서 알아보기
1.사용자가 id와 password를 입력하여 로그인 요청을 한다.
2.서버는 회원DB에 들어가 있는 사용자인지 확인을 한다.
3.확인이 되면 서버는 로그인 요청 확인 후, secret key를 통해 토큰을 발급한다.
4.이것을 클라이언트에 전달한다.
5.서비스 요청과 권한을 확인하기 위해서 헤더에 데이터(JWT) 요청을 한다.
6.데이터를 확인하고 JWT에서 사용자 정보를 확인한다.
7.클라이언트 요청에 대한 응답과 요청한 데이터를 전달해준다.

26. 잘 모르겠음. 폰번호 인증하고 난 다음에 로그인 시키는데 mutation을 다시 다른 loguserin으로 감쌈. loguserin에서 받아온 토큰으로 인증번호 같은지 확인하는 뮤테이션 안에서 로그인 시켜줌. loguserin은 @client 에서 하는데 이것도 좀...토큰 때문인것 같음. 인증토큰을 localstorage에 저장하는건가보다

27. react facebook login 추가. facebookconnect mutation 만듬. 타입 만들어주면 페이스북 로그인 여부 응답이랑. 로그인 했을때 variable 받아올수 있음

28. 페이스북 로그인이 되면 callback을 할수 있는데 받아온 varibles를 디비에 저장하는 함수를 만든다. 함수 안만들고 끝남.

29. 콜백 함수 만듬. 페이스북 로그인 시 response 를 받아서 그안에 있는 정보로 facebookMutation 에 넣음. toast 로 success error 알림.

30. LogeduserIn Mutation 에서 키를 localstorage에 저장하는 거 함

31. react-sidebar 추가. 연결하고 css 조금함.

32. 사이드바에서 쓰는 쿼리는 여러군데서 쓰기 때문에 sharedQuery.ts 에서 만든다. 쿼리에서 getMyProfile로 필요한 정보만 가져옴.

33. 사이드바에 userProfile에서 받은 값 뿌림. 프로퍼티로 data 받아오는데 data를 빈 객체나 null로 디폴트 설정하면 if문으로 undifined 체크 안해도 되서 좋음. 삼항 연산자로 user 객체들 &&로 상태 체크하면 편리함.

34. toggleDrivingMode 에서 isDring 가옴. 이때 프로퍼티로 refetchQueries 하면 새고 안해도 바뀜.

35. API를 다시 안부르고 cache에서 데이터 변경 하는 방법. update 속성은 api와 data 간의 프록시. ?? cache 에서 데이서 수정만 하면 api는 어디서 바뀐건가?

36. UpdateProfile 화면만들고 query 만듬.

37. 업데이트 한뒤에 getMyProfile 로 가져온 값 setState함.

38. UpdateProfileMutation 속성에 refetchQueries로 getMyProfile 넣음. onCompleted로는 upateProfile response 받아서 toast 표시.

39. 새로고침하면 profile내용 사라지는 버그는 fetchPolicy={"cache-and-netword"} 로 설정함. Cloudinary에 이미지 저장. axious 추가

40. FormData() 인스턴스 생성하고 문서 따라서 필요한거 appen() uri로 aixos 한다음 request 받음

41. Log out 만듬, Account Settings 화면만.
    41-1. 업로드한 사진 request에서 파일 url을 디비에 저장.

42. getPlace 쿼리 만들고 화면.

43. place 화면 만들기.

44. addPlace query 만들고 test

45. updatePlace query 만들고 test

46. google-maps-react @types/goolgeMaps 추가. componentDidMount() 나옴. 훅으로는 어떻게 바꿀지 궁금. ReactDom.findDomNode() 이거도 처음봄.

47. map 인스턴스 생성, mapNode(모르겠음. 아마도 useRef?) 와 mapconfig(지도 위치, 지도 사이즈 같은거.)

48. 마커 css 화면 중앙에 배치하고 맵을 이동시키면서 마커가 가리키는 곳의 위치 값을 얻어온다. google map listener로 dragend 사용. 위치는 맵의 center 값을 가져온다.

49. 이벤트 blur 동작이 끝났을 때 실행 인풋창을 수정하다가 지도를 클릭 하면 실행. 위도와 경도 값으로 주소를 리턴하는 함수 만듬 geocode 구글 api.

50. 주소 가져오는지 test