22.09.09 (금) 40일 차

오늘 한 것

• [팀과제] 클론코딩 주차 시작 - 기획 / SA 작성 ( API 명세서 , 기능 분담 , git 설정, erd 설정)
• [팀과제] 기능구현 고민... => 세션/쿠키 방식으로는 안될것 같은데?
• DB공부 - 트랜잭션
• swagger 설정
• git issue / flow / readme 등등 정리
• properties 암호화 => 테스트코드를 알아야함.

오늘 배운 것

• https://sharplee7.tistory.com/48
• https://www.notion.so/7-IKEA-081fb84cc30747b981c8720a035b48fb
• 2022.09.10 - [DB] - [DB] 트랜잭션 Transaction 이란?
• 2022.09.10 - [GIT HUB] - [GIT] <나만보기> 깃 조지기 / read.me 예시

내일 할 것

• [팀과제] 회의 -> 세션/쿠키 방식은 프론트에서 구현 or 식별자 값 가지고 와서 비회원 DB 만들기 (클론 코딩이라면 쿠키로 해야하는데 그건 프론트에 부담이 많이 감..) // 아니면 아예 회원가입/로그인해서 JWT로 구현하는 건..?
• [팀과제] 내 기능 구현하기 (~일요일까지 끝내기)
• 스파르타 스프링 심화 3주차 (테스트 코드) 강의 듣기
• DB공부 - 관계 모델링  (생활코딩 강의)
• [개인] swagger 설정해보기
• [개인] 좋아요 토글 만들어보기

---

새로운 주차 시작이다! 벌써 40일이나 되었다니... 시간이 너무 빠르다 ㅎㅎㅎ

이번주차는 클론 코딩이다. 실전 프로젝트를 하기전에 마지막 미니 프로젝트인데.. 실전에서 폐를 끼치지 않으려면

열심히 해야겠다...

 

일단 저번 주와는 다르게 백엔드가 3명이고! 

모두 열정이 가득해서 대화도 잘 통하고 좋았다. 적어도 소통이 안되서 문제가 생기진 않을 것 같다.

 

이번에는 저번에 못해본 자동배포와 swagger와 테스트 코드 등을 최대한 활용해볼 예정이다

깃 이슈로 트러블 슈팅하는 법과 깃플로우까지..

깃에 대해서 잘 아시는 분이 계셔서 정말 큰 도움이 되었다.

initial commit 부터 남달랐다..

erd를 기반으로 기본 entity와 git action ci/cd를 위한 초기 설정을 먼저 해주셨다.

error도 미리 되어있으니 꿀이지...

 

기획때는 막연히 비회원이면 쿠키나 세션에 담아서 저장하면 되겠지 하고 생각했는데

알고보니 그부분은 전적으로 프론트의 영역이다.

 

SSR vs CSR 

SSR : 서버가 하나. 서버에서 바로  html을 불러와서 화면을 구성

CSR : 서버가 각각. WAS와 WEB 두가지 서버

 

우리가 구현하는 건 CSR 방식인데 백과 프론트의 서버가 다르다.

 

그러면 비회원 사용자가 접속을 하여 요청을 날렸을 때 

Http 속성 중 하나인  stateless에 의거하여 요청시 발생된 쿠키/세션은 바로 사라진다....

=> 어떻게 세션/쿠키를 백 서버로 보낼 것인가..? stateless 인디..?

 ① 쿠키 Cookie

 - > 시스템을 옮기는 매개체/클라이언트와 서버 사이의 요청/응답에 더해지는 매개체

 - > 클라이언트에 저장될 목적으로 생성한 작은 정보를 담은 파일

 

② 세션 Session : 로그인 시 쿠키가 세션을 저장해서 계속 로그인된 상태인 것 처럼 보이게 요청/응답을 하는 것

-> 서버에서 일정시간동안 클라이언트 상태를 유지하기 위해 사용 (로그인 상태)

• 서버에서 클라이언트 별로 세션ID를 부여한 후 클라이언트 별 정보를 서버에 저장
• 세션 ID는 클라이언트의 쿠키값 (세션쿠키)으로 서버(Web)에 저장되어 식별에 사용됨.
• 클라이언트의 브라우저 스토리지(저장공간)에 저장됨

