팀 프로젝트: 영화 검색 사이트 만들기 🎥당무땡(당신은 지금 무-비가 땡긴다)

 

1. 제목 및 소개

제목:
🎥 당무땡 - 바닐라 자바스크립트로 만든 영화 검색 사이트 프로젝트

 

소개:
8일간의 짧은 프로젝트 기간 동안 팀원들과 협력하여 밝고 귀여운 색감의 영화 검색 사이트를 만들었습니다. 당무땡은 TMDB openAPI를 활용해 다양한 영화 정보를 제공합니다. 사용자는 카테고리별로 영화를 검색하고, 리뷰를 남길 수 있습니다.

---

2. 프로젝트 개요

프로젝트 설명:
당무땡은 사용자에게 다양한 영화 정보를 제공하기 위해 TMDB openAPI를 사용하여 제작된 웹 사이트입니다. 사용자는 영화 제목 검색과 카테고리별 슬라이드 버튼을 통해 다양한 영화 리스트를 확인할 수 있습니다. 각 영화의 상세 페이지에서 리뷰를 작성, 수정, 삭제할 수 있습니다.

• 프로젝트 링크

---

3. 개발 과정

프로젝트 기간:
2024년 7월 31일 (수) - 8월 7일 (수), 총 8일

 

맴버 구성 및 역할:

• 정수희(팀장): 메인 페이지 레이아웃 설계, 리뷰 기능 구현(작성, 수정, 삭제), 자바스크립트 모듈화
• 유재희: 영화 ID별 API 요청 처리, 상세 페이지 구성 및 연결
• 장세희: 메인 페이지 카드 생성, API 요청 처리, 카드 Hover 시 상세정보 표시
• 권다정: 메인 페이지 영화 목록 슬라이드 기능 구현

와이어 프레임:

• Figma에서 보기

---

4. 프로젝트 화면 구성

메인 페이지:
사용자가 다양한 영화 목록을 카테고리별로 탐색할 수 있도록 구성하였습니다. 슬라이드 기능을 통해 다양한 영화를 쉽게 탐색할 수 있습니다.

상세 페이지:
영화의 세부 정보를 제공하며, 사용자가 영화에 대해 더 깊이 알 수 있도록 설계되었습니다.

한줄평 (CRUD):
사용자가 영화에 대한 리뷰를 남길 수 있도록 한줄평 기능을 제공하며, 작성된 리뷰는 수정 및 삭제가 가능합니다.

---

5. 트러블슈팅

1. 슬라이드 오류:
카드가 포함된 슬라이드 박스의 left 값을 조정하여 이동하는 과정에서 카드가 보이지 않는 문제가 발생했습니다. 개발자 도구의 브레이크 포인트를 활용하여 디버깅한 결과, 함수 내부에서 초기값 설정 오류가 발견되어 이를 수정했습니다.

 

2. 카드 Hover 효과 스크립트 충돌:
줄거리 div를 추가하면서 기존에 잘 작동하던 Hover 효과가 어그러지는 문제가 발생했습니다. 클래스와 ID 값을 통일하여 CSS를 수정하고, 스크립트와 변수명을 구조에 맞게 변경하여 문제를 해결했습니다.

 

3. 상세 페이지 연결 및 검색 기능 초기화 문제:
앞서 변경된 div 구조와 클래스 및 ID 명칭의 변경으로 검색 기능이 작동하지 않았습니다. 이 문제는 스크립트를 구조에 맞춰 재설정하여 해결했습니다.

 

4. 기타 문제들:

다양한 Git 오류로 인해 코드가 손상된 사례가 있었고, 비동기 처리 미숙으로 인한 DOM 로드 문제도 발생했습니다. 이는 지속적인 테스트와 팀 간의 긴밀한 커뮤니케이션으로 해결했습니다.

---

6. 개발 환경

 

기술 스택 및 도구:

• 프로그래밍 언어 및 라이브러리:
  • 바닐라 자바스크립트, HTML5, CSS3
• 데이터베이스:
  • 로컬 스토리지
• 개발 환경:
  • Visual Studio Code, Git, GitHub
• 커뮤니케이션 및 협업 도구:
  • Figma, Slack, Notion, Zep

---

결론 및 소감

이번 당무땡 프로젝트는 짧은 기간 내에 다양한 기능을 구현하고, 여러 문제를 해결하는 귀중한 경험이었습니다. 팀원 모두의 헌신적인 노력과 협력 덕분에 성공적으로 프로젝트를 마칠 수 있었습니다. KPT 회고를 통해 프로젝트를 돌아보고 앞으로의 개선 방향을 정리했습니다.

Keep - 현재 만족하고 있는 부분

• 원활한 소통:
  프로젝트 진행 상황을 팀원들과 자주 공유하면서 발생하는 문제를 함께 해결할 수 있었습니다. 이는 효율적인 협업의 기반이 되었습니다.
• 상세한 사전 기획:
  와이어 프레임을 통해 프로젝트의 방향성과 컨셉을 명확히 정리하여 큰 도움이 되었습니다. 이를 통해 각자의 역할을 명확히 이해하고 수행할 수 있었습니다.
• 업무 분담:
  한 사람에게 과중한 업무가 몰리지 않도록 잘 분담하였고, 분담으로 인한 충돌은 원활한 소통을 통해 해결했습니다.

Problem - 불편하게 느끼는 부분

• 코드 컨벤션:
  Git 커밋 메시지를 통일하지 못해 변경된 부분을 한눈에 파악하기 어려웠습니다.
• 테스트 콘솔:
  개발 중 사용했던 테스트 콘솔을 제거하지 않아 메모리를 차지하고 불필요한 정보가 노출되었습니다.
• 잦은 충돌:
  미숙한 Git 사용과 파일 분할의 부족으로 인해 코드 충돌이 빈번히 발생했습니다.

Try - Problem에 대한 해결책, 당장 실행 가능한 것

• 테스트 콘솔:
  개발 후 불필요한 콘솔 로그는 즉시 제거하여 메모리를 확보하고, 깔끔한 코드를 유지합니다.
• 코드 컨벤션:
  작업 전 코드 컨벤션을 팀 내 회의를 통해 결정하고 문서화하여 일관성을 유지합니다.
• 잦은 충돌:
  변수명, 클래스, ID 명을 사전에 통일하여 충돌을 최소화하고, Git 사용법에 대한 교육 자료를 준비하여 팀원 간에 공유합니다.