본문 바로가기

전체 글

 (31)
주 3천건이 찍히는 에러가 발생했다 DataDog에서 주 단위 약 3천 건의 특정 에러가 찍히고 있는 것을 발견했다.Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead. 왜 서버 함수가 왜 렌더 중에 찍히는걸까. 원인은 useSuspenseQuery를 사용하는 부분에 있었다. AI에게 검수를 시키자 suspensQuery의 queryFn에 ServerAction이 들어가있기에 이걸 useQuery로 바꾸라고 했다. 근데 뭔가 의아했다. 어떻게 useQuery로 변경하는게 문제를 해결해주는거지? ..
스스로가 한심해서 견딜 수가 없었다. 쪽팔려야 성장한다. 이 감정을 까먹고 싶지 않기에 용기를 내서 나의 부족함을 제대로 마주하려한다. 얼마 전, 굉장히 창피한 일이 있었다. 정말 좋아하던 개발자분이 있었는데, 운좋게 그 분을 직접 만나게 되었다. 그 분을 좋아하는 만큼 좋은 인상을 드리고 싶었고, 긴장도 많이 했던 것 같다. 이런 저런 이야기를 하다, 내가 최근 겪은 문제와 해결에 대해 말하는 시간을 가지게 되었는데, 아니 웬걸 머리가 새하얘졌다. 그렇게 들여다 봤었던 로그 한 문장도 생각나지 않았다.(지금까지도 그 때를 생각하면 공황오는 것처럼 심장이 뛴다;) 떨어서 그랬다는 변명을 하려는 건 아니고, 그 때 나는 깨달았다. 2년 전에 분명 성장하고 싶다고 퇴사하고 지금까지 공부해왔는데... 웬걸 나는 아직도 얼마전 겪은 문제 조차 제대..
토스 Frontend Fundamentals 모의고사 후기 우연한 기회로 Fundamentals 모의고사에 참여하게 됐다. 요즘 회사 일이 바빠 망설임도 있었지만, 결과적으로는 참여하길 정말 잘했다. 빨리 3회차가 시작되길 기다릴만큼... 배운 것 1: UI를 먼저 보고, 구조를 새로 잡는다가장 크게 배운 건 복잡한 기존 코드를 고치려 달려드는 대신, 구현하고자 하는 UI를 먼저 바라보고 구조를 다시 짜는 방식이었다. 회사 업무에서도 바쁘게 쳐내다 보면 조그만 쓰레기들(부채)이 쌓이고, 리팩토링을 시도해도 이미 쌓인 쓰레기를 치우는 건 생각보다 훨씬 어렵다. 오히려 더 쓰레기장이 되기도 한다. 그 답답함을 자주 느꼈는데, "UI를 보고 structure를 다시 잡는다"는 접근이 그 문제의 해법이 될 수 있다는 걸 이번에 배웠다. 예를 들어 다음과 같은 화면이 있..
왜 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 환경에서 이러한 성능 문제를 해결하기 위해 다양한 최적..

티스토리툴바