지금까지 뭘 했는가
지난 토요일에는 현업에 계신 개발자분들과 함께 특정 주제에 대한 문제를 풀게 되는 항해 플러스가 시작되었습니다. 갔다오고 난 그날에 허리에 통증이 엄청나게 생겼었습니다. 걷기도 힘들 정도의 통증이 느껴지게 되었습니다. 너무 아파 공강 시간에 근처의 정형외과를 다녀오게 되었고 의사선생님께서는 척추측만증이라고 하셨습니다. 골반 모양에 의해 선천적으로 허리가 약할 수 밖에 없고, 등에서 허리로 이어지는 척추가 휘어서 그렇다고 이야기해주셨습니다. 원인을 알게 되었고 꾸준히 도수치료를 받아 절반 수준인 7~8도까지 줄여보도록 노력하자는 이야기를 듣게 되었습니다. 아무튼 통증으로 인해 졸업작품 진행이 조금 더뎌지게 되었습니다.
지금까지 진행 상황은 다음과 같습니다.
1. next-auth의 `Credential` 방식에서 jwt(accessToken, refreshToken)을 이용하여 로그인 인증 및 인가처리를 완료하였습니다.
2. 로그인 페이지, 회원가입 페이지 구현을 완료했습니다.
3. intercepting routing, parallel routing을 활용하여 목표를 관리하는 페이지를 만들었습니다. 아직 API를 만들지 못해 페이지만 만들어둔 상태입니다.
4. vscode extension 프로그램에서 data를 fetch할 수 있는지 체크하였습니다. 일단, 시간 데이터를 계산하는 방법을 고안하지 못했기 때문에 일단은 데이터가 넘어가는지만 확인했습니다.
여기까지 구현을 했을 때 어려운 점은 JWT를 프론트와 백 입장에서 모두 구현을 해보는 경험을 해보니, 더욱 잘 이해할 수 있게 되었습니다. 그리고, next-auth를 이용해서 jwt 토큰을 관리하도록 만들었는데, 덕분에 next-auth의 Credential에 대해 잘 이해할 수 있게 되었습니다. 다른 팀들은 여러 명이서 진행을 하는 걸 혼자서 진행하다보니 조금 시간이 더 필요하겠지만 그만큼 더 많이 배울 수 있고 해보고 싶은 걸 한다는 장점도 있는 것 같습니다.
트러블 슈팅
1. next-auth와 jwt를 이용하여 refreshToken을 이용할 때의 에러 상황
2. node-fetch를 사용할 때, POST method일 때, body가 넘어가지 않았던 상황
1. next-auth와 jwt를 이용하여 refreshToken을 이용할 때의 에러 상황
이 부분은 제가 next-auth라는 라이브러리를 대강 썼었기에 발생했던 문제였습니다. 공식문서와 영상을 참조해 문제를 차근차근 해결해나갔습니다. 이 부분에 대한 글을 여기서 쓰게 되면 너무 길어지므로 시간이 된다면 따로 글을 쓰도록 하겠습니다!
그리고, next.js의 `fetch`에는 `interceptor`이 없기 때문에 boilerplate가 심해집니다. 저는 JWT 기반의 인증, 인가 방식을 사용했기 때문에 매 요청마다 accessToken이 유효한지 체크해야하고, 유효하지 않는다면 accessToken을 refresh하고 다시 요청을 보내는 작업을 구현해야 했습니다. 이를 매 요청을 보낼때마다 copy-paste 하기엔 코드가 복잡해지기에 새로운 방법을 찾아야 했습니다. 라이브러리의 도움을 받으려고 해서, 이것저것 살펴봤었는데 이번 프로젝트에서는 `return-fetch`라는 패키지를 사용해봤습니다. '디어'라는 기업에서 만든 패키지였으며 나중에 시간이 될 때 내부 코드를 살펴보고자 합니다.
2. node-fetch를 사용할 때, POST method일 때, body가 넘어가지 않았던 상황
vscode extension에서 서버로 데이터를 보낼 때, node 환경이므로 Web API의 `fetch` 메서드는 사용할 수 없었습니다.
때문에 `node-fetch` 패키지의 `fetch` 메서드를 사용했습니다. 이 때, 제가 Post Request를 보냈을 때, Request가 서버에 도착은 했지만 body의 데이터가 넘겨지지 않는 현상이 발생했었습니다. 이 문제를 해결하기 위해 차근차근 소스코드를 다시 살펴봤었습니다.
`fetch`를 보낼 때 옵션의 `headers: { "Content-Type" : "application/json" }`을 추가하지 않아서 발생했던 일입니다.
보통 프론트엔드에서 개발할 때, default Option으로 주기 때문에, 놓친 부분입니다..!