오늘의 개발 회고 📝
📌 주요 작업 내용
비동기 데이터를 활용한 동적 UI 컴포넌트 구현
오늘은 바닐라 JavaScript로 SPA(Single Page Application)를 개발하면서 비동기 API 데이터를 동적으로 UI에 반영하는 작업을 진행했습니다.
🔧 구현한 기능
Homepage 컴포넌트 구조 설계
- HTML 템플릿 문자열을 반환하는 함수형 컴포넌트
- TailwindCSS를 활용한 반응형 레이아웃
- 검색창, 필터 옵션, 상품 그리드 등 완전한 e-commerce UI
- 비동기 카테고리 데이터 처리
getCategories() API로부터 카테고리 데이터 획득
- Promise 기반 비동기 데이터 처리
- 동적 버튼 생성 및 DOM 업데이트
- 컴포넌트 분리 및 모듈화
updateCategoryButtons.js 별도 모듈로 분리
- 재사용 가능한 함수형 컴포넌트 구조
- 관심사 분리를 통한 코드 가독성 향상
🚫 마주친 문제들
비동기 데이터와 동기적 템플릿의 충돌
// ❌ 잘못된 접근
const categories = getCategories(); // Promise 객체
const categoriesName = Object.keys(categories); // 빈 배열템플릿 내 함수 호출 오류
// ❌ 잘못된 접근
document.body.innerHTML = `
${Homepage()}
${updateCategoryButtons()} // Promise가 [object Promise]로 렌더링
`;💡 해결 과정
비동기 데이터 처리 방식 학습
- async/await 패턴 이해
- Promise 객체의 특성 파악
- 비동기 함수의 실행 타이밍 중요성 인식
동적 UI 업데이트 패턴 적용
// ✅ 올바른 접근
// 1. HTML 먼저 렌더링
document.body.innerHTML = Homepage();
// 2. DOM 생성 후 동적 업데이트
updateCategoryButtons();모듈 분리를 통한 관심사 분리
- UI 렌더링 로직과 데이터 처리 로직 분리
- 재사용 가능한 컴포넌트 설계
🎯 얻은 인사이트
비동기 프로그래밍의 복잡성
- 단순해 보이는 데이터 호출도 타이밍이 중요함
- UI와 데이터의 라이프사이클을 고려한 설계 필요
바닐라 JS의 한계와 가능성
- 프레임워크 없이도 컴포넌트 기반 개발 가능
- 하지만 상태 관리와 데이터 바인딩의 복잡성 존재
코드 구조의 중요성
- 작은 프로젝트라도 모듈화의 중요성
- 관심사 분리를 통한 유지보수성 향상
