🚀 목표

⬇️ 아래의 항목은 예시입니다. 여러분의 목표를 적어주세요! 목표는 수치를 포함해 최대한 구체적으로 적는 것이 좋습니다.

<aside> 🎯 이번 클론 코딩 프로젝트에서 꼭 달성할 것

• 🔥 필수 구현 기능 3가지 모두 구현하기
• 피그마 웹으로 웹 디자인 해보기
• 💻 100% 반응형 페이지로 만들기
• 페이지마다 routing 기능 설정하기
• 음악 api를 이용하여 비동기 처리하기 </aside>

⌨️ Activities(구체적인 활동)

1. 디자인 구상 하기

• 어떤 디자인으로 구성할 것인가 사이트 검색하면서 템플릿 확인 해보기
• 디자인이 정해지면 피그마로 디자인을 구성할 수 있는 프로토타입을 만들어 보기(CSS 설정하기)
  • margin 및 padding, 요소 크기와 같은 수치 설정
  • 반응형 웹도 설정 해보기

2. HTML, CSS, Javascript 설정

• 디렉터리 구조를 효율적으로 관리 설정하기
• 피그마 디자인을 보고 html 요소 설정 및 css 설정하기, class명 설정하기
• 반응형 웹을 만들기 위해 pc 및 모바일 화면 사이즈 및 미디어 쿼리 공부하기
• html요소에 맞게 javascript에서 dom 이벤트 설정하기, state설정하기, routing설정하기
  • 요소에 맞는 이벤트 공부하기
  • 데이터가 변경 될때 어떻게 처리해야 하는지 생각해보기
  • 일단 멜론 뮤직 플레이어, 인기곡 차트, 플레이 리스트의 routing 설정

3. 비동기 데이터 처리 및 node로 localhost:3000설정하기

• api 데이터를 사용하려면 자바스크립트의 비동기 처리 방식 공부하기
• spotify api로 데이터 처리하기 (한국 음악의 top100,
• 만일 서버로 배포할 시 react처럼 서버를 생성, 서버를 생성하기 위해 node로 서버 구축하는 법 공부하기