74. Adding the Template
npm create vue@latest
앱 개발 시작
- HTML과 CSS 추가를 위한 준비
- 제공된 ZIP 파일에는 Tailwind로 만들어진 정적 HTML 템플릿 포함
프로젝트 설정
- 프로젝트 내 'Template' 디렉토리 생성 후 ZIP 파일 내용을 여기에 추가
- Vue 애플리케이션으로 HTML을 통합하는 과정
Visual Studio Code 작업
- 기존 App 컴포넌트에서 스크립트, 템플릿, 스타일 블록 제거
- 정적 템플릿의 HTML을 App 컴포넌트에 복사
- components 디렉토리의 컴포넌트는 삭제 (단, 'tests' 디렉토리는 유지)
- 템플릿 구조:
- 헤더 섹션: 네비게이션 메뉴와 검색 폼 포함.
- 소개 섹션: 페이지 개요 제공.
- 주요 콘텐츠 섹션: 각 페이지마다 다른 HTML을 가짐.
- 플레이어 섹션: 간단한 오디오 플레이어 기능.
- 인증 모달 섹션: 로그인 및 등록 양식 포함.
- HTML 통합:
- 정적 템플릿에서 헤더부터 인증 모달까지의 HTML을 복사하여 'app' 컴포넌트에 붙여넣기.
- 브라우저에서 확인하고 에러 수정.
- 다음 단계:
- 다음 강의에서 CSS 로딩 및 추가 작업 진행 예정.