hyungju-lee

42. Reviewing the Files

npm create vue@latest

이 강의에서는 Create vue Package를 통해 생성된 파일들을 살펴볼 것입니다.
먼저 루트 파일들을 확인한 다음 디렉토리로 넘어갈 예정입니다.

  1. .gitignore 파일: Git이나 GitHub을 사용할 계획이 있는 경우에 유용합니다.
    이 파일은 Git에 어떤 파일들을 무시하라고 지시합니다.

  2. index.html 파일: 이 파일은 Vanilla JavaScript 프로젝트에서 사용된 HTML 파일과 유사하지만, 약간의 수정이 있습니다.
    주로 애플리케이션의 진입점 역할을 하며, src라는 디렉토리에서 스크립트 파일을 불러옵니다.

  3. package.json 파일: 여기서는 몇 가지 흥미로운 사항들이 있습니다.
    예를 들어, dependencies 객체에는 Vue 패키지가 포함되어 있습니다.
    또한, Vue를 Vite와 통합하기 위한 추가 플러그인인 @vitejs/plugin-vue도 있습니다.

  4. README.md 파일: 이 파일에는 프로젝트를 실행하는 방법과 기본 정보가 담겨 있습니다.

  5. vite.config.js 파일: 이 파일에는 두 가지 주요한 사항이 있습니다.
    첫째, Vue 함수를 통해 프로젝트에 Vue를 설정합니다.
    둘째, resolved.alias 속성을 사용하여 디렉토리에 대한 별칭을 설정할 수 있습니다.

그 외에 node_modules 디렉토리는 프로젝트에 설치된 모듈을 포함하고, public 디렉토리는 정적 자산(이미지, HTML 파일 등)을 포함하며, src 디렉토리는 애플리케이션의 로직, 템플릿, 상태 관리 등을 포함하는 가장 중요한 디렉토리입니다.

main.js 파일에서는 Vue 패키지에서 createApp 함수와 app 객체를 가져옵니다.
이 함수는 애플리케이션을 생성하고, app 모듈은 Vue 파일을 로드하는 데 사용됩니다.
Vue 파일은 단일 파일 컴포넌트로, HTML, JavaScript, CSS 세 가지 블록으로 구성됩니다.
이 세 블록은 JavaScript 객체로 컴파일되며, 이 객체는 다른 파일에서 사용할 수 있습니다.

Vue 파일의 template은 render 함수로 컴파일되며, 이 함수는 문서에 렌더링하고자 하는 요소를 나타내는 객체를 반환해야 합니다.
Vite와 Vue 플러그인에 의해 생성된 이 함수는 단일 파일 컴포넌트 작성 과정을 단순화합니다.
우리는 가독성과 관리 용이성을 위해 단일 파일 컴포넌트를 계속 사용할 것입니다.

이 모든 내용은 기본적인 리뷰이며, 강의가 진행되면서 더 깊이 있는 주제들을 다룰 예정입니다.