SFC

📒 Component

• 재사용 가능한 코드 블록

💡Component 특징

• UI를 독립적이고 재사용 가능한 일부분으로 분할하고 각 부분을 개별적으로 다룰 수 있음 → 앱은 중첩된 Component의 트리로 구성됨
  

📒 Single-File Components 📌

• 컴포넌트의 템플릿(html), 로직(JS) 및 스타일(CSS)을 하나의 파일로 묶어낸 특수한 파일 형식 (*.vue 파일)

💡 SFC 문법

• < template>, < script>, < style>로 구성됨
• 언어 블록의 작성 순서는 일반적으로 template → script → style 순서

1. template
   • 각 *.vue 파일은 최상위 블록을 하나만 포함 가능
   • script setup
     • 각 *.vue 파일은 하나의
     • 컴포넌트의 setup() 함수로 사용, 컴포넌트의 각 인스턴스에 대해 실행
   • style scope
     • *.vue 파일에는 여러
     • scoped가 지정되면 CSS는 현재 컴포넌트에만 적용

   📒 SFC build tool (Vite)

   💡 Node Package Manager (NPM)

   • Node.js의 기본 패키지 관리자

   💡 vite 패키지 구조 📌

   

   1. node_modules
      • Node.js 프로젝트에서 사용되는 외부 패키지들이 저장되는 디렉토리
      • 프로젝트의 의존성 모듈을 저장하고 관리하는 공간
      • 프로젝트가 실행될 때 필요한 라이브러리와 패키지들을 포함
      • .gitignore에 작성됨
   2. package-lock.json
      • 패키지들의 실제 설치 버전, 의존성 관계, 하위 패키지 등을 포함하여 패키지 설치에 필요한 모든 정보를 포함
      • 패키지들의 정확한 버전을 보장하여, 여러 개발자가 협엽하거나 서버 환경에서 일관성 있는 의존성을 유지하는 데 도움을 줌
      • npm install 명령을 통해 패키지를 설치할 때, 명시된 버전과 의존성을 기반으로 설치
   3. package.json
      • 프로젝트의 메타 정보와 의존성 패키지 목록을 포함
      • 프로젝트의 이름, 버전, 작성자, 라이선스 등과 같은 메타 정보를 정의
      • package-lock.json과 함께 프로젝트의 의존성을 관리하고, 버전 충돌 및 일관성을 유지하는 역할
   4. public 디렉토리
      • 정적 파일
        • 소스코드에서 참조되지 않는
        • 항상 같은 이름을 갖는
        • import할 필요 없는
      • 항상 root 절대 경로를 사용하여 참조
        • public/icon.png는 소스 코드에서 /icon.png로 참조할 수 있음
   5. src 디렉토리
      • 프로젝트의 주요 소스 코드를 포함하는 곳
      • 컴포넌트, 스타일, 라우팅 등 프로젝트의 핵심 코드를 관리
   6. src/assets
      • 프로젝트 내에서 사용되는 자원(이미지, 폰트, 스타일 시트 등)을 관리
      • 컴포넌트 자체에서 참조하는 내부 파일을 저장하는데 사용
      • 컴포넌트가 아닌 곳에서는 public 디렉토리에 위치한 파일을 사용
   7. src/components
      • Vue 컴포넌트들을 작성하는 곳
   8. src/App.vue
      • Vue 앱의 최상위 Root 컴포넌트
      • 다른 하위 컴포넌트들을 포함
      • 애플리케이션 전체의 레이아웃과 공통적인 요소를 정의
   9. src/main.js
      • Vue 인스터스를 생성하고, 애플리케이션을 초기화하는 역할
      • 필요한 라이브러리를 import하고 전역 설정을 수행
   10. index.html
       • Vue 앱의 기본 HTML 파일
       • 앱의 진입점(entry point)
       • Root 컴포넌트인 App.vue가 해당 페이지에 마운트(mount) 됨
         • Vue 앱이 SPA인 이유
       • 필요한 스타일 시트, 스크립트 등의 외부 리소스를 로드할 수 있음

   💡 Module

   • 프로그램을 구성하는 독립적인 코드 블록 (*.js 파일)

   💡 Bundler

   • 여러 모듈과 파일을 하나(혹은 여러 개)의 번들로 묶어 최적화하여 애플리케이션에서 사용할 수 있게 만들어주는 도구