로그인 성공 시 localStorage에 액세스 토큰을 발급하여 저장하고, 쿠키에 refresh 토큰을 저장합니다. 단, refresh 토큰은 httpOnly 속성이 붙어 있기 때문에 js에서 접근하는 것은 원천적으로 불가능하고, 백엔드에 요청을 전송할 때 같이 보내는 것만 가능합니다.
백엔드 서버 무응답 시 토스트로 에러 메시지
8 에서 언급한대로 글로벌 토스트 기능을 추가했습니다. components/GlobalToastProvider.tsx에 위치해 있고, 이 파일의 toast 함수를 사용하면 됩니다.
파일 구조 변경
react-query, axios
기존에는 react-query, axios 관련 코드를 각각의 파일로 분리해 놓았으나, 하나의 기능에 대해서 react-query와 axios 코드를 같이 활용한다는 특성상 가독성이 떨어졌기 때문에 기능별(로그인, 회원가입 등)로 파일을 분리하여 하나의 파일에 하나의 기능에 관련된 코드를 모두 넣는 식으로 변경했습니다.
그 결과, 이전에 있었던 queries 폴더는 apis에 통합되었습니다.
constants 폴더
백엔드 서버와 통신할 때 필요한 데이터들이나 글로벌 상수들(예: localStorage에서 토큰의 필드명)을 constants 폴더에 모두 넣었습니다. 이 폴더의 목적은 백엔드에서 에러 메시지를 변경했을 때 등 상수값에 대한 변경 사항이 발생했을 때 일일히 코드를 헤집으면서 하드코딩 된 상수들을 바꾸는 것을 방지하기 위해서입니다.
특정한 상수값에 의존하는 코드를 작성할 경우, 이 폴더에 필요한 상수를 작성한 다음 import하는 식으로 대응하면 좋을 것 같습니다.
기존 코드 변경
react-query 성공, 실패 시 핸들링
기존에는 useQuery나 useMutation이 성공/실패했을 때 핸들링을 page.tsx에서 담당했으나, 아무래도 page.tsx는 오로지 디자인과 컴포넌트 관련된 코드만 넣는 것이 좋다고 판단했습니다. 어차피 useQuery, useMutation은 hook의 형태로 페이지에 들어가므로, 이 함수 내부에서 useState, useSnackBar같은 훅을 사용하는 것이 가능합니다. 앞으로는 백엔드와 통신하고 수정하는 코드들을 모두 apis에서 담당할 예정입니다.
로그인, 로그아웃 구현
로그인 성공 시 localStorage에 액세스 토큰을 발급하여 저장하고, 쿠키에 refresh 토큰을 저장합니다. 단, refresh 토큰은 httpOnly 속성이 붙어 있기 때문에 js에서 접근하는 것은 원천적으로 불가능하고, 백엔드에 요청을 전송할 때 같이 보내는 것만 가능합니다.
백엔드 서버 무응답 시 토스트로 에러 메시지
8 에서 언급한대로 글로벌 토스트 기능을 추가했습니다. components/GlobalToastProvider.tsx에 위치해 있고, 이 파일의 toast 함수를 사용하면 됩니다.
파일 구조 변경
react-query, axios
기존에는 react-query, axios 관련 코드를 각각의 파일로 분리해 놓았으나, 하나의 기능에 대해서 react-query와 axios 코드를 같이 활용한다는 특성상 가독성이 떨어졌기 때문에 기능별(로그인, 회원가입 등)로 파일을 분리하여 하나의 파일에 하나의 기능에 관련된 코드를 모두 넣는 식으로 변경했습니다. 그 결과, 이전에 있었던 queries 폴더는 apis에 통합되었습니다.
constants 폴더
백엔드 서버와 통신할 때 필요한 데이터들이나 글로벌 상수들(예: localStorage에서 토큰의 필드명)을 constants 폴더에 모두 넣었습니다. 이 폴더의 목적은 백엔드에서 에러 메시지를 변경했을 때 등 상수값에 대한 변경 사항이 발생했을 때 일일히 코드를 헤집으면서 하드코딩 된 상수들을 바꾸는 것을 방지하기 위해서입니다. 특정한 상수값에 의존하는 코드를 작성할 경우, 이 폴더에 필요한 상수를 작성한 다음 import하는 식으로 대응하면 좋을 것 같습니다.
기존 코드 변경
react-query 성공, 실패 시 핸들링
기존에는 useQuery나 useMutation이 성공/실패했을 때 핸들링을 page.tsx에서 담당했으나, 아무래도 page.tsx는 오로지 디자인과 컴포넌트 관련된 코드만 넣는 것이 좋다고 판단했습니다. 어차피 useQuery, useMutation은 hook의 형태로 페이지에 들어가므로, 이 함수 내부에서 useState, useSnackBar같은 훅을 사용하는 것이 가능합니다. 앞으로는 백엔드와 통신하고 수정하는 코드들을 모두 apis에서 담당할 예정입니다.