해리의 데브로그

2019년 7월 3주차 TIL

21 Jul 2019 | TIL

2019-07-15

  • UDEMY 에서 VUE JS 2 - The Complete Guide 라는 강의(section 2,3)를 들음.
  • v-once : data 내 저장된 촉이값을 그대로 사용하고 값을 변경 하고 싶지 않을 때 사용
  • $event : 이벤트가 발생될 때 그 발생도는 event 또한 인자로 넘길 수 있음. vuejs는 default event 객체를 가져와 사용자가 접근 가능한 일종의 변수에 저장시키는데, 그 변수명이 $event
  • stopPropagation & event modifer(.stop) : 상위 엘리먼트에서 발생하는 이벤트를 특정 하위 엘리먼트에서 동작하지 않도록 전파를 막기위해사용. vue.js에서는 event modifier 중 하나인 .stop 을 사용
  • methods 의 경우, vuejs가 함수를 다시 실행시켜야하는지, 함수 내코드에 따라 값이 바뀌는 지 등을 모르므로 DOM이 업데이트를 할 때마다 함수를 다시 실행시켜야함. 그러나 computed 는 코드를 분석하고 이미 인지하고있음!

2019-07-16

  • v-if 는 엘리먼트를 DOM에 완전히 나타내거나 혹은 완전히 나타내지 않게 함. “숨긴다”의 개념이 아님. 하지만 v-show는 엘리먼트를 숨김(단지 display 속성을 none으로 변경시킴)
  • Vue 인스턴스는 여러개를 생성할 수 도 있으며, 각각의 인스턴스는 서로 호출이 가능하기도하며 인스턴스 외부에서도 호출이 가능.
  • 바닐라 JS에서는 엘리먼트 내 내용을 갖고올 때는 querySelector를 사용하였음. vuejs에서는 비슷한 기능을 제공하는데, 그것이 바로 ref 임. template 내에서는 ref로 쓰며, ref="heading" 처럼 ref에 대한 이름을 또한 지정할 수 있음. 인스턴스 내부에서는 this.$ref으로 호출함. this.$ref를 인스턴스 내부에서 찍어보면, 오브젝트의 형태로 출력됨을 알 수 있음.
{heading: h1, myButton: button}
 heading: h1
 myButton: button
  __proto__: Object

2019-07-17

  • Virtual DOM 및 life cycle에 대해 학습을 하였음.
  • Vue Js는 Virtual DOM과 watch & check 하여 상태를 업데이트 시키고, 실제 DOM에 대해서 업데이트를 시킴.
    • Vue 인스턴스내 속성 또는 데이터 등은 DOM의 엘리먼트들과 서로 연결되어있으며, watch & 필요의 경우update를 진행함. 그러나 값이 바뀌었다고해서 지속적으로 DOM 내 모든 것을 업데이트 시키지는 않음(JS는 빠르나 DOM에 접근하는 속도는 매우 느림!) 따라서 DOM을 직접 & 지속적으로 업데이트 하는 횟수를 최소화 시켜야하는데, 이때 Vue Instance와 DOM 사이에 virtual DOM 이라는 또다른 layter를 사용함. virtual DOM은 JS 코드를 가공한 DOM이므로 실제 DOM의 접근이 매우 빠름.
  • Vue Js의 Life Cycle은 기본적으로 아래와 같이 분류할 수 있음
    • beforeCreate: Vue Instance 생성 전
    • created: 인스턴스 생성 직후. data와 event 활성화, 접근 가능
    • beforeMount: 인스턴스를 생성하였으나 DOM에 mount 시키기 전
    • mounted: DOM에 붙여짐. 브라우저를 통해 확인 가능
    • beforeUpdate: 데이터가 변경될 경우, DOM에 업데이트 되기 바로 직전 실행
    • updated: DOM에 업데이트된 직후
    • beforeDestroy: 인스턴스가 제거되기 직전
    • destroyed: 인스턴스가 제거된 후. cleaup work가 필요할 떄 사용. watcher, event listener 등 제거

2019-07-20

  • 오래전부터 계획하고있었던 Django, JS, Vue의 강의 내용 최종 정리가 어느정도 마무리가 되어가고 있고 지금은 Vue에 대한 추가적인 공부를 진행하고 있다. Vue까지 정리가 마무리 되면, 진행하려고 했던 알고리즘 & 자료 구조 정리 및 공부를 오늘 드디어 시작하였다.
  • 삼성 상시 SW 역량 테스트를 4월에 취득한 이후, 알고리즘 문제에는 거의 손을 대지 못하였다가, 이전에 풀었던 좋은 문제를 몇개 풀어보았는데, 역시나 많이 어려웠던 것 같다.
  • 평일 낮에는 프로젝트를 진행 + 방과 후에는 Vue 강의를 주력으로 듣되, 알고리즘 문제도 틈틈히 풀면서 감을 다시 익혀야겠다. 다음 상시 SW 역량 테스트때는 A+를 따야겠다!

2019-07-21

  • 알고리즘 문제 리뷰 & DFS(백트레킹) 추천 문제를 몇개 다시 풀었으며, Udemy에서 vue 강의를 계속 듣고 있음.
  • Vue에서 컴포넌트를 전역으로 등록하기위해서는 main.js 내에서 Vue.Component() 와 같은 방식으로 추가하면됨. 반대로 Local로 등록할 때는 등록하고자 하는 컴포넌트 내 components 속성에 추가를 하면됨.
  • 컴포넌트 내에서 엘리멘트를 작성할 떄는 반드시 하나의 root element가 있어야만 함.
  • 컴포넌트 내 style 엘리먼트에서 입력하는 스타일은 Global로 적용되므로 지역으로 사용하기 위해서는 scoped를 입력하여 오버라이딩 해줘야함. 이를 통해 Vue는 Shadow Dom으로써의 행동을 모방(emulate)할 수 있게 됨.

Related Posts

Comments