프로젝트를 진행하면서 JWT 토큰을 어디에 저장해야 좋을까 의문이 들었다.🤔우선 내가 경험한 프로젝트에서 토큰을 저장한 위치는 다음과 같다. access token, refresh token 모두 로컬 스토리지에 저장access token은 로컬 스토리지에 저장, refresh token은 쿠키에 저장access token, refresh token 모두 쿠키에 저장 개발 당시에는 단순히 (코드짜기)편해서 위와 같이 설정했지만, 지금 생각해보면 보안에 전혀 신경쓰지 않았던 것 같다. 특히 로컬스토리지에 토큰을 저장했던 것은 정말 반성한다.그렇다면 로컬스토리지에 JWT토큰을 저장하면 안되는 이유와 토큰을 어디에 저장하면 좋을지 정리해 보았다.     localStorage에 토큰을 저장하면 안되는 이유1..

컴포넌트를 Test 하면서 에러가 발생했다. (Jest를 사용 중이다.)원인은 Next.js에서 svg파일을 SVGR로 변환하여 사용하기 때문이었다. (원인을 알아내는 것도 한 시간 걸린 듯하다🙃)SVGR 공식 문서에 친절하게 해결 방법이 나와있다. Jest - SVGR SVGR - Transforms SVG into React Components. - SVGRTransforms SVG into React Components.react-svgr.com  1. __mock__ 폴더에 svg.js 파일을 생성한다.export default 'SvgrURL'export const ReactComponent = 'div'현재 프로젝트에서는 이미 mocks폴더가 있어 svg.js 파일만 생성했다. 2.jest...

현재 프로젝트는 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)이 혼합된 애플리케이션이다.정적인 페이지: 데이터 변화가 적어 정적 콘텐츠로 제공 (e.g. 메인 화면)동적인 페이지: 데이터 변화가 많아 업데이트가 잦음 (e.g. 게시물 리스트) 이러한 상황에서, 나는 정적인 페이지는 Next.js의 캐시 기능, 동적인 페이지는 React Query를 사용하면 좋을 것이라 생각했었다. 하지만 관리의 복잡성을 줄이기 위해 한 가지 방식으로 통일하는 것이 좋다는 피드백을 받았다.그래서 React Query를 SSR 환경에서도 활용하는 방법을 고민했다.     React QueryReact Query의 useQuery는 클라이언트 측 데이터 패칭을 도와준다.SSR에서는 서버에서 데이터를 받아 완..

React에서 많이 사용하는 Swiper는 이미지 캐러셀을 쉽게 구현할 수 있도록 도와주는 라이브러리이다.현재 프로젝트에서 Tailwind CSS와 함께 Swiper를 사용하면서 느낀 장단점을 정리해보았다.   장점1. 사용이 간편하다Swiper는 기본적인 설정만으로도 쉽게 캐러셀을 구현할 수 있다.캐러셀이 필요한 부분에 를 생성하고, 그 내부에 를 추가하면 된다.  Slide 1 Slide 2   2. 문서화가 잘되어있다Swiper는 문서가 잘 정리되어 있고, 다양한 예제도 제공되어 있어 처음 사용하는 사람도 쉽게 접근할 수 있다.Swiper - The Most Modern Mobile Touch Slider Swiper - The Most Modern Mobile Touch SliderSwiper..

프로젝트에서 app 폴더 내의 fonts 폴더를 public 폴더로 이동하는 작업을 수행했다.폰트 설정은 다른 팀원분이 맡으셨고, next/font를 사용한 코드가 아래와 같았다.import localFont from 'next/font/local';import '@/globals.css';const pretendard = localFont({ src: '../fonts/PretendardVariable.woff2', display: 'swap', weight: '45 920', variable: '--font-pretendard',});...const RootLayout = async ({ children,}: Readonly) => { return ( ... ..

프로젝트를 진행하면서 Socket.io를 사용해볼 기회가 생겼다. 생소한 라이브러리였고, 웹 소켓에 대한 이해가 부족했기 때문에 많은 어려움이 있었다.그동안(지금도) 어려움을 주었던 웹 소켓과 Socket.io에 대해 정리해보자.   웹 소켓이란? 웹 소켓은 사용자의 브라우저와 서버 사이의 인터랙티브 통신 세션을 설정할 수 있게 하는 고급 기술입니다. 개발자는 웹 소켓 API를 통해 서버로 메시지를 보내고, 서버의 응답을 위해 서버를 폴링(polling) 없이도 이벤트 중심 응답을 받을 수 있습니다. — MDN 문서 예시를 들어 더 자세히 살펴보자.  REST API와의 차이점REST API는 요청 → 응답 방식으로 동작한다. 클라이언트가 서버에 요청을 보내면 서버가 응답을 반환하는 구조로, 단방향 통신..