React-nodebird #7

cookie 설정은 프론트엔드 개발자가 흔히들 빼먹는 부분이라고 한다.

쿠키란 무엇인가 ?

정보가 있고, 그 정보를 저장하기 위해 사용하는 것이라고 생각하면 될 것 같다.

예를 들어 로그인 정보등이 대표적이다.

아래는 정확하게 쿠키가 사용되는 과정을 복기하기 위해서 타 블로그에서 퍼온 정보이다.

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

출처: https://hahahoho5915.tistory.com/32 [넌 잘하고 있어]

axios로 백 서버와의 통신을 한다면, cors 설정을 백에서 해줘야하는데, 만약 credentials는 해주지 않는다면 쿠키는 사용할 수 없다. 그렇다면 credentials까지 백에서 true로 해주었다!
근데 왜 프론트에서 쿠키를 받아오는게 오류가 날까 ?
-> 이유는 백에서 credentials를 true로 해주었다고 해서 프론트에선 그냥 요청을 할 수 있는 것이 아니다.
front에서도 credentials를 설정을 해주어야하는데, 예를 들어서

axios.post('/post', data, {withCredentials : true});

이런식으로 axios를 사용할 때마다 사용해야 한다.
하지만 이것은 중복되는 코드가 너무 많아지기 때문에 기본적으로 axios로 통신을 할 때 witcredentials를 true로 해주기위해서

axios.defaults.withCredentials = true;

로 설정한다.

• 반복적인 추가가 많은 부분과 백엔드 부분을 지금 진행하고 있기 때문에 많은 코드 프론트에서 많은 코드 변화는 없다. 따라서 내가 중요하게 여기는 부분을 체크하면서 진행하고 있다.
  그렇다고 그냥 넘어갈 부분은 아니다.
  반복적으로 하는 것은 계속 쌓이고, 백엔드 분야도 어떻게 작동하는지 안다면 프론트엔드에서 작업을 할 때 당연히 많은 도움이 된다고 생각하기 때문에 즐겁게 하고 있다.