-
Notifications
You must be signed in to change notification settings - Fork 5
Day 31 개발일지 Web
Axios Interceptor를 하게 된 이유는 바로 CSRF_TOKEN 때문이었다.
이전에 로그인을 성공하면 CSRF_TOKEN을 세션에 넣어주고, 쿠키에 저장하여 클라이언트가 이후에 요청을 보낼 때 Body 또는 params안에 CSRF_TOKEN을 넣어보내서 Session안에 존재하는 CSRFTOKEN과 비교하는 과정을 구현해뒀다.
하 지 만 !
다시보니 CSRF TOKEN을 발급만 해놓고 비교는 하지않고 있었다 .......ㅎ
이 작업을 하기위해서는 먼저 Client Cookie에 저장해놓은 CSRF_TOKEN을 전달 할 방법이 필요하다 !!
그래서 찾아본 것이 Axios는 Interceptors를 사용하여 요청값의 default params를 설정할 수 있다는 사실 🤸♀️
때문에 이전에 따로 설정해뒀떤 x-CSRF Header또한 Config설정으로 옮겨주고, Params로 csrfToken Cookie가 존재하다면 넣어주고 존재하지 않다면 undefined 값이 들어가게 만들어줬다.
const Axios = axios.create({
headers: { 'X-CSRF': 'X-CSRF' },
});
Axios.interceptors.request.use((value: AxiosRequestConfig) => {
const config = value;
config.params = {
csrfToken: document.cookie.split('csrfToken=')[1],
...config.params,
};
return config;
});여기서 몇가지가 문제가 되었는데 첫번째는 document.cookie를 접근하면 { csrfToken: abcdef... } 이렇게 값이 있는 것이 아니고, 'csrfToken=abcdefg...' 이렇게 문자열로 들어있다는 것이었다.. 🤦♂️
그래서 string의 split함수를 사용해서 csrfToken값을 받아왔다.
두번째 문제점은 params로 설정한다고해서 서버에서 params로 받았더니 아무값도 없었다 ...!
혹시몰라 query를 출력해보니 params로 설정하면 query로 온다는 것을 알게되었다.
생각지도 못한 몇가지 문제점들을 다행히(?) 금방해결할 수 있었다.
나는 처음에 이런것들이 있는지도 모르고 있었는데 팀원들이 있지 않을까? 라고 말해준 덕분에 찾아보게 되었다.
이런 Config 설정은 프로젝트를 진행하면서 정말 유용한 점이 많은 것 같다.
더 완성도 있는 결과물을 위해서 파비콘을 추가했다.. 파비콘 파일favicon.ico은 브라우저에서 웹사이트의 아이콘을 보여줄 때 사용하는 이미지 파일이다. 브라우저는 기본적으로 자동으로 /favicon.ico 파일을 요청해서 아이콘이 있는지 체크한다.
처음에는 리액트의 빌드 결과물에 포함시켜서 배포하면 될 것 같았다. 하지만 파일명에 해시가 포함되어서 파일명이 계속 바뀌게 되는 문제점이 있었다.
그래서 파일을 다른 경로에 따로 업로드 하고 nginx로 파일을 제공해주기로 했다.
nginx 설정은 아래와 같이 파비콘 요청이 왔을 때 응답으로 파비콘 파일의 위치를 따로 설정해주면 된다.
location = /favicon.ico {
alias /boostcamp/favicon.ico;
}
생각보다 단순하고 쉽게 접하는 것이라 쉽다고만 생각하였고 DB에 연관해서도 생각하지 못한 부분이다. 하지만 생각하면 할수록 방해되는 것이 많았다.
처음에는 Token 으로 횟수를 카운트 하려고 하였으나 당연하게도 Token을 지우면 그만이라는 생각이 들어서 회의를 진행하였고 점점 다양한 방법이 나오기 시작하다 결국 DB를 활용해야지만 한다는 결론이 나왔다.
우선 한 사용자가 다중 디바이스 사용에 대해서 문제가 없어야 한다고 판단하였기 때문에 실패 횟수를 공유할 방법은 유일했다.
따라서 DB를 통해 count 를 진행하였고 이에 따라 처리해주어야 하는 방법이 많았다.
우선 성공시 카운트를 초기화 해주어야 하며 이를 풀어줄 수 있는 방안을 고려해야하고 이를 풀었을 때 카운트를 초기화 하는 방법을 고려해야했으며 알림을 어떻게 넘겨줄지도 고민이였다.
하지만 전부 어려운 작업은 아니였기에 특별한 방법을 생각치 않고 그냥다 만들었다..
오늘만 그런지도 모르겠지만.. 프로젝트를 하면서 문제와 맞닥뜨릴 때 별겨 아닌 것이지만 잘 찾지못하여 불필요한 시간을 많이 보낸다고 생각하고 있었는데,, 그런 시간들이 쌓이다 보니 한번씩 '혹시 이거 ..?' 라는 생각이나 어떻게 검색해봐야할지 다양한 구글링 실력이 쌓이고 있는 것 같다는 느낌을 받았다. 또 이전에는 영어는 눈에 안들어와서 공식문서보다는 블로그 정리글을 선호하는 편이었는데, 이번 프로젝트를 하다보니 왜 사람들이 공식문서에서 찾는지 느끼게 되었다. 물론 공식문서가 친절하지 않은 곳들도 있지만 대부분은 정리가 잘되어있어서 많은 도움을 받을 수 있었다. 내가 실수했던 부분들을 잊어버리지 않게 잘 정리하면서 하나하나씩 쌓으면서 넘어가봐야겠다.
팀원들이 있다는 것이 얼마나 좋은 것인지 문득 생각이 들었다 사실 그동안도 느끼고 있었지만 특정 문제에 대해서 혼자 생각한 것보다 다수의 의견을 수렴하는 것이 좀 더 완성에 가깝다는 것이 너무 좋았다. 이렇게 성장하는 느낌도 있어 좋았고 좀 더 신중하게 고려하게 되는 부분도 많아서 좋았던 것 같다.
© Boostcamp