안녕하세요 저는 기존 프로젝트를 타입스크립트로 적용하면서 전반적인 구조를 변경하게되었습니다.
이에따라 많은 에러와 버그를 마주하게 되었는데요. 이경험을 토대로 비슷한 에러나 버그를 마주하신 이글을 보신 분들을 위해 글을 적어가려 합니다.
로그인 성공했으나, 유저정보를 받아오지 못했던 에러
첫번째로 제가 마주한 에러는 로그인성공하여 status 200를 반환 받았지만 auth api에서 유저정보를 받아오지 못하는 에러였습니다. 아래 코드는 백엔드측 코드입니다. 코드를보시면 유저가 없을때 isAuth가 false인 json을 응답하게끔 되있는데요.. 로그인 할때 토큰이 발급되는것을 콘솔로 찍어서 확인했지만, 아래의 함수에서 콘솔로 쿠키에 담겨있는 토큰을 출력했을때 undifiend를 반환하여 굉장히 헤멨었습니다. 이것저것 시도해보다가, 문득 그런생각이 들었습니다. 제가 기존 프로젝트를 할때는 프록시 서버를 이용하여 백엔드 포트를 우회해서 요청,응답을 했었는데요. 리팩토링하면서 이 프록시 관련 파일을 삭제하고 백엔드측에 npm cors를 적용하였습니다. 아무래도 프론트에 있는 쿠키에서 토큰을 받아와야되는데, 백엔드측 포트는 프론트와 다르기때문에 백엔드측 포트번호로 쿠키를 가지고 오려하는것이 아닌가 하는 생각이었는데요! 따라서 삭제했던 프록시를 다시 세팅해주었더니 해당 버그는 사라지고, 유저정보를 정상적으로 받아올수 있게 되었습니다.
리덕스의 state를 usSelecctor로 불러올때 타입지정의 어려움
두번째 제가 겪은 어려움은 리덕스의 값을 useSelector로 받아올때 state의 타입을 어떻게 지정하는지 였습니다. 타입스크립트 적용이 처음이다보니 state의 타입을 어떻게 줘야될지 감이 안잡혔었는데요. 리덕스 타입스크립트의 경우 store에서 타입지정을 해주고, 그 타입을 import해서 state에 타입 적용을 해줘야 되는 사실을 구글링을 통해 알게 되었습니다. 감사합니다 구선생님 ㅎㅎ
