코드분할로 초기로딩속도 개선하기

문제상황전월세 실거래가 공공데이터를 활용한 지도 서비스(대방)은 SPA(Single Page Application)로 설계되었습니다. SPA란 하나의 HTML 페이지로 실행되는 웹 애플리케이션으로, 최초 페이지 로딩 후 JavaScript를 통해 동적으로 페이지 내용을 갱신합니다. 따라서, 동적이고 사용자와 상호작용이 많은 앱을 구현하는데 적절하지만, 처음 접속시 모든 JavaScript를 파일을 다운로드 해야함으로 첫 페이지 로딩이 오래걸린다는 단점이 있습니다. 특히 지도 서비스인 대방은 외부 지도API를 불러오는데 추가적인 시간이 소요되므로, 초기 로딩을 단축하여 웹 성능(Web Performance)를 향상시키는 것이 중요했습니다.번들링 (Bundling)우리가 코드를 import 문법이나 requ..

• format_list_bulleted 회고
• · 2025. 3. 9.

shadcn/ui로 살펴보는 좋은 프론트엔드 컴포넌트 패턴

프로젝트 목표 설정하기전국 수영인들을 위한 수영장 정보 사이트 어푸! 개발을 시작하면서, 이번 프로젝트를 통해 무엇을 얻을 수 있을지 고민한 끝에 다음과 같은 목표를 설정했습니다.애자일 방법론 적용: 빠르게 프로덕트를 개발하고 검증하며 지속적으로 보완한다.Next.js 학습: 첫 Next.js 프로젝트인 만큼, Next.js의 핵심 개념과 문법 학습에 집중한다.팀 협업 강화: 앱 설계와 태스크 관리에 집중하여 팀의 효율적인 협업을 지원한다.이러한 목표를 달성하기 위해, 개별 컴포넌트 구현에 시간을 쏟기보다는 컴포넌트 라이브러리를 활용하여 개발 속도를 높이는 방안을 고려했습니다. 마침 멘토님께서도 "컴포넌트 라이브러리 사용을 통해 재사용 가능한 컴포넌트 설계 방법을 배울 수 있다"고 조언해주셨습니다. 이러..

• format_list_bulleted 회고
• · 2025. 3. 2.

DB에서 랜덤한 요소 불러오기

배경음악 인기도 맞추기 게임 스포티게서를 개발하면서, DB에서 랜덤한 요소를 가져올 필요가 있었습니다. 게임의 진행방식이 두가지 랜덤한 요소 중 인기도가 높은 요소를 맞추는 게임이었기 때문입니다. 단순해 보이는 "랜덤"이라는 개념 뒤에 숨겨진 기술적 고민과 해결 과정을 공유하고자 합니다. 스포티게서는 NoSQL DB인 파이어베이스의 파이어스토어를 사용했기에 컬렉션과 문서라는 용어를 사용하지만, 관계형 DB의 테이블과 행으로 이해하셔도 무방합니다.가장 쉬운 방법, 하지만…컬렉션의 총 문서갯수 가져오기 (예 : 350개)총 문서갯수 내에서 랜덤한 숫자 생성하기 (예 : 1~350중에 아무 숫자 → 53)해당 번호의 문서 가져오기 (예 : 53번째 문서 불러오기)가장 직관적으로 떠올릴 수 있는 방법이지만, 심..

• format_list_bulleted 회고
• · 2025. 2. 27.