백에서 요청시 발생된 쿠키를 받아서 api를 구현할 수가 없다..

 

그래서 쿠키/세션으로 로컬 스토리지에 장바구니/위시리스트 기능을 하게된다면

그건 프론트 단에서 모두 구현을 해야한다...

 

만약 기능을 백과 나눠야한다면 

비회원을 식별가능한 식별값을 받아서 API를 만들어서 비회원 DB 테이블을 받는 것으로 해야한다

or 로그인을 해서 jwt로 하는 방법 

 

그래서 이부분에 대해서 일단은 백엔드 분들과 이야기를 해보고 프론트 분들과도 이야기를 해봐야겠다..

ㅠㅠ 어렵다 정말.. 그냥 쉽게 쉽게 스코프를 잡는다고 잡은 건데 이게 정말 어렵다 ㅠ

 

https://abangpa1ace.tistory.com/116

[Storage] 로컬 스토리지 / 세션 스토리지 / 쿠키

 

 

https://kakao-tam.tistory.com/118

Front 서버와 BackEnd 서버가 다른 경우, 동일 클라이언트 세션에서 요청임을 어떻게 판단하나?

https://it-eldorado.tistory.com/85

[React] 프론트 엔드와 백 엔드 분리 시 동작 원리 (vs 풀 스택)

※ CORS 및 쿠키 문제

백 엔드 서버와 프론트 엔드 서버가 서로 다른 도메인을 가지는 경우, 다음과 같은 두 가지 문제점이 발생한다. 첫째, 기본적인 CORS 정책은 다른 오리진의 자원에 접근하는 것을 막는다는 문제이다. 따라서 백 엔드 서버에게 API 요청을 보내면 CORS 정책에 의해 요청이 거부당할 것이다. 이를 해결하려면 백 엔드 서버 쪽에서 CORS를 허용하기 위한 별도의 설정을 해줘야 한다. 다음으로, 다른 오리진에 대한 요청 시에는 쿠키를 전송 혹은 수신할 수 없다는 문제이다. 즉 백 엔드 서버에게 API 요청을 보내더라도 쿠키가 설정되지 않기 때문에 로그인 등의 기능을 구현하는 것이 어려워진다. 이를 해결하려면 백 엔드 서버에게 API 요청을 보낼 때 JavaScript 단에서 특정 설정(XMLHttpRequest.withCredentials 옵션을 true로 설정하거나, fetch API라면 credentials 옵션을 include로 설정)을 해줘야 하며, 백 엔드 서버 쪽에도 응답의 헤더에서 Access-Control-Allow-Credentials 옵션을 true로 설정해줘야 한다. (참고)

한편 이것과 별개로 쿠키의 SameSite 옵션에도 주의를 기울여야 하는데, 기본적으로 Lax로 설정이 되기 때문에 GET 요청과 같은 안전한 요청이 아닌 이상 동일한 도메인일 때만 쿠키가 전송될 수 있다. 여기서 말하는 동일한 도메인이란 1차 도메인과 2차 도메인까지만을 말한다. 즉, a.naver.com과 b.naver.com은 동일한 도메인으로 취급된다. (참고)

참고로, 도메인 및 서브 도메인 간의 쿠키 공유와 관련해서는 링크 1 또는 링크 2를 참고하기 바란다.

 

 

https://www.inflearn.com/questions/342672

express aws 배포 후 세션 - 쿠키 - 인프런 | 질문 & 답변

https://chinpa.tistory.com/157

프론트와 백엔드를 분리하고 싶다...

https://intrepidgeeks.com/tutorial/jwt-passing-cookies-in-cos-events

[JWT]CORS 이슈 상황에서 쿠키전달

 

https://velog.io/@pjh612/JWTCORS-%EC%9D%B4%EC%8A%88-%EC%83%81%ED%99%A9%EC%97%90%EC%84%9C-%EC%BF%A0%ED%82%A4%EC%A0%84%EB%8B%AC

[JWT]CORS 이슈 상황에서 쿠키전달