웹 프로그래밍 노트

04-1 뷰 라우터

1. 라우팅 : 웹 페이지 간의 이동 방법, 싱글 페이지 애플리케이션(SPA)에서 주로 사용함
 *SPA : 페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용

2. 뷰 라우터 : 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리
 <router-link to="URL 값"> : 페이지 이동 태그. 화면에서는 <a>로 표시되며 클릭하면 to에 저장한 URL로 이동
 <router-view> : 페이지 표시 태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역 

3. $mount() API : el 속성과 동일하게 인스턴스를 화면에 붙이는 역할

4. 네스티드 라우터(Nested Router) : 라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있음
 - 상위 컴포넌트 1개에 하위 컴포넌트 1개를 포함하는 구조

5. 네임드 뷰 : 특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식

04-2 뷰 HTTP 통신

 - 뷰에서 ajax를 지원하기 위해 뷰 리소스와 액시오스 라이브러리가 있음

1. 뷰 리소스 : 2016년 말에 에반이 공식적인 지원을 중단하기로 한 라이브러리 (아직 계속 사용 가능)
 - this.http.get() : 뷰 리소스에서 제공하는 기능으로 HTTP GET 요청을 서버에 보내고 특정 데이터를 받아온다.

2. 액시오스(axios) : 뷰 커뮤니티에서 가장 많이 사용되는 HTTP 통신 라이브리러리이다. Promise 기반의 API 형식이 다양하게 제공되어 별도의 로직을 구현할 필요가 없다
 1) axios.get('URL주소').then().catch() 

     : 해당 URL 주소에 대해 HTTP GET 요청을 보낸다. 서버에서 보낸 데이터를 정상적으로 받아오면 then() 안에 정의한 로직이 실행, 오류가 발생하면 catch()에 정의한 로직이 수행
  2) axios.post('URL주소').then().catch()  

       : 해당 URL 주소에 대해 HTTP POST 요청을 보내고 위에서 살펴본 내용과 동일함
  3) axios({옵션 속성})   

       : HTTP 요청에 대한 자세한 속성들을 직접 정의하여 보낼 수 있음 

3장 인스턴스 & 컴포넌트

1. Vue 인스턴스 속성 
 1) data : data 부분
 2) el : html id를 가진 요소를 의미함
 3) template : 화면에 표시할 html, css 등의 태그 요소를 정의하는 속성
 4) methods : 화면 로직의 제어와 관계된 메소드를 정의하는 속성 (이벤트 처리와 같은 로직)
 5) created : 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성
 
2. 뷰 인스턴스 라이프 사이클

 1) 인스턴스 생성 → 인스턴스를 화면에 부착
  1> beforeCreate : 인스턴스가 생성되고 나서 가장 처음으로 실행되는 단계 (data 속성과 methods 속성이 아직 인스턴스에 정의되어 있지 않고 돔과 같은 화면 요소에도 접근할 수 없음)
  2> created : data 속성과 methods 속성에 정의도니 값에 접근하여 로직을 실행할 수 있는 단계 (서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋은 단계)
  3> beforeMount : template 속성을 el에 지정한 화면 요소에 인스턴스를 부착하기 직전 단계
  4> mounuted : el 속성에 지정한 화면 요소에 인스턴스가 부착되고 호출되는 단계로 template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계

 2) 인스턴스를 화면에 부착 → 인스턴스 내용 갱신
  1> beforeUpdate : 인스턴스에 정의한 속성이 화면에 치환되는 단계 (데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계, 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있음)
  2> update : 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고 나면 실행되는 단계
 
 3) 인스턴스 내용 갱신 → 인스턴스 소멸  
  1> beforeDestroy : 뷰 인스턴스가 파괴되기 직전에 호출되는 단계 (인스턴스에 접근할 수 있음, 데이터를 삭제하기 좋은 단계)
  2> destroyed : 뷰 인스턴스가 파괴되고 나서 호출되는 단계

3. 컴포넌트 : 조합하여 화면을 구성할 수 있는 블록을 의미함
 1) 컴포넌트 등록 방법
  1> 전역 컴포넌트 등록
Vue.component('my-component', {
       template: '<div> 전역 컴포넌트가 등록되었습니다!</div>'
    });
  
  2> 지역 컴포넌트 등록
new Vue({
        components: {
  // 컴포넌트 이름 : 컴포넌트 내용
          'my-local-component': cmp
        }
});

4. 하위에서 상위 컴포넌트로 이벤트 전달하기
 1) 이벤트 발생 :
this.$emit('이벤트명');
 2) 이벤트 수신 :
<child-component v-on:show-log="printText"></child-component>
- show-log : 이벤트명
- printText : 상위 컴포넌트의 메소드명