안녕하세요👋 요즘 사이드 프로젝트로 '그리미티'라는 플랫폼을 개발하고 있습니다.해당 프로젝트에서 검색 기능을 구현하면서 검색한 키워드를 결과 리스트 내에서 강조(하이라이트) 하는 기능을 새로 도입하게 되었는데요. 처음에는 검색어를 props로 하나하나 내려서 강조하려고 했지만,컴포넌트가 많아질수록 관리가 어려워질 것이라는 생각이 들었습니다.따라서 Context API를 사용해 검색 키워드와 하이라이트 함수를 전역으로 공유하는 방법을 선택하였습니다! Context를 사용한 이유?검색 결과는 한 번의 API 호출로 처리됨사용자가 검색어를 입력하면, 해당 검색어에 맞는 결과를 API 호출로 받아옵니다. 이 결과는 검색어가 바뀔 때마다 새로운 데이터를 가져와서 보여주는 방식이기 때문에 어차피 하위 컴포넌트들이..

프론트엔드에서 사용자 경험을 향상시키는 데 있어 낙관적 업데이트는 매우 중요한 전략입니다. 이번 포스팅에서는 낙관적 업데이트가 무엇인지, 그리고 이를 실제 프로젝트에 어떻게 적용할 수 있는지를 직접 구현해보며 정리해봤습니다. 프로젝트 배포 링크https://react-opimistic-update-psi.vercel.app/ Vite + React + TS react-opimistic-update-psi.vercel.app  🔍 낙관적 업데이트란?낙관적 업데이트는 요청이 성공할 것이라고 '낙관적으로' 가정하고, UI를 먼저 업데이트한 뒤, 나중에 서버 응답에 따라 결과를 반영하거나 롤백하는 방식입니다.예를 들어, 좋아요 버튼을 클릭했을 때 실제 요청 결과를 기다리는 대신:하트 아이콘이 즉시 활성화(채워..

리액트 기반 세로로 배치된 5개의 이미지들을 사용자가 스크롤함에 따라서 나타나도록 애니메이션을 구현해봅시다~!먼저 리액트에서 애니메이션을 구현하는 방법은 다양하게 존재하지만, 외부 라이브러리를 사용하지 않는 방법과 기본 API만 사용하는 방법을 포함해 총 3가지로 구현해보았습니다. Result깃허브 링크: https://github.com/abyss-s/react-scroll-animation배포 링크: https://react-scroll-animation-orcin.vercel.app/ 1. IntersectionObserverIntersectionObserver는 순수 JavaScript API로, 라이브러리에 의존하지 않고도 스크롤 애니메이션을 구현할 수 있습니다. Intersection Obse..

lighthouse는 웹/앱 브라우저의 성능과 품질을 측정시키는 데 사용할 수 있는 오픈소스 툴이다.개발자도구(F12)를 열고, 상단 메뉴에서 Lighthouse를 선택한 후 보고서를 생성하면 된다.자동으로 성능, 접근성, SEO 등에 대한 분석을 알아서 시작하고 분석 결과를 확인 할수 있다.  Lighthouse - Chrome 웹 스토어Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.chromewebstore.google.com  개발 초기설정 연습을 하던 레포에서 한 번 실험 삼아 돌려봤는데 생각보다 성능이 좋지 않았다.  딱히 코드를 많..

최근 플젝할 일이 많아졌는데 프론트엔드 레포 초기 구성은 보통 나의 몫이다.프로젝트마다 레포 설정을 이것저것 건드리는 것은 매우 귀찮은 일이다...ㅎ 따라서 여러 프로젝트에서 활용할 수 있을만한 default config Repo를 만들면 어떨까하는 생각이 들었다.그래서 먼저 FE 레포를 초기 구성해보고, 이와 함께 tailwind css를 도입해보기로 했다.아직 한 번도 사용해본적이 없어서 연습할 겸 공부해보기로~😁  React & Vite 공식문서를 통해 쉽게 설정하는 방법을 확인할 수 있다.npm create vite@latestnpm create vite@latest my-react-app -- --template reactTailwindCSS + PostCSS & AutoFixer에 대해 알아..