H'academy
  • H'academy
  • Web
    • Back-end
      • Spring Framework
        • Spring 개발환경 구축
          • Project 생성
          • Maven 설정
          • Maven 저장소 위치 설정
          • Apache Tomcat 연동
          • Lombok 설정
        • Spring MVC Project
          • pom.xml
          • web.xml
          • root-context.xml
          • servlet-context.xml
          • DispatcherServlet
        • Controller
          • File Upload / Download
          • RestController(작성중)
        • Spring Test
          • Assert 단정문
          • Spring 환경 연동 테스트
          • MockMvc Test
        • Spring AOP
          • AOP 용어
          • Pointcut Expression
          • Filter
          • Interceptor
          • Filter vs Interceptor
          • Controller Advice(작성중)
        • Spring JDBC
          • DBCP
          • myBatis
            • ResultMap 활용
        • ETC
          • Logging
            • Tomcat Logging 설정
          • Property 관리
          • E-mail
            • Gmail 변경사항
          • Scheduler
          • Websocket
      • Spring Boot
        • STS 다운로드
        • 프로젝트 생성
        • 프로젝트 구조
        • Spring Devtools
        • Spring Controller
          • JSP 연동
            • * JSP 생성불가 문제
            • Spring Boot 3.x
          • Model
          • 요청 파라미터 처리
          • 경로 변수 처리
          • 요청 메소드
          • Redirect
          • Spring Actuator
        • Spring Boot JDBC
          • Database 정보
          • DAO Pattern
          • ORM Framework
            • myBatis
              • Mapper 생성
            • Spring Data JPA
        • Spring AOP
          • AspectJ
          • Filter
          • Interceptor
          • ControllerAdvice
        • REST API
        • Spring WebSocket
        • Send Mail
        • Logging
        • Spring Boot Test
        • Lombok
      • Java EE
        • 개발환경 구성
          • Server와 Client
          • Web Server와 WAS
        • Dynamic Web Project
      • Apache Tomcat
        • Apache Tomcat 구조
        • Tomcat User 생성
        • Tomcat Manager 설정
      • Maven
      • Jenkins
        • Installation
          • Github Webhook 설정
          • Maven 연동
        • Project setting
          • 소스 코드 관리 설정
          • 빌드 유발 설정
          • 빌드 작업 설정
      • OpenAPI(swagger)
        • swagger 2.x (legacy)
        • swagger 3.x (boot)
        • Swagger UI 꾸미기
        • SpringDoc
    • Front-end
      • HTML
        • Heading
        • <A>
        • <IMG>
        • <DIV>
        • <TABLE>
        • <FORM>
          • <INPUT>
          • <SELECT>
          • <TEXTAREA>
          • <FIELDSET>
        • List
      • CSS
        • CSS 적용 방식
          • 크기(size)
            • 픽셀(px)
          • 색상(color)
        • CSS 선택자
          • 스타일 우선순위
        • CSS 주요 속성
          • 크기 속성
            • border
            • margin
            • padding
            • box-sizing
          • 배경 속성
          • 글자 속성
            • font
            • text
          • 배치 속성
            • position
            • display
            • overflow
            • float
            • flexbox
        • CSS Reset
      • JS
        • syntax
          • let, const
          • 구조 분해 할당
          • spread operator
          • Object copy
          • this
          • module
        • jQuery
          • structure
          • function
          • ajax
            • ajax file upload
        • VueJS
          • CDN(Vue3)
            • 기본 구조
            • Vue Devtools
            • jQuery vs VueJS
            • Vue instance
              • data
                • IME issue
              • v-model
              • template
              • computed
              • watch
                • deep watch
                • vs Computed
              • methods
            • Vue directive
              • v-text
              • v-html
              • v-bind
                • v-bind style
                • v-bind class
              • v-on
                • once
                • prevent
              • v-show
              • v-if
              • v-for
          • Vue-cli 3
            • 프로젝트 구조
            • src
              • main.js
              • App.vue
              • HelloWorld.vue
            • Vue Router 4
              • History mode
              • 404 not found
              • Guard
                • beforeEach
            • Vuex
              • 이동 횟수 측정
            • axios
              • interceptor
          • Vue-electron
        • ReactJS
          • CDN(React18)
            • 템플릿 설명
            • JSX
            • render
            • Handling Events
              • onClick
              • onInput
            • Component
              • 클래스 컴포넌트
                • state
                • props
                • event
                  • Mouse
                  • Input
                • lifecycle
              • 함수형 컴포넌트
                • useState
                • useEffect
                • useReducer
                • useMemo
                • props
                • 조건부 렌더링
          • CRA
            • 자원 경로 설정
            • src 절대 경로 설정
            • react-router
            • Context API
            • Electron 설정
        • Webpack
          • NodeJS
          • Git
    • Ubuntu server
      • Jenkins
    • 테스트 도구
      • JMeter
        • Test Plan
        • Test Plan(with login)
        • Plugin 설치
    • WebRTC
  • Base Language
    • Java
      • Java 실행 과정
        • 개발 환경 구축
        • 샘플 코드 작성
        • 컴파일/실행
        • 환경 변수 설정
      • Java 초급
        • Hello world
        • 자료와 정보
        • 변수
          • 정수
            • 정수의 저장 원리
            • 정수형 변수 생성
          • 실수
            • 실수의 저장 원리
            • 실수형 변수 생성
          • 논리
            • 논리형 변수 생성
          • 문자
          • 문자열
            • 문자열 변수 생성
          • 사용자 정의 자료형
        • 연산자
          • 대입 연산
          • 부호 연산
          • 산술 연산
          • 복합 대입 연산
          • 증감 연산
          • 쉬프트 연산
          • 비트 연산
          • 비교 연산
          • 논리 연산
          • 삼항 연산
          • 변환 연산
        • 표준 입출력
          • 표준 출력
          • 표준 오류 출력
          • 표준 입력
            • Scanner 입력
        • 제어문
          • if 구문
            • 단일 조건
            • 두 가지의 조건
            • 여러 가지의 조건
          • switch~case 구문
          • while 구문
          • do~while 구문
          • for 구문
        • 랜덤(Random)
        • 배열
          • 1차원 배열
          • 2차원 배열
          • 다차원 배열
          • Sort
            • 선택 정렬
            • 버블 정렬
            • 삽입 정렬
      • Java 중급
        • 객체 지향 프로그래밍
        • 클래스
        • 인스턴스
        • 필드
        • 메소드
          • 설정(setter) 메소드
          • 반환(getter) 메소드
        • 생성자
        • 접근 제한
          • private
          • package
          • protected
          • public
        • 정적(static)
        • 불변(final)
        • 상수(constant)
        • 상속
          • this와 super의 이해
          • 멤버 변수 설정
          • 멤버 메소드 설정
          • 생성자 설정
        • 추상화
          • 추상 클래스
          • 인터페이스
        • 다형성
        • 중첩 클래스
          • 일반 중첩 클래스
          • static 중첩 클래스
          • 지역 중첩 클래스
          • 익명 중첩 클래스
      • Java API(작성중)
        • java.lang
        • java.util
        • java.text
        • java.time
        • java.io
        • java.net
        • java.sql
        • java.awt
        • javax.swing
      • Java 고급
        • 제네릭(Generic)
        • 열거형(Enum)
        • Annotation Type
          • Retention
          • Target
          • Nested Annotation
        • Java Reflection
          • Intro
          • Class
          • Field
          • Constructor
          • Method
          • Package
      • JDBC
        • 드라이버 로드
        • 연결 생성
          • JDBC Driver 유형
        • JdbcTemplate
      • Java 버전별 변경사항
        • Java 1.8
          • Lambda Expression
          • Stream API
          • java.time 패키지
        • Java 9
        • Java 12
          • switch~case
        • Java 13
          • Text Block
    • Arduino
      • 학습 준비
        • Reference
        • 아두이노 온라인 시뮬레이터
        • 전기의 이해
        • 그라운드(GND)의 이해
      • 개발 환경 구축
        • CH340 보드 설치
        • Editor 글꼴 설정
      • 아두이노 제어
        • 코드의 구성
        • 시리얼 출력
        • 디지털 출력
          • LED 출력
        • PWM 출력
        • 시리얼 입력
        • 디지털 입력
          • PIR 센서
        • 아날로그 입력
          • 온도 센서(LM35DZ)
          • 조도 센서
          • 가스 센서
        • 피에조 부저
        • 서보 모터 제어
          • 시리얼 서보 모터 제어
          • 스위치 서보 모터 제어
        • 온습도 센서(DHT-11)
        • LCD
      • 아두이노 통신
        • 블루투스(Bluetooth)
          • HC-06
            • 온도 센서 활용
          • HM-10
        • 와이파이(Wi-Fi)
          • ESP-01
            • WiFiEsp 라이브러리 추가
            • WiFiEsp 네트워크 스캔
        • 이더넷(Ethernet)
        • ArduinoJson 라이브리 사용
    • Regular Expression
  • Database
    • Oracle
      • 설치
        • SQL Plus
        • SQL Developer
        • DBeaver
        • Docker(Mac OS)
      • SQL
        • 관리자 명령
          • 사용자 관리
          • 권한 관리
          • Encoding 설정
          • 서비스 포트 설정
        • 사용자 명령
          • 테이블 관리
            • 테이블 항목 제약 조건
            • 외래키 제약조건
            • 데이터 유형
          • 시퀀스 관리
          • 데이터 관리
            • 데이터 추가
            • 데이터 조회
              • 오라클 내장 함수
              • 그룹 조회
              • Top N Query
            • 데이터 수정
            • 데이터 삭제
          • 뷰 관리
          • 인덱스 관리
          • 집합 연산
          • 테이블 조인
            • 등가 조인
            • 외부 조인
        • HR 계정
        • 기타 명령
          • 컬럼 간격 조정
      • 내보내기 및 불러오기
        • EXPDP, IMPDP
        • Docker로 실행중인 경우
      • 기타
        • 자동 세션 제거
        • Tablespace 관리
        • Unlock user
  • 면접대비
    • Q&A
      • Java
      • Database
      • Web
      • IT 일반상식
  • ETC
    • Eclipse IDE
      • 설치
      • 화면 설명
      • 환경 설정
      • 프로젝트 생성
      • 소스파일 작성 및 실행
    • Github
      • Github 계정 관리
      • Github 저장소 관리
        • Profile
        • Collaborators
        • Code
        • Issues
        • Pull requests
        • Action
          • Vue 3 Deploy Action
      • Personal Access Token
      • Git ignore 설정
        • Spring 개발용 샘플
      • Github Eclipse 연동
        • Branches
        • Project
        • Team project
          • Dynamic web project
          • Spring Boot Project
          • Branch 생성
          • Pull Request
          • Branch 보호
          • Branch 다시 생성
    • Figma
      • Team
      • Design
      • Component
    • 과정평가형
      • 실기 모의고사 1회
      • 실기 모의고사 2회
      • 실기 모의고사 3회
      • 실기 모의고사 4회
    • VScode
      • Live Server 실행 오류
      • Github 계정 변경
    • Naver ToastUI Editor
      • Editor 만들기
        • Editor options
          • File upload
      • Viewer 만들기
    • 문자 인코딩 방식
    • OBS
      • 녹화 잡음 제거 설정
    • Semantic Version
