React (13) 썸네일형 리스트형 왜 React.js는 Vue.js보다 인기가 많을까? (+ 내부 동작 비교, 분석) 들어가며이번에 인턴 면접을 준비하며 Vue.js(Nuxt) 기반의 프로젝트를 경험하면서, Vue의 심플함에 매력을 느꼈습니다. html로 관심사가 분할되어 있는 부분은 마치 예전 Spring 기반 프로젝트의 Template Engine을 사용하는 것 같은 느낌을 받기도 했습니다. 그런데 현재 시장에서는 React가 압도적인 점유율을 보이고 있는데요. Vue는 러닝커브도 낮고, 내부 최적화도 훨씬 편리한데 왜 React가 더 인기를 끌게되었까요? 이 글에서 두 라이브러리의 특징을 비교하고, 분석해보려합니다. React와 Vue의 시장 점유율 우선 npm trends로 다운로드 수를 비교해보았는데요, 2025년 1월 19일 기준으로 약 6배가량 차이가 나는 것을 확인할 수 있습니다. 수치상으로는 React가.. React 배열에서 왜 key를 지정해줘야할까? (+ React Fiber, 고급테크닉) 들어가며React를 개발하다 보면 배열 요소에 key를 넣어야한다는 에러가 뜨곤합니다. 과거엔 단순히 배열에는 key를 넣어야 리렌더링이 발생하지 않는다 정도를 규칙으로 알고 있었습니다. 하지만 이 key의 존재 이유와 동작 방식을 깊이 이해한다면, React의 성능 최적화와 렌더링 과정을 좀 더 효과적으로 다룰 수 있습니다! 리액트 렌더링은 언제 일어날까요?우선 렌더링이 언제 일어나는지부터 알아보겠습니다. React에서 렌더링은 크게 두 가지의 경우에 발생합니다. 바로 최초 렌더링과 리렌더링인데, 이게 React 렌더링의 전부입니다. 최초 렌더링 (Initial Rendering)컴포넌트가 처음 마운트될 때 발생Virtual DOM 트리를 처음으로 생성실제 DOM에 전체 트리를 반영리렌더링 (Re-re.. 번들러란? Vite, Webpack 뭐가 다를까? 들어가며현대 웹 개발에서는 번들러가 거의 모든 프로젝트에서 기본적으로 사용됩니다. 하지만 번들러가 정확히 어떤 역할을 하고, 왜 필요한지에 대해 깊이 고민해본 경험은 많지 않았던 것 같습니다. 이전 프로젝트에서도 Webpack이나 다른 도구를 사용했지만, 단순히 "그냥 번들링해주는 도구" 정도로만 생각하고 있었습니다.그러다 이번 프로젝트에서 Vite를 번들러로 선택하게 되었고, 이를 활용해 최적화 작업까지 진행하며 번들러의 중요성과 webpack과의 차이에 대해 제대로 알아보게 되었습니다. Vite는 Webpack과는 다른 방식으로 동작하며, 특히 빠른 개발 환경을 제공한다는 점에서 많은 개발자들이 주목하고 있는 도구입니다. 이번 기회를 통해 Vite를 처음 사용해본 경험과 더불어, 번들러라는 도구 자체.. [1편] 3D 웹게임 렌더링 최적화: 33FPS -> 61FPS 성능 개선 사례 들어가며기본 게임 기능 개발을 완료하고, Chrome DevTools Performance 탭으로 측정해 본 결과는 암담했습니다. JavaScript 실행 시간이 20.9초로 매우 높았고, 큰 번들 사이즈로 인한 초기 로딩 지연이 있었습니다. JavaScript scripting이 전체 실행 시간의 59.6%를 차지했고, 커버리지 분석 결과 상당수의 미사용 코드가 발견되었습니다.이러한 성능 이슈는 게임플레이에 직접적인 영향을 미쳤습니다. 목표했던 60fps의 부드러운 애니메이션이 30fps 이하로 떨어지는 프레임 드랍 현상이 발생했고, 유저의 게임 경험을 크게 저해했습니다. React Three Fiber, Rapier 물리엔진이 결합된 복잡한 3D 환경에서 이러한 성능 문제를 해결하기 위해 다양한 최적.. 가상 DOM과 실제 DOM의 차이: 정말 성능 향상이 있을까? 들어가며React는 가상 DOM 개념을 도입하여 DOM 업데이트 성능을 향상시킵니다. 실제 DOM과 비교했을 때, 가상 DOM은 UI의 변화 관리를 좀 더 효율적으로 처리할 수 있도록 돕습니다. 그러나 최근 모던 리액트 딥다이브를 읽고, 이러한 최적화가 항상 빠른 속도를 보장하지는 않는다는 사실을 알게되었습니다. 직접 실험한 결과에서도 큰 차이를 느끼기 어려웠을 정도인데, 과연 가상 DOM과 실제 DOM의 차이는 왜 중요하며, 어떤 상황에서 유용할까요? 실제 DOM과 가상 DOM의 역할브라우저의 DOM(Document Object Model)은 화면에 표시되는 최종 결과물입니다. 실제 DOM을 변경할 때마다 브라우저는 이를 렌더링하고, 새로 추가하거나 수정된 요소를 반영합니다. 이러한 과정은 복잡한 트.. Next14 로컬폰트(LocalFont) 로딩으로 인한 LCP 문제 개선하기 들어가며웹 성능을 최적화하는 과정에서 중요한 측면 중 하나는 효율적인 폰트 로딩입니다. 이 글에서는 비효율적인 폰트 로딩으로 인해 발생한 LCP(Largest Contentful Paint) 문제를 해결하는 과정을 안내합니다. 다양한 폰트 형식 간의 차이점, 서브셋 사용의 장점, 그리고 이러한 개선 사항이 Next.js 14 버전을 사용하여 어떻게 구현되었는지 살펴보겠습니다. 문제 현상처음 성능 분석에서 웹사이트의 폰트 로딩에 큰 지연이 발생한다는 것을 확인했습니다. 아래의 성능 분석 스크린샷에서 볼 수 있듯이, LCP가 약 7초에 달해 전체 사용자 경험에 큰 영향을 미쳤습니다. 이러한 지연의 주원인은 비효율적인 폰트 파일 로딩이었습니다. 원인 분석 및 해결 과정부끄럽지만 저는 폰트 확장자에 대해 제대로.. 리액트 네이티브 테스팅: Maestro E2E 테스트와 유닛 테스트 이 글에선처음 접해보는 리액트 네이티브에서는 어떻게 테스팅을 진행해야할까 고민했고, 참여하고 있는 번역 활동에서 리액트 네이티브 테스팅에 관한 공식 문서를 번역하기도 했습니다. 이에 기초하여 리액트 네이티브에서 E2E테스트와 유닛테스트를 하는 방법을 소개하고자 합니다. 자동화 테스트 라이브러리 비교부터 Sentry, Maestro, Appium 중 Maestro을 선택한 이유, 실제 예제 코드 그리고 유닛 테스트 작성까지의 과정을 다룹니다. 자동화 테스트 라이브러리 비교리액트 네이티브 앱의 E2E 테스트를 위해 여러 라이브러리를 고려해볼 수 있습니다. 그 중 저는 Sentry, Appium, Maestro를 표로 비교해보겠습니다. SentryAppiumMaestro주 용도애플리케이션 모니터링 및 오류 추.. React Native에서 딥링크 처리 및 푸시 알림 최적화하기 이 글에선React Native에서 딥링크 처리와 푸시 알림 기능을 최적화하는 방법에 대해 알아볼 것입니다. 특히, Firebase의 Messaging과 Notifee를 함께 사용한 이유에 대해서도 다루고 있습니다. 딥링크 설정, 푸시 알림 설정, 그리고 최적화된 코드 구조를 통해 효율적인 리액트 네이티브 link routing과 푸시 알림을 구축하는 방법을 설명해보겠습니다. 1. 딥링크 처리하기딥링크는 사용자에게 특정 콘텐츠를 제공하기 위해 앱의 특정 화면으로 직접 이동할 수 있도록 도와줍니다. React Native에서 딥링크를 처리하려면 @react-navigation/native의 LinkingOptions를 설정하고, 앱이 열릴 때 해당 URL을 처리하도록 구성해야 합니다. 우선, 딥링크를 설정.. 이전 1 2 다음
