[React] React-Window를 활용해 DOM 성능 최적화 | DOM에 요소 800개가 추가된다고 ..?
·
🩵 React
문제 상황현재 BottomSheet를 활용하여 장소 정보를 표시하는 기능이 있습니다.그러나, 장소 리스트를 제공하는 API가 페이지네이션을 지원하지 않고, 한 번에 모든 데이터를 응답하는 구조입니. 이로 인해 DOM을 확인해보면 모든 장소 리스트가 한 번에 렌더링되는 문제가 발생합니다. 현재 데이터베이스에는 약 800개의 장소 정보가 저장되어 있으며, 최악의 경우 800개의 장소 컴포넌트가 모두 DOM에 추가될 수 있습니다.  이러한 문제는 다음과 같은 성능 저하를 초래할 수 있습니다.  1. 렌더링 성능 문제: DOM 노드가 과도하게 많아져 브라우저의 렌더링 성능이 저하됨. 2. 메모리 사용 증가: 불필요한 컴포넌트가 많아지면서 메모리 사용량이 급격히 증가함. 3. UX 저하: 스크롤이 버벅거리거나, ..
[⚓️Webpack] Webpack 커스터마이징을 통해 Vite 속도 따라잡기
·
⚓️ 개발환경
차세대 빌드 툴, Vite2020년 Vite 출시 이후 현재까지 Vite의 점유율이 빠르게 증가하고 있습니다.Webpack은 오랫동안 표준 빌드 툴로 자리잡았지만, 점점 많은 개발자들이 Vite로 전환하고 있습니다. 왜 빠를까?Vite가 빠른 이유는 기존 Webpack의 문제점을 해결하고 보다 효율적인 방식으로 모듈을 처리하기 때문입니다. Webpack프로젝트의 모든 파일을 번들링 한 후 실행 Vitedependencies와 source code 두 가지 카테고리로 나누어 개발 서버의 시작 시간 개선 dependencies개발 시 내용이 바뀌지 않을 일반적인 JavaScript 코드, 기존 번들러로는 몇 백개의 JavaScript 모듈을 갖고 있는 매우 큰 디펜던시에 대한 번들링 과정이 매우 비효율적이었..
[⚓️Webpack] CRA 없이 웹팩 프로젝트 만들기 | 웹팩의 시대는 끝났나 ? | 웹팩 커스터마이징
·
⚓️ 개발환경
Webpack의 시대는 갔다 ?지난 2월 14일, Create-React-App은 더 이상 사용할 수 없도록 지원이 중단되었습니다 (관련링크)  React는 공식적으로 새로운 리액트 앱 프로젝트를 생성할 때 Next.js 혹은 Remix 등의 프레임워크 툴을 활용해 만드는 것을 추천하고있습니다.  그렇다면, 프레임워크에 의존하지 않고 리액트 프로젝트를 만들 순 없을까요 ? 이에 대해서도 리액트는 대안책을 제시했습니다. (링크)   그러나 슬프게도 리액트가 제시하는 빌드 툴에는 webpack이 존재하지 않습니다.그렇다면, 현재 대부분의 개발자들이 webpack을 사용하지 않는 것일까요 ?  절대 아닙니다.  webpack은 무려 13년 전부터 사용된 번들러로, 2025년 현재까지도 높은 점유율을 차지하고 ..
[🐾놀멍 회고] 4. 10일 동안 640명이 쓴 서비스 만들기(2) | 서비스 배포 과정, 유레카 최종 프로젝트 우수상
·
기타
이 게시글은 이효린의 애자일 방법론 적용기시리즈 중 하나입니다.1.[🚖모여타 회고] 1. 좋은 팀원을 만나기까지 | 팀 구성, 팀원 모집의 과정2. [🚖모여타 회고] 2. 이름뿐인 애자일 | MVP? MXP!3.[🐾놀멍 회고] 3. 10일 동안 640명이 쓴 서비스 만들기(1) | 애자일 방법론(Scrum), 유레카 최종 프로젝트 우수상4. [🐾놀멍 회고] 4. 10일 동안 640명이 쓴 서비스 만들기(2) | 서비스 배포 과정, 유레카 최종 프로젝트 우수상  🎉 이제 배포 준비를 해보자 !1️⃣ 내부 QA이틀 간 내부 QA 및 버그 개선을 진행했습니다.이 과정에서 총 81개의 버그를 발견할 수 있었으며, 그중 약 92.8%에 해당하는 75개의 버그를 이틀 만에 모두 해결했습니다2️⃣ 알파 ..