Powered by GitBook
On this page
  • Vue Project 구조
  • package.json
  • package-lock.json
  • node_modules
  • public
  • src
  • .gitignore
  • babel.config.js
  • jsconfig.json
  • readme.md
  • vue.config.js
  1. Web
  2. Front-end
  3. JS
  4. VueJS
  5. Vue-cli 3

프로젝트 구조

PreviousVue-cli 3Nextsrc

Last updated 2 years ago

Vue Project 구조

vue application 생성 시 폴더 구조는 다음과 같다.

Vue Application

/node_modules/ (라이브러리 설치 폴더)

/public/ (최초 로드되는 파일이 있는 폴더)

/src/ (빌드를 위한 파일이 있는 폴더)

/.gitignore (git에서 무시할 파일 목록이 있는 파일)

/babel.config.js (Babel 설정 파일)

/jsconfig.json (Javascript 설정 파일)

/package.json (프로젝트 정보 및 의존성 정보를 가진 파일)

/package-lock.json (package.json 업데이트 오류를 방지용 파일)

/README.md (git 용 프로젝트 설명서)

/vue.config.js (Vue 설정 파일)

package.json

프로젝트의 정보와 사용하는 의존성 등을 설정하는 파일이다. 의 pom.xml, 의 build.gradle과 유사한 역할을 수행한다.

