81. Splitting the Template info Components
npm create vue@latest
이번 시간엔 애플리케이션을 더 작은 부분으로 나누는 방법을 배우도록 하겠습니다.
템플릿의 상단에는 '로그인 및 등록' 링크가 있습니다.
이 섹션의 최종 목표는 이 링크를 클릭하면 모달이 나타나게 하는 것입니다.
모달을 토글 처리하기 전에 프로젝트를 조직화해야 합니다.
현재 App.vue 라는 하나의 활성 컴포넌트를 가지고 있습니다.
그리고 템플릿 블록 내에 전체 앱이 포함되어 있습니다.
모든 것을 하나의 컴포넌트 안에 넣을 필요는 없습니다.
상태가 전역 수준에서 사용 가능하기 때문입니다.
각 요소를 자체 컴포넌트로 옮겨 더 나은 관리를 위해 시작합시다.
'components' 디렉토리 내에 'AppHeader.vue'라는 파일을 생성하겠습니다.
다음으로, 템플릿 블록을 추가합니다.
'App' 컴포넌트로 돌아가서 헤더 섹션을 찾습니다.
이 부분은 'header'라는 주석 위에 있을 것입니다.
NAV 태그와 그 내용 전체를 잘라내고, 헤더 컴포넌트로 돌아가서 템플릿 블록에 내용을 붙여넣습니다.
헤더 컴포넌트가 준비되었습니다.
다음 단계는 이를 등록하는 것입니다.
우리는 이를 로컬에 등록할 것입니다.
사이트 헤더는 일반적으로 한 번만 사용됩니다.
이것은 우리 앱의 모든 컴포넌트에서 필요한 것이 아닙니다.
그래서 전역적으로 등록하지 않을 것입니다.
'App' 컴포넌트에 스크립트 블록을 생성합니다(아직 없다면).
이름을 'App'으로 지정한 다음, 헤더 컴포넌트를 가져옵니다.
우리는 이를 'AppHeader'라고 부릅니다.
이미 'header'라는 HTML 태그가 있기 때문에 이름 충돌을 피하기 위함입니다.
컴포넌트의 이름 충돌을 방지하기 위한 쉬운 방법은 'App'과 같은 짧은 구절로 컴포넌트 이름을 접두사로 사용하는 것입니다.
다음으로, 'App' 컴포넌트에 'components' 객체를 추가하여 'AppHeader' 컴포넌트를 등록합니다.
이것은 ES6 문법입니다.AppHeader: AppHeader라고 타이핑하는 것과 같습니다.
간결한 방법입니다.
진행하기 전에 이 강의의 리소스 섹션에 있는 스타일 가이드 링크를 확인해 보세요.
이전에 이 페이지를 보여드린 적이 있습니다.
여기서 컴포넌트 이름은 다중 단어로 되어야 한다고 언급되어 있습니다.
이 규칙은 컴포넌트 이름이 기존 HTML 요소의 이름과 충돌하지 않도록 하는 것을 목표로 합니다.
우리는 이 프로젝트에서 계속 이 규칙을 따를 것입니다.
편집기로 돌아가서, 컴포넌트 파일에서 'AppHeader' 컴포넌트를 제거한 위치에 이를 배치하겠습니다.
애플리케이션을 미리보려면 서버를 시작하세요.
모든 것이 잘 작동했다면 페이지가 정상적으로 표시될 것입니다.
확실하지 않다면 Vue 개발자 도구를 열어 'AppHeader' 컴포넌트를 검색해보세요.
이 컴포넌트는 'App' 컴포넌트 아래에 나열될 것입니다.
우리 컴포넌트가 목록에 나타나면, 성공적으로 가져온 것입니다.
이제 인증 모달을 'components' 디렉토리로 옮겨보겠습니다.
'Auth.vue'라는 파일을 생성한 후, 템플릿과 스크립트 블록으로 스캐폴드합니다.
내보내는 객체에서 'name' 속성을 'auth'로 지정합니다.
'App' 컴포넌트 파일로 돌아가서 템플릿 블록의 맨 아래로 스크롤합니다.
'authModal'이라는 ID를 가진 div 태그가 있을 것이며, 그 위에 '인증 모달'이라는 주석이 있습니다.
템플릿에서 전체 요소를 잘라내고 'Auth' 컴포넌트의 템플릿 블록에 붙여넣습니다. 이 컴포넌트가 준비되었습니다.
이제 'App' 컴포넌트의 스크립트 블록에서 'Auth' 컴포넌트를 'AppAuth'로 가져온 후 등록합니다.
가져온 후에는 이를 등록하고, 제거한 위치에 해당 컴포넌트를 추가합니다.
이제 앱의 두 섹션을 별도의 컴포넌트로 분리했습니다.
더 많은 섹션이 있지만, 나중에 다룰 것입니다.
우리는 인증과 관련된 요소에 집중하고 싶습니다.
애플리케이션을 작은 부분으로 나누는 작업을 마쳤으며, 다음 몇 강의에서는 모달을 토글하는 로직을 추가하기 시작할 것입니다.