[24.05.23] Vue.js_템플릿/Vue인스턴스/디렉티브

1. 화살표 함수를 쓰면 안되는 상황

1) 전역레벨의 this를 가리키면 안될때

• this > 전역레벨의 this가 됨
  

💡 이런 상황에서는 화살표함수 쓰면 안됨. 함수 문법 그대로 써야한다.

2) 화살표 함수를 썼을때,

<div id="app">
  <h2>{{message}}</h2>
</div>

<script
  type="text/javascript"
  src="<https://unpkg.com/vue>"
></script>
<script type="text/javascript">
  var model = { message: 'Hello Vue3!' };
  var vm = Vue.createApp({
    name: 'App',
    data: () => ({ model }),
  }).mount('#app');
</script>

// 결과: 백지 나옴

> 백지 화면이 나오는 이유는 `data` 함수에서 반환된 객체가 Vue 인스턴스의 데이터로 사용될 때, `message` 속성에 직접 접근할 수 없기 때문입니다. 현재 코드는 `model`이라는 객체를 데이터로 반환하고 있지만, 템플릿에서 `message`를 바로 사용하려고 합니다.올바른 방법은 `data` 함수에서 `model`의 속성을 직접 반환하거나 템플릿에서 `model.message`로 접근해야 합니다.수정된 코드:

1. **데이터 구조를 수정해서 `message`를 직접 반환하기**
2. html코드 복사
3. <div id="app">
4. <h2>{{message}}</h2>
5. </div>
6. 
7. <script
8. type="text/javascript"
9. src="<https://unpkg.com/vue>"
10. ></script>
11. <script type="text/javascript">
12. var vm = Vue.createApp({
13. name: 'App',
14. data() {
15. return {
16. message: 'Hello Vue3!',
17. };
18. },
19. }).mount('#app');
20. </script>
21. 
22. **템플릿에서 `model.message`로 접근하기**
23. html코드 복사
24. 

`html코드 복사<div id="app"> <h2>{{ model.message }}</h2> </div><script type="text/javascript" src="https://unpkg.com/vue"
> </script> <script type="text/javascript"> var model = { message: 'Hello Vue3!' }; var vm = Vue.createApp({ name: 'App', data: () => ({ model }), }).mount('#app'); </script>`
> 
----------------------------
**설명:**

1. **데이터 구조 수정**: 첫 번째 수정 예시는 데이터 구조를 변경하여 `message`를 직접 반환했습니다. 이 방식은 템플릿에서 `{{ message }}`로 접근할 수 있도록 해줍니다.
2. **템플릿에서 `model.message`로 접근**: 두 번째 수정 예시는 `model` 객체를 반환한 후, 템플릿에서 `{{ model.message }}`로 접근하게 했습니다. 이 방식은 기존 데이터 구조를 유지하면서 템플릿에서 올바르게 값을 참조할 수 있도록 합니다.

2. 프록시

- 가로채는 목록 (log에 찍을 수 있는 이유)

• get
• set
  등등등

3. 라이프 사이클

• OS 마다 사이클이 다름

4. Lazy

• Vue.js

- 스켈레톤 ui 도 비슷하게 해줌

• 뼈대 먼저 만들고, 거기에 내용 채우는

5. composition Api 가 더 빠름 (선호함)

• 스파게티화 코드를 싫어해서

  스파게티 코드(spaghetti code)는 컴퓨터 프로그램의 소스 코드가 복잡하게 얽힌 모습을 스파게티의 면발에 비유한 표현이다. 스파게티 코드는 정상적으로 작동하지만, 사람이 코드를 읽으면서 그 코드의 작동을 파악하기는 어렵다.

6. W3School : 자료 서치

7. 탬플릿

8. 프레임워크

프레임워크(Framework) 라는 단어는 Frame(틀) + work(일)이라는 단어의 합성어입니다. 일 구조, 혹은 작업 구조라는 뜻과 같이 프레임워크는 어떠한 일을 처리하기 위한 구조를 제공합니다.

9. 보간법 {{}}

• 프론트에서 많이 쓰인다
• ${} > 이것도 보간을 했다 라고 할 수 있다.