# vue.js

## Vue JS 를 공부하기 전에 알았으면 좋은 내용들

### 왜? 사용하는 걸까?

순수 자바스크립트로 개발을 하게 되면 이런식으로 개발하게 된다

HTML 레이아웃 짜고

CSS 로 디자인 입히고

JavaScript 로 동적 DOM 생성하고 동작 시킨다.

이때 JavaScript 개발은

1. DOM 을 찾는다. querySelector
2. 속성, 값 등을 편집한다.
3. 데이터 변경이 일어나면 관련 화면, 데이터를 갱신한다.

여기서 복잡성이 많아진다. 예를 살펴 보자.

### VM 이란?

* MVC 가 아니라 MVVM 이라는 것이 의미하는 것은 무엇일까?
* 순수 자바스크립트 로 개발 VS Vue Js 개발

### 모듈화

구조적으로 잘 만드는 것은 프로그램 개발에서 중요하다.

프로그램 개발시 가장 많이 겪게 되는 문제는 이 기능을 누가 담당하게 하지? (service, controller, model ...)

사실 답은 명쾌하다. 변경이 있을 때 변경사항을 최소한으로 작업 할 수 있도록 설계하기

그래서 위임이라는 개념도 나오고

더 나아가 추상화라는 개념으로 인터페이스를 활용하고 의존성을 주입하고 하는 거다.

### 생명주기

프레임워크를 사용할 때 가장 중요한 것이 무엇일까?

그것은 바로 적절한 곳에 적절한 코드를 넣는 일이다.

모던 웹 개발은 모듈화와 이벤트 중심이라는 매커니즘이 있다.

vue.js 에서는 다양한 이벤트 들로 컴포넌트의 상태를 관리하는데

중간 중간 hook 을 걸어서 이벤트를 받아서 적절한 조치를 할 수 있다.

이 개념을 알고 있어야 배움에 수월하다!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://programmer-jjy.gitbook.io/second-brain/second-brain/javascript/vue.js.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.