React는 가장 많이 사용되는 프론트엔드 라이브러리다. 하지만 정작 React의 내부 동작 원리를 정확히 이해하고 사용하는 개발자는 많지 않다. 나 역시 페이지나 컴포넌트를 만들고 상태를 관리하는 것에만 집중했지, React가 어떻게 효율적으로 DOM을 업데이트하는지에 대해서는 깊이 생각해보지 않았다. 면접 스터디를 하면서 React의 핵심 동작 원리를 다시 정리하며 공부해보기로 했다. React 공식문서와 MDN 문서 등을 살펴보며 정리한 내용이다 :) 목차브라우저 렌더링 과정과 업데이트 시점React를 사용하는 이유React의 렌더링 프로세스재조정(Reconciliation) 과정Virtual DOM과 실제 DOMDiffing 알고리즘Fiber 아키텍처Virtual DOM의 한계점정리 브라우저 ..

안녕하세요👋 요즘 사이드 프로젝트로 '그리미티'라는 플랫폼을 개발하고 있습니다.해당 프로젝트에서 검색 기능을 구현하면서 검색한 키워드를 결과 리스트 내에서 강조(하이라이트) 하는 기능을 새로 도입하게 되었는데요. 처음에는 검색어를 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..

Next.js 강의를 수강하던 도중 다음과 같은 에러가 발생했습니다. Error: Route "/movies/[id]" used `params.id`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at MovieDetail (src/app/(movies)/movies/[id]/page.tsx:6:10)  강의 내용과 버전차이가 있어서 발생한 문제로 파악되어 공식문서를 참고했습니다.주어진 오류는 params를 비동기적으로 처리해야 한다는 것을 의미합니다.  경고 발생 원인코드 내에서 동적 렌더링을 사용하는 API에 접근할 때 발생합니다.이는..

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에 대해 알아..

타입스크립트란?  자바스크립트를 더 안전하게 사용할 수 있도록 타입 관련 기능들을 추가한 오픈소스 언어이다.자바스크립트의 확장판이라고 해도 무방하다.  타입스크립트를 왜 써야할까?리액트를 공부하면서 자바스크립트를 많이 사용해보았다. 전공 공부를 하며 Python, C++, JAVA와 같은 언어들을 배워보았는데, 비교적 입문하기 쉬운 편에 속한다고 생각한다.(물론 깊이 들어가면 들어갈수록 모든 언어가 어렵다...🥹)  Node.js는 자바스크립트의 런타임 환경으로, 이를 이용해 자바스크립트 코드를 읽어서 실행할 수 있다.웹브라우저 뿐만 아니라 어디서든 자바스크립트를 통해 구동이 가능해졌다.지금도 웹서버나 앱, 데스크탑 앱 등을 만드는데 활용되고 있다. 그런데 복잡한 상황이나 대규모 프로그램에서 발생하는 ..

스토리북이란?최근 스토리북(Storybook)에 대해 알게되었다.스토리북이란 FE 개발에서 필수적인 컴포넌트를 문서화하고 시각화할 수 있는 도구이다.props와 onClick 등 다양한 매개변수에 대한 테스트도 가능하며, 페이지 자체도 구동할 수 있다.또 문서화된 스토리북 자체를 배포해서 협업에 유용하게 사용할 수 있다! 물론 정석적으로는 스토리북과 함께 개발하는 것이 베스트겠지만공부를 위해 현재 진행하고 있는 프로젝트에 스토리북을 임시로 설치해봤다.이번 연습을 통해 스토리북을 익혀서 다음 프로젝트에 적용할 수 있었으면 좋겠다.  설치 방법npx storybook@latest init 실행방법npm run storybook 실행 후 localhost 6006번에 접속하면 된다.다음과 같은 화면이 뜬다면 ..

🤔문제 상황 최근 인터넷 프로그래밍 과목을 수강하면서 간단한 SpringBoot + Vue.js + MySQL을 활용하는 프로젝트 과제를 수행했다. 그 전까지는 간단한 과제여서 덜 불편했으나, 이것저것 다양한 확장자를 다루다보니폴더에 포매터를 하나만 설정하기에는 매우 부족하다는 생각이 들었다. 스프링부트 파일을 다룰 때에는 java 포매터를,Vue나 JavaScript에는 Prettier를 사용하고 싶었다.그래서 찾아보니 역시나 이를 한꺼번에 설정할 수 있는 방법이 있었다😊    😁해결 방법 바로바로 이를 해결하는 방법은?나처럼 vscode를 사용하고 있는 사람이라면 settings.json 파일을 수정하면 된다.먼저 설정하기 전 설치하고자 하는 포매터 확장을 미리 설치해야 한다.나는 Prettie..

비주얼 스튜디오 코드에서 npm 설치가 되지않는 문제가 발생했다.찾아보니 보안 종속성 관련 문제로 파악됐다. 이런 경우 npm audit 명령어를 실행하면, 해당 프로젝트에서 사용하는 모든 의존성 패키지들을 검사하여 보안 취약점이 있는 패키지들의 목록을 출력한다. 보안 취약점을 해결할 수 있는 패치 버전으로 의존성 패키지를 업데이트할 수 있다.    터미널 내용에 따르면 의존성 설치 후에 npm이 일부 보안 취약점을 발견했다고 한다. nth-check (High Severity): nth-check 패키지의 버전이 2.0.1보다 낮은 경우에는 불필요한 정규 표현식 복잡성이 발생할 수 있습니다. postcss (Moderate Severity): postcss 패키지의 버전이 8.4.31보다 낮은 경우에는..

자바스크립트란? 웹의 동작을 구현하는 객체 기반 언어 온클립 속성의 값으로 옴. 객체 객체: 이름(name)과 값(value)으로 구성된 프로퍼티의 정렬되지 않은 집합 객체의 프로퍼티 참조 객체이름.프로퍼티이름 또는 객체이름["프로퍼티이름"] 객체의 메소드 참조 객체이름.메소드이름() innerHTML 프로퍼티 선택 1. HTML 태그 이름 - getElementsByTagName() 2. 아이디(id)를 이용한 선택 - getElementById() 3. 클래스(class) - getElementsByClassName() 메 4. name 속성(attribute) - getElementByName() 5. CSS 선택자(아이디, 클래스, 속성, 속성값 등) - querySelectorAll() 6. H..