24-02-05-mon. 권미진교수님. vue.js, 뷰+노드

[2sjdeveloper]

1교시

• 책 176쪽 컴포지션은 읽어만 보기. 수업은 하지 않을 예정
• 책 185쪽 mixins.
• 공식홈페이지 가이드에서는 옵션과 컴포지션방식을 같이 볼 수 있는데 현재 우리가 하고 있는건 옵션방식
• 책 204쪽. vuex

[2sjdeveloper]

• mixins.js 생성

[2sjdeveloper]

2교시

• 뷰에서는 제이쿼리 안씀

• 믹스인을 할 때는 달러를 써줘서 할것.(관습적인 문법)

• vuex 설치. D:\Dev\vue-workspace\board-project>npm install vuex@next

• package.json 에서 설치 확인 가능

• store.js 생성

• StoreView.vue생성

[2sjdeveloper]

3교시

• 화면에 Store 추가할 때
  1. index.js 랑 App.vue 에서 StoreView.vue , store 추가해줘야됨.

[2sjdeveloper]

• 동시에 동작되는건 뷰 기능이 아님. 객체타입이라서 일어나는 일.

• StoreView.vue, store.js : 참조타입은 변수가 갖고있는 값이 메모리주소. productInfo가 값을 넘겨주는건 복사개념이 아님. 객체는 값을 주는게 복사개념이 아니라 가리키는 것으이 뭔지를 알려줘서. 하나를 가르키는것.

  
  methods :{
  addCart(){
      let obj = {
          product_id: this.productInfo.product_id,
          product_name : this.productInfo.product_name,
          category : this.productInfo.category
      }
      this.$store.commit('addProduct', obj);
      //this.$store.commit('increment');
  
  }

}

StoreView.vue 중에 여기에 대한 설명인것 같은데 정확히 잘 모르겠음..

[2sjdeveloper]

• 확장프로그램 추가

• 설치 후 확인 가능

[2sjdeveloper]

4교시

-store.js

• 새로고침해도 데이터가 저장될 수 있도록 ( 메모리에 저장된걸 로컬스토리지에 저장)
• vuex-persistedstate 설치 npm install vuex-persistedstate 설치 후 서버 재시작

[2sjdeveloper]

5교시

• 교수님이 공유해준 user-server 폴더 열어서 수업하는중.. 근데 뭔지 모르겠다.. ㅠ
• 노드랑 뷰를 연결할라고 뭐 하는중..
• dbSetting.env 생성 공백 금지.

[2sjdeveloper]

6교시

• 이건 뭘까..

  1. 악시오스 api, 요청컨피그, 응답스키마는 꼭 보기
  2. axios는 fetch랑 비슷한거

• 뷰-워크스페이스 폴더 열고, 터미널에서 머 입력해줬는데.. vue create user-client 였었나 암튼 그래서 user-client 폴더 생성됨.(선택하는 메뉴도 나왔는데 그중 첫번째꺼 선택)

• 컴포넌트가 모여있는? 뷰티파이

• 우리는 cdm방식으로 뷰를 쓸 예정. 부트스트랩 버전 확인 필수!! 1,2,3,4는 비슷한데 5부터는 제이쿼리가 빠졌기때문에 완전 다름. 공식홈에서 가져와서 쓸 때 버전을 꼭 확인. 오류는 안나는데 동작 안되는 경우의 많은 경우가 버전이 다를 때.

[2sjdeveloper]

• https://getbootstrap.kr/ 여기서 이걸 복사해서 붙임
• 부트스트랩 쓰려고 이거 복사해서 넣어준거

[2sjdeveloper]

7교시

• lifecycle hooks이 중요한 이유 : https://vuejs.org/guide/essentials/lifecycle.html

• 뷰 안에서는 제이쿼리나 돔을 쓰지 않도록. 자바스크립트도 돔 불러오는 쿼리셀렉터 이런거 쓰지 말것.

• 뷰 성격의 컴포넌트, 각각의 요소를 구성하는 컴포넌트.

• App.vue 에서 설정하고 HeaderComponent.vue 생성

• 부트스트랩에서 대충 아무거나 복사해와서 이렇게 바꿔줌

  <nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </nav>

  이게 복사해온 원래 코드임.

[2sjdeveloper]

• UserListView.vue 파일 생성

• 악시오스 설치

  1. 설치 중 에러나면 D:\Dev\vue-workspace\user-client>npm install axios --force 에러나면 이걸로 실행(버전이 안맞아서 에러가 난거)

• 라이프 사이클 훅

[2sjdeveloper]

• 라이프 사이클 훅 설명
  1. 세분화하면 한 여덟개 정도 됨. : created 생성 : mounted 마운트 : updated 수정 : destroyed 소멸

2. 중요한건 크리티드와 마운티드 두개를 주로 사용 함. : 여기서 해당 컴포넌트를 여는 시점에 반드시 데이터가 있어야 되는 경우 그 때는 크리티드 훅이 동작한다. 랜더링하는 시점에 데이터가 있어야된다면 반드시 크리티드에서 해당 작업을 진행해야함. 부모, 자식 순으로 동작. 데이터를 들고 오는 와서 출력하는 동작. : 마운티드 같은 경우 뷰(화면)와는 크게 상관 없고 데이터를 주고 받을 경우 라이브러리 통합이 일어날 때 많이 사용. 자식 컴포넌트의 정보를 넘겨받아야할 경우 사용. 자식, 부모 순으로 동작. 자식이 완성이 되고 마운트가 되어줘야 부모가 마운트 될 수 있음. 데이터를 가지고 오는 경우에는 크게 사용하지 않음. 이미 가지고 있는 것을 랜더링시키고 나서 바로(=화면에 보여지고 나서 바로) 작업을 들어가야하는 경우에는 마운티드를 사용.

[2sjdeveloper]

8교시

• 크리티드를 머 악시오스랑 같이 ? 어쩌구.. 진행..