TIL +36일차

오늘은 정말 ... 열심히 불태웠다...
어제 쿠키를 이용해서 리덕스로 로그인까지 구현해 놓고 오늘 API와 연동을 해봐야겠다고 다짐..!
팀원 백엔드 분들이 작성해준 스웨거를 axios로 연결하니 데이터는 받아와지는데 아무값이나 넣어도 로그인이 되어버린다...! 그래서 요게 잘 작동이 되는건가...? 싶어서 cs스터디 하는 분들께 여쭤봤더니 자기 조에서 써본 방법을 친절하게 알려주셨다..!
https://reqres.in/
API를 받아와서 간단한 유저나 회원가입 로그인을 실행시켜볼 수 있다 !
음 근데 분명히 axios 잘 작성한 거 같은데.. 값도 잘 넘겨줬구... response데이터가 안 받아와졌다.
좀 끙끙대다가 여러 사람들의 도움을 받았는데 알고보니 id값과 pwd값에 ""을 붙여서 문자열로 보내 객체로 들어가 제대로 값을 잘 못넘겨준거였ㄷㅏ....
너무 기초적인 실수인데 뭐가 잘못된지 몰랐어서 조금 창피했다 ,,,

로그인이 잘 되는걸 확인하고 우리조는 쿠키말고 localStroage에 토큰을 저장하는 방식으로 로그인을 할 거라 로그인 미들웨어를 수정했다.
localStroage.setItem("key", value) 요걸 이용하면 저장할 수 있다해서 써봤는데 자꾸 오류가 나는 것...

 .then((response) => {
        if (response.data.token) {
          const accessToken = response.data.token
          let token = window.localStorage.setItem('token', accessToken)

if문을 이용해서 토큰이 있을 시에 setItem해줘~ 이런식으로 작성을 해줘야 제대로 작동이 가능했다.

아니 근데 또 오류 오류 오류...
그전까지는 histoty,push를 이용해서 디스패치 후 페이지를 이동시켰는데 localStroage에 토큰을 저장하니 새로고침을 해야 페이지가 넘어가는 것이다... 그래서 일단 window.location.href=''를 이용해서 새로고침 후 이동을 시켰는데 이렇게 이동할때마다 새로고침하는 건 너무 비효율 적인 거 같아 같은 프론트 팀원과 머리를 맞댔다.
1. 라우팅 주소를 바꾼다 -> 안됨
2. useSeletor를 이용해 state값을 가져온다 -> 로그인 유지가 안됨
3. 2번을 가져온 후 useEffect로 토큰을 받아오고 로그인액션에 디스패치 해주기 -> 성공!

요렇게 조금 해결되나 싶더니...
user api와 연동해보기로 해서 백엔드 분들이 배포를 해주셨다.
그런데 ... 호ㅣ원가입이 안되는 겨... 처음엔 404에러가 떠서 이건 프론트의 문제다...! 하고 눈에 불을 키고 문제점을 찾았다.
일단 라우팅 주소가 잘못되었고, 변수 이름에 오타가 있었다. 값을 넘겨줄때 배열로 넘겨주어서 중괄호도 제거
axios 작성법이 잘못되었나..? 하고 data타입 뭐시기도 넣어봤는데 여전히 응답을 못받아오고 catch에러가 발생했다.
매니저님께 도움을 구했는데 이런 문제일때는 개발자도구의 네트워크 탭에서 확인하면 좋다고 했다.
넘겨주는 값 확인하고 에러도 확인..
하지만 고칠만큼 다 고쳤는데도...? 해결이 안되었다.. 이번엔 400 bad connect 에러가 뜨기 시작..
대체 뭐가 문제지........? 팀원들과 고민하던 차에 구세주처럼.. 백엔드 기술 매니저님이 오셔서 아까 살짝보고 문제점이 뭔지 알겠다 하시면서 하나하나씩 풀어나가보았다.
프론트에서 백으로 값은 잘 넘어오니 백에서 뭔가 잘못된거 같다 하시더니 코드 보시고 바로 문제점 캐치,,,
뭔진 몰라도 닉네임과 아이디값을 같이 설정? 해줬다고 했다. 서버는 나도 잘 모르겟숴~
하여튼 ... 문제점을 찾아서 한숨 돌리고 로그인도 테스트해보니 잘 되었다 !
요 에러잡는다고 자정이 될때까지 다들 집중했는데 너무 고생하셨구.. 오류찾기도 꽤 재밌었다 ㅎㅎ (물론 해결해서 재밌었던거같기도...)
글고 user 프론트는 내가 담당해서... 뭔가 잘못 짠거였을까봐 좀 식겁했으,,,,
이밖에도 오늘 배운거 너무 많은데....언젠가는 다 정리할 수 있..겠쮜..?