[Vue] SFC build tool (Vite)

# Vite

프론트엔드 개발 도구

공식 문서 참고, Vue 공식문구에서 설치 방법 확인

 

 

npm create vue@latest

 뜨는 옵션들은 No로 우선 통일

cd vue-project/
npm install

자동으로 생긴 vue-project 위치로 가서 설치

npm run dev

이후 뜨는 로컬 주소를 통해 서버를 킬 수 있다

 

---

# npm = Node Package Manager

Node.js의 기본 패키지 관리자 (=pip랑 같은 역할)

 

 

Node.js가 뭔데?

→ Chrome의 V8 JavaScript 엔진을 기반으로 하는 Server-Side 실행 환경

즉, 브라우저에서만 쓸 수 있었던 JS를 서버에서도 쓸 수 있도록 해줌

프론트엔드와 백엔드가 같은 언어로 개발할 수 있게 됨

 

한번 써볼까

1. 아까 만들어 둔 vue project 폴더에서 sample.js 만들고

2. sample.js에 console.log("Hello")

3. 터미널 창에 node sample.js를 입력하면

4. 굳이 콘솔창 안가고 터미널에서 확인 가능

 

---

자동으로 생긴 vue-project 파일 뜯어보기

 

◼ node_modules

• Node.js 프로젝트에서 사용되는 외부 패키지들이 저장되는 디렉토리
• 프로젝트의 의존성 모듈을 저장하고 관리하는 공간
• 프로젝트가 실행될 때 필요한 라이브러리와 패키지들을 포함
• .gitignore에 작성됨 = venv와 비슷한 역할 = 파일이 매우매우 큼

 

◼ package-lock.json

• 패키지들의 실제 설치 버전, 의존성 관계, 하위 패키지 등을 포함하여 패키지 설치에 필요한 정보를 포함
• 패키지들의 버전을 통일
  → 협업이나 서버 환경에서 일관성 있는 의존성 유지
• npm install 명령어를 통해 설치할 때 명시된 버전과 의존성을 기반으로 설치

 

◼ package.json

• 프로젝트의 메타 정보와 의존성 패키지 목록을 포함
• 프로젝트의 이름, 버전, 작성자, 라이선스 등등...
• package-lock.json 보조 역할(요약본 느낌)

 

◼ public 디렉토리

• 주로 정적 파일들이 있음
  • 소스코드에서 참조되지 않는,
  • 항상 같은 이름을 갖는,
  • import 할 필요 없는,
• 항상 root 절대 경로를 사용해서 참조
  → public/icon.png는 소스코드에서 /icon.png로 참조 가능

 

⭐ src 디렉토리

프로젝트의 주요 소스코드 포함, 제일 핵심

 

▶ src/assets

• 프로젝트 내에서 사용되는 자원(이미지, 폰트, 스타일 시트 등)을 관리
• 컴포넌트 자체에서 참조하는 내부 파일을 저장하는 데에 사용
• 컴포넌트에서 직접 사용하는 정적 파일들이 위치함(안쓰는건 public으로)

▶ src/components

Vue 컴포넌트들을 작성하는 곳

 

▶ src/App.vue

• 가장 최상위 root 컴포넌트 → 다른 하위 컴포넌트들을 포함
• 앱 전체의 레이아웃과 공통적인 요소를 정의

▶ src/main.js

• Vue 인스턴스를 생성하고, 애플리케이션을 초기화하는 역할
• 필요한 라이브러리를 import하고 전역 설정을 수행함

 

◼ index.html

• Vue 앱의 기본 HTML 파일
• 앱의 진입점(entry point)
• Root 컴포넌트인 App.vue가 해당 페이지에 mount됨
• 필요한 스타일 시트, 스크립트 등의 외부 리소스를 로드 할 수 있음(ex. bootstrap CDN)