목표: 반응형, 검색 및 필터 기능을 갖춘 YouTube 목업 사이트 제작
기술 스택: HTML, CSS, JavaScript (Tailswind)
주요 기능: 다크모드, 사이드바 토글, 검색, 카테고리 필터, YouTube API 연동
- 고정 헤더 (햄버거 버튼, 로고, 검색창, 유저 아이콘)
- 유튜브 API를 통한 검색 기능
- 썸네일, 제목, 채널명, 조회수 표시
- 기본 다크모드 적용(버튼을 통해 전환)
- 모바일/태블릿/PC 반응형 지원
[헤더]
[사이드바] [카테고리 필터]
[메인 영상 그리드]
- 기본 구조 작성
- 헤더, 사이드바, 메인 그리드 구현
- 다크모드 스타일 적용
- 반응형 대응
목표: YouTube 목업 사이트 제작
사용 기술: HTML, CSS, JavaScript (Vanilla)
초기 방향성:
- 외부 프레임워크 없이 순수 구현
- 다크모드 기본 적용
- 반응형 화면 대응
- 헤더: 고정 헤더
- 사이드바: 80px
- 메인: 영상 카드 그리드 (auto-fill grid)
결정사항: 헤더와 사이드바는 항상 고정
- body.dark 클래스를 기본 적용
- 전체 요소에 다크모드 색상 적용
문제: 다크모드에서 hover 시 색상 깨짐 문제 발생
해결: transition 적용으로 부드럽게 수정
- 인기 동영상 호출 (videos?chart=mostPopular)
- 검색 API 연결
- 기본 검색 기능만 사용
- 무한 스크롤 시도했으나 사이트 속도 저하
- 적게 했을 때 VideoCard가 화면을 다 채우지 못해 억지로 크기가 커지는 상황 발생
결정사항: 동영상 50개만 로드로 변경 → 화면을 다 채울 수 있었음, but, 필터링하면 그대로 VideoCard가 너무 커짐…
- 크기에 맞게
문제: 헤더/카테고리 스크롤 시 충돌 문제
해결: position: fixed + margin-top 조정
- 검색창과 버튼 높이 통일
- 카테고리 버튼 반응형 스타일 적용
| 문제 | 원인 | 해결 방법 |
|---|---|---|
| CORS 오류 | API 요청 시 보안 정책 문제 | 자동완성 기능 제외, 기본 검색만 사용 |
| 무한 스크롤 성능 저하 + 적게했을시 VideoCard 커짐 | 과도한 API 요청 및 렌더링 부담 + | |
| 화면을 채우기 위함 | 동영상 50개만 고정 로드 | |
| 헤더-카테고리 충돌 | 둘 다 고정 위치 설정 부재 | position: fixed 적용 후 margin 조정 |
| 다크모드 시 Nav와 Header | hover 색상 변화 없음 | transition 추가로 부드럽게 전환 |
| 햄버거-로고 높이 불일치 | flex 정렬 미흡 | flex + height 수치 맞춤 |
- 정기적인 팀 회의 진행:
- 프로젝트 진행 상황을 공유하고, 각 팀원의 작업 내용을 점검
- 개발 중 발생한 문제점 및 개선 아이디어를 논의
- 코드 리뷰 수행:
- 작성된 코드를 서로 검토하여 품질과 일관성을 확인
- 코드 리뷰를 통해 각자 만든 코드를 비교하고 성능 최적화 제안
- 코드 가독성 향상을 위한 리팩토링 제안 및 적용
"올바른 설계와 일관된 원칙으로 사이트를 완성했다. 팀 회의와 코드 리뷰를 통해 문제를 빠르게 인식하고 해결하는 과정이 핵심이었다."