뭉균의 개발일지

🚪 들어가며  저는 코드잇 스프린트 프론트 엔드 9기 수료 중이며, 2024년 10월 18일(금)부터 2024년 11월 5일(화)까지 약 3주간 중급 프로젝트를 진행합니다. 이 기간 동안 4명의 팀원들과 함께 일정 관리 웹 애플리케이션 Taskify를 제작할 예정입니다.이번 프로젝트는 Next.js 프레임워크를 사용하여 진행하는 첫 번째 프로젝트로, 로그인과 같은 사용자 기능을 처음으로 적용해보는 것에 대해 설레는 마음을 가지고 프로젝트를 시작했습니다.😎   📚 프로젝트 소개 Taskify는 일정 관리와 공유 기능을 제공하는 웹 애플리케이션입니다. 사용자는 가족, 회사 등 다양한 커뮤니티를 생성하고, 멤버를 초대하여 일정과 할 일 목록을 함께 관리할 수 있습니다. 커뮤니티 내에서 작성된 일정은 카드..

🚪 들어가며 프로젝트 진행 중 백엔드(서버)에서 토큰 값을 넘겨줄 때, 프론트엔드에서 토큰의 저장 방식을 결정해야 하는 상황이 발생했습니다. 이 경우에 쿠키 또는 로컬 스토리지에 토큰을 보관해야하는데 각각 어떤 상황에 사용해야하는 지 의문이 생겨 해당 부분을 공부하게 되었고 공부한 내용을 정리하기위해 이번 포스팅을 작성했습니다🖥️  📚 쿠키와 로컬 스토리지가 무엇인가? 🍪 쿠키(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의 개..

🚪 들어가며 React는 웹 애플리케이션 개발에서 널리 사용되는 라이브러리로, 컴포넌트 기반 아키텍처 덕분에 재사용성과 유지보수성이 높은 코드를 작성할 수 있습니다. 그러나 단일 페이지 애플리케이션(SPA)으로 동작하는 React는 몇 가지 한계를 가지고 있습니다. 이런 한계를 해결하기 위해 등장한 프레임워크가 바로 Next.js입니다. 이번 포스팅에서는 React만 사용할 때와 비교해 Next.js를 사용해야 하는 이유를 알아보겠습니다. 🎈 React의 특징과 장점, 한계 React의 주요 특징React는 사용자가 인터페이스를 효율적으로 구성할 수 있도록 돕는 UI 라이브러리입니다. 이를 통해 복잡한 상태 관리와 컴포넌트의 재사용성을 극대화할 수 있습니다. 또한, 가상 DOM을 활용해 성능을 최적화..