React (10) 썸네일형 리스트형 [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을 처리하도록 구성해야 합니다. 우선, 딥링크를 설정.. [ReactNative] react-query refetch가 안되는 문제와 해결 방법 문제 상황 리액트 쿼리는 기본적으로 화면이 focus될 경우, refetch되는 속성을 가지고 있다. 그래서 화면을 이탈했다 돌아오면, stale시간과 상관없이 다시 새로운 데이터로 fetching 되게 된다. 하지만 리액트 네이티브에선 화면의 focusing 여부를 알지 못했다. 그래서 아무리 다른 페이지에 갔다 돌아와도, 데이터가 변경이 되어도, 리액트 쿼리는 계속해서 이전의 데이터만을 보여주게 된다. 이를 어떻게 해결할 수 있을까? 해결 방법 직접 custom hook을 구현하는 것으로 해결할 수 있다! 스크린이 focus 될 때마다, react query의 refetch 함수를 실행시키는 훅을 만들 수 있다. 커스텀 훅에 원하는 refetch 함수를 파라미터로 넘겨주도록 만들어주면 된다. impo.. [ReactNative] ios .env파일 수정 후 적용이 안되는 현상 XCode -> Product -> Clean Build Folder 후, 재빌드하면 해결됩니다⭐️ React Native에서 웹뷰(react-native-webview)를 사용할 때, 고려해야할 것들(#삽질, #Next.js) 들어가며 이 글은 리액트 네이티브에서 웹뷰만으로 서비스 개발을 하다가 큰 문제에 부딪혀 프레임워크 자체를 변경하게된 일을 작성한 회고록입니다. Web-View만으로 리액트 네이티브 개발을 생각중인 분들에게 도움이 될 것이라 생각합니다. 아래부턴 간결한 문장을 위해 평어로 진행하겠습니다. Web-View 개발을 선택한 이유 내가 만들고자 하는 서비스는 소셜로그인으로 회원가입이 되고, 카카오톡처럼 핸드폰의 연락처를 가져와 친구를 만들고, 쇼핑에 결제까지 되는 서비스이다. 그래서 SSR, CSR 등 각 페이지에 맞는 렌더링 기법을 선택할 수 있는 Next.js를 활용하면, 빠른 속도 경험을 유저에게 제공할 수 있을 거라 생각했고, Next.js를 웹 프레임워크로 선택했다. 이렇게 web을 만들고, 해당 web.. 이전 1 2 다음
