본문 바로가기

전체 글

 (28)
왜 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를 처음 사용해본 경험과 더불어, 번들러라는 도구 자체..
[2편] 3D 웹게임 렌더링 최적화: 초기 로드 시간 및 커버리지 개선 들어가며[1편] 3D 웹게임 렌더링 최적화에 이은 초기 로드 속도 및 커버리지 개선 방법을 이어 공유하고자 합니다. 1편에서 정리한 대로, scripting 시간은 물리연산 최적화, LOD 적용으로 개선할 수 있었지만, 여전히 사이트 접속 시 초기 로드 시간이 다소 오래걸리는 문제는 해결되지 못했습니다. 이를 해결하기 위해서 어떻게 진단을 했고, 어떤 최적화 작업들을 수행했으며 결과는 얼마나 개선되었는지를 공유하고자 합니다. 저와 같은 문제에 부딪힌 분들께 도움이 되었으면 좋겠습니다. 성능 저하 원인 파악 초기 성능 분석 결과, 다음과 같은 문제점들이 발견되었습니다:LCP(Largest Contentful Paint)가 6초로 매우 느린 로딩 시간코드 커버리지가 약 65%로, 실제 사용되지 않는 코드가 ..
[1편] 3D 웹게임 렌더링 최적화: 33FPS -> 61FPS 성능 개선 사례 들어가며기본 게임 기능 개발을 완료하고, Chrome DevTools Performance 탭으로 측정해 본 결과는 암담했습니다. JavaScript 실행 시간이 20.9초로 매우 높았고, 큰 번들 사이즈로 인한 초기 로딩 지연이 있었습니다. JavaScript scripting이 전체 실행 시간의 59.6%를 차지했고, 커버리지 분석 결과 상당수의 미사용 코드가 발견되었습니다.이러한 성능 이슈는 게임플레이에 직접적인 영향을 미쳤습니다. 목표했던 60fps의 부드러운 애니메이션이 30fps 이하로 떨어지는 프레임 드랍 현상이 발생했고, 유저의 게임 경험을 크게 저해했습니다. React Three Fiber, Rapier 물리엔진이 결합된 복잡한 3D 환경에서 이러한 성능 문제를 해결하기 위해 다양한 최적..
멀티플레이 게임에서 물리 연산, 어디서 처리하는 게 맞을까? 들어가며멀티플레이 게임 개발에서 물리 연산과 캐릭터 동작을 어디에서 처리할지를 결정하는 건 프로젝트의 핵심 과제 중 하나였습니다. 초기 설계에서는 백엔드가 모든 물리 연산을 담당하는 구조를 선택했습니다. 이 방식은 데이터 신뢰성과 치팅 방지 측면에서는 유리했지만, 구현 과정에서 여러 한계에 부딪혔는데요.이러한 문제를 해결하기 위해 프론트엔드가 물리 연산을 처리하고, 백엔드는 데이터 검증과 동기화에 집중하는 구조로 전환하게 되었습니다. 이 글에서는 해당 논의의 과정과 최종 결정을 내리게 된 이유를 공유하려 합니다. 백엔드에서의 물리 연산의 한계에 부딪힌 이유[1] 맵 구성과 충돌 판정의 복잡도- 맵 데이터 수작업 문제:프론트엔드에서는 3D 모델링 파일인 GLB를 React Three Fiber의 useGL..
가상 DOM과 실제 DOM의 차이: 정말 성능 향상이 있을까? 들어가며React는 가상 DOM 개념을 도입하여 DOM 업데이트 성능을 향상시킵니다. 실제 DOM과 비교했을 때, 가상 DOM은 UI의 변화 관리를 좀 더 효율적으로 처리할 수 있도록 돕습니다. 그러나 최근 모던 리액트 딥다이브를 읽고, 이러한 최적화가 항상 빠른 속도를 보장하지는 않는다는 사실을 알게되었습니다. 직접 실험한 결과에서도 큰 차이를 느끼기 어려웠을 정도인데, 과연 가상 DOM과 실제 DOM의 차이는 왜 중요하며, 어떤 상황에서 유용할까요?  실제 DOM과 가상 DOM의 역할브라우저의 DOM(Document Object Model)은 화면에 표시되는 최종 결과물입니다. 실제 DOM을 변경할 때마다 브라우저는 이를 렌더링하고, 새로 추가하거나 수정된 요소를 반영합니다. 이러한 과정은 복잡한 트..
palloc과 malloc의 차이점: 메모리 할당 구조 이해하기 들어가며Pintos 프로젝트의 4주간 여정이 마무리되었습니다. 흥미로운 부분도 많았지만, 모르는 것이 너무 많아 OS라는 깊은 바다에 빠져 허우적대는 기분이 들기도 했습니다. 그래서 4주 전으로 돌아가 다시 한 번 해보면 더 많은 것을 배울 수 있었을 텐데 하는 아쉬움도 남습니다. 지금이라도 배운 내용을 정리하며 완전히 내 것으로 만들기 위해, 이번 시간을 활용해 메모리 할당에 대해 글을 작성해보려 합니다. 특히, 처음 Virtual Memory 과제를 접하면서 malloc과 palloc의 개념이 혼동되었던 경험을 다루어 보겠습니다.  위의 함수는 page를 초기화하는 함수입니다. 처음 빨간 줄의 코드를 보았을 때, page는 palloc_get_page()으로 할당하는게 맞다고 생각했지만, malloc..

티스토리툴바