주석은 이해를 돕기 위해 추가한 것으로 실제 설정파일에는 존재하지 않는다.

{
  "name": "demo",//프로젝트 이름
  "version": "0.1.0",//프로젝트 버전
  "private": true,//npm에 올릴 수 없도록 비공개 모듈 설정
  "scripts": {//npm run으로 실행할 수 잇는 명령 목록
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {//사용하는 의존성 정보(개발+배포)
    "core-js": "^3.8.3",
    "vue": "^3.2.13"
  },
  "devDependencies": {//사용하는 의존성 정보(개발 전용)
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  "eslintConfig": {//구문해석모듈 설정
    "root": true,//최상위 설정임을 명시
    "env": {//실행 가능한 환경 설정
      "browser":true,//browser 기반 실행 가능 설정
      "node": true//node 기반 실행 가능 설정
    },
    "extends": [//외부에 공개된 기반 설정 불러오기
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {//확장 구문분석기 설정
      "parser": "@babel/eslint-parser"
    },
    "rules": {}//구문 해석 규칙 설
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}
  • npm install 명령을 사용하면 존재하는 모든 dependencies를 다운받아 node_modules에 추가한다.

  • npm install <모듈명> 명령을 사용하면 설치된 정보가 dependencies에 자동으로 추가된다.

  • npm run 명령을 사용하여 scripts에 존재하는 key를 실행할 수 있다. 실행하면 value의 명령으로 대체되어 실행된다.

웹 개발을 위해 구문 해석 규칙을 하나 더 추가하였다.

"eslintConfig": {
    ...
    "env": {
      "browser":true,//추가된 항목
      "node": true
    },
    ...
  },

eslint에 대한 자세한 설정은 다음 공식 문서를 참조한다.

package-lock.json

package-lock.json은 설치된 모듈에 대한 의존성 트리 정보를 가지고 있다. npm 명령을 통해 모듈을 설치하고 package.json에 의존성을 추가할 경우 다음과 같은 문제가 발생할 수 있다.

  • 설치 과정에서 오류가 발생하는 경우

  • 설치한 버전이 deprecated되어 상위 버전이 설치되는 경우

어느 경우든 의존성 정보가 최초 개발 당시와 일치하지 않기 때문에 실행 시 오류가 발생할 가능성이 있다. 특히 git으로 프로젝트를 공유할 경우 npm install 명령을 이용하여 의존성을 다시 설치하게 되며 이 때 문제가 발생할 수 있다.

package-lock.json에는 설치 당시의 의존성 정보와 상태가 추가되어 이 파일을 같이 공유하면 문제를 해결할 수 있다.

node_modules

npm install 명령으로 설치한 모듈들이 위치하는 폴더이다.

git 등으로 프로젝트를 올릴 경우 제외해야 하며, 기본 생성된 .gitignore 파일에 제외하도록 설정되어 있다.

public

프로젝트의 빌드 범위에 포함되지 않는 정적(static) 파일을 저장하기 위한 폴더이다.

프로젝트 생성 시 기본적으로 두 개의 파일이 위치한다.

  • index.html

  • favicon.ico

이 내용들은 npm run build 명령으로 빌드를 하면 생성되는 dist 폴더로 자동 복사된다.

src

Vue Application 개발을 위한 .vue 파일과 .js 파일이 위치한다.

이 부분은 개발 관련 문서에서 자세히 다룬다.

.gitignore

git에 올리지 말아야 하는 항목들에 대해서 등록하는 파일이다.

의존성 파일이 위치하는 node_modules와 빌드 시 생성되는 dist 폴더 등이 제외되도록 기본 설정되어 있다.

babel.config.js

babel 은 Javascript compiler이다. babel은 새로운 Javascript 문법을 기존 브라우저에서도 사용할 수 있도록 변환해주기 때문에 급변하는 프론트엔드 환경의 필수품이라고 볼 수 있다.

babel.config.js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

설정 가능한 내용에 대한 문서는 다음과 같다.

문서에 작성되어 있는 presets에는 사용할 사전 설정 요소를 작성할 수 있으며 @vue/cli 관련 설정이 작성되어 있다. 필요 시 추가하거나 수정할 수 있으며, 지금은 별도의 변경은 하지 않는다.

jsconfig.json

jsconfig.json 파일은 Javascript project의 root 위치를 나타내기 위한 파일이다.

compilerOptions 속성에 옵션을 지정하여 원하는 설정을 할 수 있다.

  • nolib - 기본 라이브러리를 포함하지 않도록 설정

  • target - 사용할 기본 라이브러리를 지정

    • es3, es5, es6, es2015, es2016, es2017, es2019, es2020, esnext 중 하나를 설정

  • module - 모듈 코드를 생성할 때 모듈 시스템을 지정

    • amd, commonJS, es2015, es6, exnext, none, system, umd 중 하나를 설정

  • moduleResolution

    • import 모듈을 확인하는 방법을 지정

    • node, classic 중 하나를 설정

  • checkJs - Javascript 유형 검사를 활성화

  • experimentalDecorators - ES 데코레이터에 대한 지원 활성화

  • allowSyntheticDefaultImports - export가 없는 모듈에서 import가 가능하도록 설정

  • baseUrl - 탐색의 기본 위치 지정

  • paths - baseUrl에 지정된 위치를 기준으로 계산될 경로 매핑을 지정

{
  "compilerOptions": {
    ...
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    ...
  }
}

paths에 @/ 로 시작하는 모든 경로는 src에 연결 설정되어 있다. 따라서 다음과 같은 경로 설정이 가능하다.

  • @/assets/image/hello.png → src/assets/image/hello.png로 변환

readme.md

vue.config.js

@vue/cli 프로젝트의 전역 설정을 보관하는 파일이다. 설정 가능한 내용들은 공식 문서에 자세히 설명되어 있다.

vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

vue.config.js 설정 파일의 설정 방식은 두 가지가 있다.

//방식1
//defineConfig 미사용 시 hint를 제공해야한다
/** @type {import('@vue/cli-service').ProjectOptions} */
module.exports = { 
    /* options */ 
}

//방식2
//defineConfig 사용 시 intellisence를 지원한다
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    /* options */
})

신규 프로젝트 생성 시 vue.config.js는 code 형태로 작성되는 방식2로 작성되어 있다.

주로 사용하는 옵션은 다음과 같다.

  • baseUrl - 사용하지 않는 옵션(Vue-cli 3.3 이후 publicPath로 대체)

  • publicPath - 배포 시 생성될 index.html의 모든 링크에 대한 기본 경로 설정

  • outputDir - 빌드 시 생성될 파일의 경로 설정

  • devServer - 개발 서버에 대한 설정 객체

    • port - 개발 서버의 포트 설정

    • allowHosts - 외부에서 접속을 허용할 경우 설정 (전체 설정은 all)

    • https - 개발 서버를 https로 실행할 경우 설정 (인증서 필요)

git 등에서 사용하는 프로젝트 메인 설명 파일이다. 형식으로 작성한다.

Maven
Gradle
Markdown
Configuring ESLint - ESLint - Pluggable JavaScript Lintergeteslint
Logo
Options · Babel
Configure Babel · Babel
babel 공식 문서
Configuration Reference | Vue CLI
vue cli setting reference
Logo
Logo
Logo
https://code.visualstudio.com/docs/languages/jsconfigcode.visualstudio.com
vscode documentation의 jsconfig 설명