뷰를 이용한 웹 사이트 만들기

처음으로 뷰 사이트를 만들어 봅니다. Vue.js의 주요 특징과 개념은 다음과 같습니다

1. 반응성(Reactivity): Vue.js는 데이터와 화면 요소 사이의 양방향 데이터 바인딩을 지원합니다. 이것은 데이터가 변경될 때 자동으로 화면이 업데이트되는 것을 의미합니다.

2. 컴포넌트 기반 구조: Vue.js는 컴포넌트를 사용하여 사용자 인터페이스를 작은 조각으로 분할합니다. 각 컴포넌트는 독립적으로 관리되며 재사용이 용이하며 유지 관리가 쉽습니다.

3. 디렉티브(Directives): Vue.js는 HTML 템플릿 내에서 사용되는 특별한 속성(디렉티브)을 제공합니다. 디렉티브를 사용하여 DOM 요소의 동작 및 모양을 제어할 수 있습니다. 예를 들어, v-model 디렉티브를 사용하여 양방향 데이터 바인딩을 설정할 수 있습니다.

4. 가상 DOM(Virtual DOM): Vue.js는 가상 DOM을 사용하여 효율적인 DOM 업데이트를 수행합니다. 실제 DOM 업데이트 대신 가상 DOM을 변경하고 비교하여 필요한 최소한의 DOM 조작만 수행합니다.

5. 라우팅 및 상태 관리: Vue Router를 사용하여 애플리케이션의 라우팅을 처리하고, Vuex를 사용하여 상태 관리를 할 수 있습니다. 이러한 라이브러리는 Vue.js 생태계의 일부로 제공됩니다.

6. 커스텀 디렉티브 및 믹스인: Vue.js는 커스텀 디렉티브 및 믹스인을 통해 애플리케이션을 확장하고 재사용 가능한 로직을 추상화할 수 있습니다.

설치

npm create vue@latest npm install npm run dev

.eslint.cjs / .prettier.json 설치

1. ctrl + , : format on save 체크

디자인

디자인은 웹상에 공유되어 있는 디자인으로 작업하였습니다. 피그마

작업 순서

• 필요없는 파일 삭제

작업 내용

미리보기