4전 4전

| Diffing 알고리즘이란Diff는 두 대상 간의 "차이점"을 의미합니다. 말 그대로 이전 트리와의 차이점을 구하는 알고리즘 입니다.리액트는 우리가 작성한 UI를 브라우저에 효율적으로 그리기 위해 Virtual DOM이라는 중간 단계를 거치면서 Diffing 알고리즘을 활용해 차이를 비교 합니다.효율적으로 그린다?리액트는 UI 상태가 바뀔 때마다 새로운 Virtual DOM을 만들고, 이전 Virtual DOM과 비교하여 실제로 바뀐 부분만 실제 DOM에 반영합니다.이 비교하는 과정을 바로 Diffing 알고리즘이라고 부릅니다.| Virtual DOMVirtual DOM은 실제 DOM을 추상화한 자바스크립트 객체입니다.리액트에서는 Virtual DOM을 활용해 최소한의 변경사항만을 실제 DOM에 한 ..

웹사이트에서 페이지가 전환될 때, 단순한 화면 변경보다 부드러운 애니메이션이 적용되면 사용자 경험에 있어 긍정적인 영향을 미친다고 생각합니다. Next.js에서는 기본적으로 페이지 이동 시 애니메이션이 없지만, 이를 직접 구현하여 자연스러운 페이지 전환을 만들 수 있습니다. 이번 글에서는 좌우 슬라이드 전환 애니메이션을 적용하는 방법을 공유하겠습니다. 이를 위해 Context API를 활용하여 애니메이션 상태를 관리하고, 커스텀 훅을 만들어 애니메이션을 쉽게 적용할 수 있도록 해보겠습니다.본 예시에서는 Next.js Tailwind CSS를 사용하였습니다.| Context 생성하기먼저, 페이지 전환 애니메이션을 관리할 Context를 생성합니다.이 Context는 애니메이션을 위한 className과 애..

리액트에서 훅은 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해주는 강력한 도구입니다.그중에서도 useState와 useRef는 상태 관리를 위해 자주 사용됩니다. 하지만 코드를 보다 보면 어떤 상황에서는 useState로,또 어떤 경우에는 useRef로 상태를 관리하는 모습을 종종 보게 됩니다. 특히 DOM 조작을 위해 useRef를 사용하는 경우는 자주 보며 이해하기 쉽지만,이 외에 이유로 상태 관리를 위해 useRef를 사용하는 사례는 헷갈릴 때가 있습니다. 이번 글에서 이 두 가지 훅을 통한 상태 관리의 차이점을 공부해 보고,상황에 따라 어떤 것을 사용하는 것이 적절한지 정리해 보겠습니다.| React의 상태 관리와 UI 업데이트 방식리액트는 상태(state)나 props의 변경에 ..

추상화는 불필요한 세부 사항을 제거하고 중요한 부분만 남겨시스템을 더 쉽게 다룰 수 있게 만드는 과정입니다. 프로그래밍에서는 인터페이스, 추상 클래스, 함수, 모듈 등을 통해 기능을 추상화할 수 있습니다.이를 통해 코드 재사용성, 유지보수성, 확장성을 높일 수 있습니다. React에서 컴포넌트를 설계할 때 이런 추성화 기법을 사용하여재사용성, 유지보수성, 유연성 등을 높일 수 있습니다. 최근 리액트로 만들어진 다른 사람의 코드를 보던 중,문득 "이 부분을 좀 더 추상화하면 관리가 더 쉬워질까?"라는 생각이 들었습니다. 코드를 처음 보면 간단해 보이지만,새로운 요구사항이 추가될 때마다 코드가 복잡해질 수 있지 않을까 고민했습니다.| 구현해 볼 컴포넌트제가 고민한 내용을 간단한 컴포넌트를 만들면서 공유해보려..

yarn berry는 yarn의 최신 버전(yarn 2와 그 이후의 버전)을 지칭합니다.PnP(Plug 'n' Play) 방식, Zero Install 방식을 지원하며 인기가 많은 패키지 관리 도구입니다.| yarn berry 특징Cache와 Zero-Installyarn berry는 설치된 패키지를 글로벌 캐시에 저장하여, 같은 패키지를 여러 프로젝트에서 사용할 때 다운로드 시간을 절약합니다. 패키지는 zip 파일 형태로 .yarn/cache에 저장되며,이를 통해 네트워크 요청 없이 빠르게 패키지를 불러올 수 있고,디스크 공간을 효율적으로 사용할 수 있습니다. 또한, Zero Install 기능을 통해, 패키지들이 리포지토리에 함께 저장하며 프로젝트를 클론 하는 것만으로 필요한 모든 패키지를 바로 사용..

무한 스크롤은 사용자가 페이지를 스크롤할 때 콘텐츠를 동적으로 로드하는 기법입니다.무한 스크롤을 구현하는 방식은 몇 가지가 있는데 그중 몇 가지 방법을 사용해 보고,어떤 방식이 가장 좋은지 확인해 보려 합니다.| json-sever해당 글에서 기본적으로 예시 코드를 구현할 때 json-server라이브러리를 사용하여 구현하였습니다.https://www.npmjs.com/package/json-server json-server[](https://github.com/typicode/json-server/actions/workflows/node..

최근에 지도 서비스를 개발하면서 사용자들이 해당 서비스를모바일에서 보다 편리하게 사용할 수 있도록 PWA를 적용하기로 했습니다. 오늘 포스팅에서 Next.js에서 PWA를 적용했던 과정을 적어보려 합니다.| manifest.ts먼저 pwa를 적용하기 위해서는 manifest라는 json 파일을 통해서 앱의 이름, 아이콘,기타 설명 등등을 설정해 줘야 사용할 수 있습니다. 따라서 우선적으로 해야 할 부분은 manifest파일을 만들고, 설정을 입력하고,html의 head태그 안에 아래와 같이 link태드를 넣어주면 됩니다. 하지만 Next.js에서는 직접 manifest.json을 만들고 link를 걸어줄 필요가 없고,공식문서를 보면 manifest.ts파일을 통해 자동으로 manifest를 생성하고,자동..

보통 웹 개발을 진행할 때 로컬 환경에서의 개발 주소는대부분 http://localhost 이런 식으로 되어 있는 경우가 많습니다. 일반적으로 개발을 진행할 때에는 문제가 되지 않지만 쿠키를 사용하는 경우secure 속성으로 인해 http에서 쿠키를 사용하지 못하는 경우가 있습니다. 이럴 경우 로컬 개발 환경에 https를 적용하여 개발을 진행할 수 있습니다.| mkcerthttps를 적용하기 위해서는 TLS/SSL 인증서가 필요합니다.mkcert는 자체 서명된 인증서를 만들어 주고,이를 신뢰할 수 있도록 로컬 CA(인증 기관)를 설치하고 관리합니다.따라서 개발 중 보안 경고 없이 https를 사용할 수 있도록 합니다. 먼저 mkcert를 설치해 줍니다.리눅스brew install mkcert윈도우cho..