스텝5) vue.js 개념 정리 후 진행해보자~

아직 머릿속에 vuejs의 개념이 잘 잡히지 않은것 같다.
그런 상태에서 nuxt3를 하자니 복잡하게만 느껴진다.

더욱이 naver map예제는 jquery를 사용하고 있다.
차라리 이게 더 친숙하군..ㅋㅋ
우선 여태 vuejs를 작성한 포스팅을 보자!!
문제를 파악해보고 조금 더 나아가보자구~:)

2018.09.10 - [Front/Vue.js] - Vue.js 맛보기

2019.05.31 - [Front/Vue.js] - [acet-#1] Vue.js 무작정 해보기(기본-Vue.js? 좋은거? 먹는거?)

2019.06.04 - [Front/Vue.js] - [acet-#2] Vue.js 무작정 해보기(용어 등 훝어보기!)

2019.06.12 - [Front/Vue.js] - const definitions are not supported by current javascript version

2021.08.14 - [Front/Vue.js] - 제1장 - Vue.JS 환경설정과 프로젝트 생성

2021.08.14 - [Front/Vue.js] - 제 2장 Vue.js 프로젝트를 github과 연동

2021.08.17 - [Front/Vue.js] - 제 3장 Vue.js 둘러보며 친해지기!

2021.09.07 - [Study/Study group] - 제 4장 Vue.js 기초 이론

2022.10.18 - [Front/Vue.js] - Vue.js : SyntaxError: Cannot use import statement outside a module

2022.11.02 - [Front/Vue.js] - vue.js router + typescript

2022.11.16 - [Front/Vue.js] - vue.js 실습) 프로젝트 생성 및 분석

2023.04.11 - [Front/Vue.js] - vuetify 프로젝트를 만들어보자!

내가 놓치고 있던것은 무엇일까?

바로 SPA~!

Single Page Application 이 개념은 node가 등장 했을 때 부터 봤던 내용이다.
다시 한번 정리해보자!

기존 웹 서비스는 요청 시마다 서버로부터 리소스들과 데이터를 해석하고 화면 렌더링을 한다.
그래서 부분적으로만 ajax를 사용했었다.

단일 페이지 어플리케이션(SPA)는 브라우저에 최초 한번 페이지 전체를 로드하고, 그 뒤로는 특정 부분만 ajax를 통해
데이터를 바인딩하는 방식이다.
기존 노가다했던 것을 개선시켜 만든걸로 봐도 무방하군!

컴포넌트 개념
컴포넌트들이 모여서 하나의 페이지를 만든다.
즉, 특정 컴포넌트에서 데이터를 바인딩할 수 있다.

이런 개념을 생각하면서 Vue2 가이드를 다시 한번 보자~!

https://v2.ko.vuejs.org/v2/guide/instance.html

데이터
Vue인스턴스가 생성 될 때 data 객체에 있는 모든 속성이 Vue의 반응형 시스템에 추가 된다.

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

data에 포함되지 않은 변수가 변경되면 화면은 갱신되지 않는다.

인스턴스 라이프사이클 훅 개념
create / mount / update / destroy 이렇게 크게 4가지로 구분된다.

beforeCreate - DOM에 injection전에 뭔가 수행해야하는 경우에 사용
created - 반응형인 data() 변수와 events메소드가 활성화 되어 접근이 가능하다.

beforeMount() - <template> 태그를  렌더링 함수로 컴파일 합니다.
즉, 템플릿과 렌더링 함수들이 컴파일 된 후 첫 렌더링이 일어나기 직전에 실행 합니다.
mounted() - 템플릿, 렌더링 된 DOM에 접근할 수 있습니다.

beforeUpdate() - when data chages가 일어나면 실행 합니다.
update() - 컴포넌트가 데이터가 변하여 re-렌더링이 일어난 후 실행 됩니다.

beforeDestory() -  소멸(뷰 컴포넌트 제거)하기 직전에 호출 됩니다.
destroyed() - 소멸 된 후에 호출 됩니다.
뷰의 모든 디렉티브(v-)가 바인딩 해제, 모든 이벤트 리스너가 제거, 모든 하위 vue컴포넌트들도 삭제 됩니다.

computed와 watch
computed - data()의 반응형 값이 변했을 때, 이를 감지하고 자동으로 다시 연산해주며 결과 값은 캐싱(저장) 합니다.
watch도 비슷하지만 computed에서 중요한 부분은 결과 값을 캐싱(저장)하는 부분 입니다.
computed는 복잡한 로직연산이 많은 로직을 처리할 때 많이 사용 됩니다.
캐싱처리를 하고 있어서 data()의 속성값이 변경되지 않았다면 캐싱하고 있던 데이터를 리턴해줍니다.
computed는 라이프사이클에 영향을 받지 않습니다.
template 내부에 선언된 computed 중에서 해당 함수와 연결된 값이 변경 될때만 해당 computed가 재 연산 합니다.