뭉균의 개발일지

🚪들어가며   위의 사진은 검색어를 입력하면 그 검색어가 포함된 문자만 필터되도록 설정한 컴포넌트입니다. "가나다라"를 검색할 때, 검색어의 상태인 search가 어떻게 변하는지 보겠습니다.   그런데, 꼭 이렇게 한글자 한글자마다 상태를 변화시킬 필요가 있는지 의문이 들었습니다. 위의 예시는 간단하기 때문에 성능 상 큰 문제가 없을 것입니다. 하지만, 만약 저렇게 상태가 변화할 때마다 API 요청을 보내는 상황이라면 성능에 큰 문제가 생길 것입니다. 이럴 때, Debounce 개념을 통해 성능을 개선할 수 있습니다.   📗 디바운스 (Debounce)란?디바운스는 짧은 시간 동안 여러 번 발생하는 이벤트를 하나로 합쳐서 처리하는 기술입니다. 주로 사용자 입력, 창 크기 조정, 스크롤 이벤트와 같은 ..

🚪들어가며 우선, 해당 글은 React-query의 Mutation에 관한 개념을 알고 있다는 가정 하에 작성했습니다😎  인스타그램이나 페이스북을 하다보면 특정 게시물에 좋아요를 누르는 경험을 쉽게 할 수 있습니다. 사용자가 좋아요 버튼을 클릭하면 서버 응답을 기다리지 않고 클라이언트에서 즉시 좋아요 수가 증가합니다. 이때 사용자는 "좋아요가 바로 반영되었구나"라고 느끼지만, 실제로는 서버에 요청이 전송되고 처리 중인 상태일 수 있습니다. 이처럼 서버가 요청을 성공적으로 처리할 것이라고 가정(낙관적인 가정)하고, 먼저 클라이언트 상태를 변경하는 것을 Optimistic Update라고 합니다.  Optimistic Update 적용 전서버에서 좋아요 상태가 업데이트되고 응답이 클라이언트로 돌아올 때까..

🚪 들어가며 예시 코드를 Next.js로 작성하여 이번 포스팅을 Next.js로 분류하였고 바닐라 js나 react에서도 비슷한 방식으로 구현할 수 있습니다. 예시 코드에서 스타일링은 tailwind CSS를 통해 간단히 구현했습니다.   📚 개념 정리  모달 창(Modal)은 화면 위에 나타나는 팝업 창으로, 사용자가 그 창을 닫거나 조작하지 않으면 배경의 다른 요소들과 상호작용할 수 없게 만듭니다. 주로 사용자에게 중요한 정보를 전달하거나 특정 작업을 완료하도록 요구할 때 사용됩니다.모달 창은 일반적으로 absolute 또는 fixed 포지셔닝을 사용하여 화면의 중앙에 위치시키며, 배경은 흐리게 하거나 클릭할 수 없도록 막습니다. 저는 fixed를 사용하여 모달 창을 만들었습니다.   🖥️ 예시..

🚪 들어가며 지난 글에서 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을 활용해 성능을 최적화..