node_modules | ![]() |
Node.js 프로젝트에서 사용되는 외부 패키지들이 저장되는 디렉토리 프로젝트의 의존성 모듈을 저장하고 관리하는 공간 프로젝트가 실행될 때 필요한 라이브러리와 패키지들을 포함한다 패키지 버전, 의존성 관계, 트리구조 등 .gitignore에 작성됨 (공유하지 않는 파일) 파이썬에서는 requirement.txt로 필요한 걸 공유했었다. 근데 vue에서는 package-lock.json, package.json으로 공유한다. |
package-lock .json ★ ★ ★ |
![]() |
패키지의 실제 설치 버전, 의존성 관계, 하위 패키지를 포함하여 패키지 설치에 필요한 모든 정보를 포함한다 패키지들의 정확한 버전을 보장하여, 여러 개발자가 협업하거나 서버 환경에서 일관성 있는 의존성을 유지하는데 도움을 준다 npm install 명령을 통해 패키지를 설치할 때 명시된 버전과 의존성을 기반으로 설치한다. ------------------ 이걸 기반으로 node modules가 설치된다. 장고의 requirements랑 비슷 |
package.json ★ | ![]() |
프로젝트의 메타 정보와 의존성 패키지 목록을 포함한다 프로젝트의 이름, 버전, 작성자, 라이센스 등과 같은 메타 정보를 정의한다 package-lock.json 과 함께 프로젝트의 의존성을 관리하고, 버전 충돌 및 일관성을 유지하는 역할을 한다 ------------------ 개발자를 위한 안내문서 같은 거 소개해주는 정보들이 있다. 필요에 의해서 바꿀 수 있는 파일 |
public 디렉토리 | ![]() |
주로 다음의 정적 파일을 위치시킨다 - 소스코드에서 참조되지 않는 정적 파일 - 항상 같은 이름을 갖는 정적 파일 - import 할 필요가 없는 정적 파일 항상 root 절대 경로를 사용하여 참조한다 - public/icon.png는 소스코드에서 /icon.png로 참조할 수 있다 * 참고 https://vitejs.dev/guide/assets#the-public-directory ------------------------ static 파일을 넣는 곳 어딘가에서 고정적으로 하나의 역할을 하는 것들 조금 특수한 정적 파일들 여기에 우리가 직접 넣는 일은 별로 없음 |
src 디렉토리 ★ ★ ★ | ![]() |
프로젝트의 주요 소스 코드를 포함하는 곳 컴포넌트, 스타일, 라우팅 등 프로젝트의 핵심 코드를 관리한다 |
src/assets | ![]() |
프로젝트 내에서 사용되는 자원 (이미지, 폰트, 스타일 시트 등)을 관리한다 컴포넌트 자체에서 참조하는 내부 파일을 저장하는데 사용한다 컴포넌트가 아닌 곳에서는 public 디렉토리에 위치한 파일을 사용한다 |
src/components | ![]() |
Vue 컴포넌트들을 작성하는 곳 |
src/App.vue | ![]() |
![]() Vue 앱의 최상위 Root 컴포넌트 다른 하위 컴포넌트들을 포함한다 어플 전체의 레이아웃과 공통적인 요소를 정의한다 |
src/main.js | ![]() |
Vue 인스턴스를 생성하고, 어플을 초기화하는 역할 필요한 라이브러리를 import 하고 전역 설정을 수행한다 ---------------------------------- 장고에서 settings랑 비슷하다고 생각하면 된다. |
index.html | ![]() |
Vue 앱의 기본 HTML 파일 앱의 진입전 (entry point) Root 컴포넌트인 App.vue가 해당 페이지에 마운트(mount) 된다 => Vue 앱이 SPA인 이유 필요한 스타일 시트, 스크립트 등의 외부 리소스를 로드할 수 있다 (ex. bootstrap CDN) ------------------------------------------------- 결국에 페이지는 1개이다 그걸 구성하는 컴포넌트들만 갈아끼울 뿐 ![]() 여기에 app.view가 연결되어 있다 |
기타 설정 파일 | ![]() |
jsconfig.json 컴파일 옵션, 모듈 시스템 등을 설정한다 vite.config.js Vite 프로젝트 설정 파일 플러그인, 빌드 옵션, 개발 서버 설정 등을 담당한다 --------------------------------- 자동으로 되기 때문에 건들일 필요 없다. |
'WEB > Vue.js' 카테고리의 다른 글
[Vue.js][Single-File Components] 7. Virtual DOM (0) | 2024.05.02 |
---|---|
[Vue.js][Single-File Components] 6. 원래 있던 프로젝트 구조 설명, Vue Component 사용 단계 ★ (0) | 2024.05.02 |
[Vue.js][Single-File Components] 4. 모듈과 번들러 (0) | 2024.05.01 |
[Vue.js][Single-File Components] 3. NPM (Node Package Manager) (0) | 2024.05.01 |
[Vue.js][Single-File Components] 2. SFC build tool _ Vite (0) | 2024.05.01 |