Vue.js3 구조 이해

Vue의 특징

• 가상 DOM 지원
• MVVM 패턴

 

MVVM패턴?

View

• HTML, CSS
• 유저인터페이스(UI)

Model

• 도메인 특화 데이터

ViewModel

• View의 실제 논리 및 데이터 흐름 : 상태와 연산

개발환경

• Node.js or SpringBoot : 서버측 플랫폼 (내 재량에 따라 선택)
• NPM(Node Package Manager) : 의존성 관리를 위한 노드패키지관리자
• Vscode : 코드편집도구(IDE)
• Vue-CLI : Vue 앱 작성을 위한 도구
• Chrome

---

FrontEnd

• 디자인된 내용을 화면을 통해 구현
• UI, 데이터 처리 및 상태관리

 

babel.config.js

• 코드를 변환시킴 과거의 코드형태로 바꿔주는 것 'browserslist'에서 활용

 

package.json

• scripts명령어를 설정할 수 있음
• dependencies노드modules에 저장된 파일들을 관리할때 사용 의존성
• devDependencies개발할때 사용하는 의존성 실제 서비스될때 사용하지 않음
• eslint코드 리펙토링
• browserslist지원되지 않는 브라우저들을 어디까지 다운그레이드할것인지

 

package.lock.json

• package.json에서 버전관리할때 업그레이드시 변경되지 않는 것들을 fix해놓음

 

public

• public안에 있는 index.html안에 모든 코드가 들어가게 되는것