한우의 개발일기

일단 쿠키란 무엇인가??쿠키(Cookie)란?쿠키는 웹 서버가 생성하여 웹 브라우저로 전송하는 작은 정보 파일입니다. 웹 브라우저는 수신한 쿠키를 미리 정해진 기간 동안 또는 웹 사이트에서의 사용자 세션 기간 동안 저장합니다. 웹 브라우저는 향후 사용자가 웹 서버에 요청할 때 관련 쿠키를 첨부합니다.그렇다면 Next에서의 쿠키는 어떻게 쓰일까??Next.js의 쿠키 처리는 크게 4가지 환경에서 이루어진다고한다서버 컴포넌트(Server Components)에서의 쿠키// Server Componentimport { cookies } from 'next/headers'export default function Page() { const cookieStore = cookies() const theme = ..

프로젝트에 리액트 쿼리 적용기나는 프로젝트에 next AppRouter 를 적용하여 프로젝트를 진행을 하고 있던중 밑에 보이는 화면의 오른쪽 창을 앱라우터를 쓰니까 Parallel Routes 한번 적용을 해보면 어떨까? 라는 생각에 Parallel Routes로 오른쪽 창을 제작하게 되었다Parallel Routes를 적용을 하여 위에 보이는 사진의 오른쪽 창은 모달 혹은 다른 컴포넌트가 아닌 하나의 페이지가 되고있다.트러블 슈팅 및 리액트 쿼리 적용기여기서 오는 트러블슈팅이 하나있었는데 오른쪽 창과 뒤에 보이는 페이지는 아예 서로다른 페이지이다.예를들어 뒤에있는 페이지는 PageA.tsx 이고 오른쪽에 있는 페이지는 pageB.tsx 인것이다여기서 왔던 트러블슈팅은 완료하기 버튼을 누르거나 해당 글을..

MSW 관련 정리MSW란??API Mocking 라이브러리이다.Service Worker를 통해 HTTP 요청을 가로채기 때문에 네트워크 수준에서 Mocking이 가능하다.MSW(Mock Service Worker)는 개발 과정에서 두 가지 주요 환경을 모킹할 수 있도록 설계되었습니다Worker: 브라우저 환경에서 네트워크 요청을 모킹합니다. 일반적으로 React 애플리케이션 개발에서 사용됩니다.Server: Node.js 환경에서 네트워크 요청을 모킹합니다. 주로 서버 사이드 렌더링 또는 테스트 환경(Jest 등)에서 활용됩니다.MOCKING이란?테스트 데이터를 만들어서 활용하는 방식Mocking 진행 방법내부 로직에 직접 Mocking 하여 필요한 화면에 붙이는 방식(JSON 으로 목데이터를 만드는방..