뭉균의 개발일지

🚪 들어가며 프로젝트 진행 중 백엔드(서버)에서 토큰 값을 넘겨줄 때, 프론트엔드에서 토큰의 저장 방식을 결정해야 하는 상황이 발생했습니다. 이 경우에 쿠키 또는 로컬 스토리지에 토큰을 보관해야하는데 각각 어떤 상황에 사용해야하는 지 의문이 생겨 해당 부분을 공부하게 되었고 공부한 내용을 정리하기위해 이번 포스팅을 작성했습니다🖥️  📚 쿠키와 로컬 스토리지가 무엇인가? 🍪 쿠키(Cookie) 쿠키는 웹 서버에서 클라이언트(사용자의 브라우저)에 저장하는 작은 데이터 파일입니다. 웹사이트를 방문할 때 특정 정보를 클라이언트에 저장해두고, 이후 재방문 시 이 정보를 활용하여 사용자 경험을 맞춤화하거나 사용자의 로그인 상태를 유지하는 용도로 사용됩니다. 쿠키는 브라우저에 저장되며, 서버와 클라이언트 간의..

🚪 들어가며 지난 글에서 React와 비교했을 때, Next.js를 사용해야하는 이유에 대해 포스팅했습니다.(참고: https://mungyun.tistory.com/10) [Next.js] 리액트만 사용할 때와 비교해 Next.js를 사용하는 이유🚪 들어가며 React는 웹 애플리케이션 개발에서 널리 사용되는 라이브러리로, 컴포넌트 기반 아키텍처 덕분에 재사용성과 유지보수성이 높은 코드를 작성할 수 있습니다. 그러나 단일 페이지mungyun.tistory.com이번 포스팅에서는 React의 CSR, Next.js의 SSR의 과정을 자세히 살펴보고자 합니다.   📌 React의 CSR 동작 과정    1. 접속 요청: 사용자가 웹사이트를 방문하면, 브라우저는 서버에 HTML 파일을 요청합니다.  2..

🚪 들어가며 리액트는 컴포넌트 기반의 UI 라이브러리로, 상태 변경 시 화면을 효율적으로 업데이트해주는 특성이 있습니다. 그러나 컴포넌트가 자주 재렌더링되는 경우 불필요한 계산이나 렌더링이 발생하여 성능 저하를 일으킬 수 있습니다. 이러한 성능 이슈는 주로 대규모 애플리케이션이나 복잡한 로직을 처리하는 컴포넌트에서 두드러지게 나타납니다.리액트는 이런 문제를 해결하기 위해 메모이제이션(Memoization) 기능을 제공합니다. 메모이제이션은 특정 값이나 함수를 캐싱해두고, 동일한 입력 값에 대해 불필요한 재계산을 방지하는 최적화 기법입니다. 리액트에서 제공하는 useMemo, useCallback, 그리고 React.Memo는 이러한 성능 최적화를 위한 메모이제이션 도구입니다.  📌 useMemo의 개..