프론트엔드 개발자의 기록 공간

[Vue3] Vue(1) 본문

프로그래머스 데브코스_FE/TIL

[Vue3] Vue(1)

[리우] 2021. 10. 11. 03:06

❗❗  데브코스 41일차 (09.27)

드디어 JS 프레임워크, 라이브러리 3대장을 배우기 시작했다.

우선 상대적으로 러닝커브와 진입장벽이 쉬운 Vue를 2주간 학습할 예정이다.

그 후 React를 학습하고 두 가지 중 하나를 선택해 프로젝트를 수행하게 된다. (Angular는 다루지 않는다.)

(문법은 포스팅하지 않을 예정입니다.)

 

✅ HTML로 Vue 이용하기

npm으로 각종 라이브러리를 설치해서 Vue 프레임워크를 다루기 전에 HTML 파일에서 실습해보자.

1. head에 CDN 주소를 입력해주면 된다.

2. Vue객체를 이용하기 위해서는 Vue.createApp("여러가지 옵션").mount("Vue.JS와 연결한 html요소를 선택자로 넣어줌")

 <head>
  <script src="https://unpkg.com/vue@next"></script>
  
  <style>
  </style>
 </head>

 
  <body>
    <div id="app">
    </div>

    <script>
      const App = {
        data() {}
      }
      const app = Vue.createApp(App).mount('#app')
    </script>
  </body>

HTML에서 사용하는 Vue의 구조는 위와 같은 방법으로 진행하면 된다.

 

✅ Vue Lifecycle

Vue Lifecycle은 위와 같은 구조이다. 뭐가 많아 보이지만 대표적으로 사용되는 몇 가지만 알아보자.

 

beforeCtrate : Vue 컴포넌트가 만들어지기 직전에 실행된다.

 

created :  Vue 컴포넌트가 만들어지고 난 직후에 실행된다.

(보통 API요청 등의 로직을 처리할때 사용한다.)

 

beforeMount :  html구조와 연결되기 직전에 실행된다.

 

mounted : html구조와 연결되고 난 직후 실행된다.

 

  <body>
    <div id="app"><h1>{{msg}}</h1></div>

    <script>
      const App = {
        data() {
          return {
            msg: 'Hello Vue!'
          }
        },
        //애플리케이션(data) 생성 전 
        beforeCreate() {
          console.log('beforeCreate!', this.msg)//undefined
          console.log(document.querySelector('h1'))//null
        },
        //애플리케이션 생성 후 //제일 많이 사용됨
        created() {
          console.log('created!', this.msg)//Hello vue
          console.log(document.querySelector('h1'))//null
        },
        //Dom 생성 전
        beforeMount() {
          console.log('beforeMount!', this.msg)//Hello vue
          console.log(document.querySelector('h1'))//null
        },
        //Dom 생성 후  //제일 많이 사용됨
        mounted() {
          console.log('mounted!', this.msg)//Hello vue
          console.log(document.querySelector('h1'))//<h1>Hello Vue!</h1>
        }
        //data가 바뀌고 화면이 업데이트되기 전
        beforeUpdate() {
          console.log('beforeUpdate!', this.msg) //data는 바뀌면서 바뀐 data가 출력된다.
          console.log(document.querySelector('h1').textContent) //하지만 이전 상태값을 가지는 dom은 이전 값이 나온다
        },
        //data가 바뀌고 화면이 업데이트되고 난 후
        updated() {
          console.log('updated!', this.msg)
          console.log(document.querySelector('h1').textContent)
        },
        //애플리케이션 연결(data)이 해제되기 직전에 실행
        beforeUnmount() {
          console.log('beforeUnmount!')
        },
        //애플리케이션 연결이 해제되고 난 후 실행
        unmounted() {
          console.log('unmounted!')
        }  
      }
      const app = Vue.createApp(App).mount('#app')
    </script>
  </body>

직접 코드를 실행해서 결과물을 확인하면 쉽게 이해할 수 있을 것이다.

created, mounted, updated, unmounted가 가장 많이 사용된다.

 

✅ Computed

Computed옵션은 계산된 데이터 기능을 제공한다. 즉 캐싱기능을 제공한다.

    <div id="app">
      <h1>{{count}}</h1>
      <!-- 매번 함수를 불러서 계산하기 때문에 비효율 -->
      <h2>{{double()}}</h2>
      <h2>{{double()}}</h2>
      <h2>{{double()}}</h2>
      <h2>{{double()}}</h2>
      <h2>{{double()}}</h2>
      <h2>{{double()}}</h2>
    </div>

    <script>
      const App = {
        data() {
          return {
            count: 3
          }
        },
        //함수 수행시 매번 같은 연산 진행
        methods: {
          double() {
            return this.count * 2
          }
        }
      }
      const app = Vue.createApp(App).mount('#app')
    </script>

위와 같은 코드가 있을때 double 함수를 실행할때 마다 불러와서 같은 연산을 수행한다.

프로젝트 규모가 커진다면 최적화 작업이 필요한 로직이다. 이를 Computed로 해결할 수 있다.

  <div id="app">
      <h1>{{count}}</h1>
      <h2>{{double}}</h2>
      <h2>{{double}}</h2>
      <h2>{{double}}</h2>
      <h2>{{double}}</h2>
      <h2>{{double}}</h2>
      <h2>{{double}}</h2>
    </div>

    <script>
      const App = {
        data() {
          return {
            count: 3,
          }
        },
        // computed 옵션은 캐싱기능을 제공함.
        // 한번 연산된 결과값은 캐싱기능을 통해 똑같은 연산 반복을 피함
        computed: {
          double() {
            return this.count * 2
          },
        },
      }
      const app = Vue.createApp(App).mount('#app')
    </script>

computed옵션은 함수를 새로 만들지 않고 재사용이 가능하다.

 

✅ Watch 감시옵션

watch는 감시옵션을 제공한다. 지정한 데이터의 상태성이 변경되면 해당 로직이 수행된다.

  <body>
    <div id="app">
      <h1>{{fullName}}</h1>
      <h1>{{firstName}}</h1>
      <h1>{{lastName}}</h1>
    </div>

    <script>
      const App = {
        data() {
          return {
            firstName: 'Leon',
            lastName: 'Miller'
          }
        },
        //watch 지정한 데이터를 감지해서 동작을 수행하는 옵션
        watch: {
          //데이터 변환시에 변환 전 후 데이터 값을 매게변수로 받을 수 있다
          firstName(newValue, oldValue) {
            console.log('watch:', newValue, oldValue)
          },
          fullName() {
            console.log('watch:', this.fullName)
          }
        }
      }
      const app = Vue.createApp(App).mount('#app')
    </script>
  </body>
</html>

위의 코드 처럼 특정 데이터가 변경될 때, 원하는 로직을 수행할 수 있도록 제공한다.

 

 

👨‍💻 데브코스 활동 전에는 React만 다뤄보았다. 프론트엔드 개발자라면 여러가지 프레임워크를 접해보고 경험해보는 것이 중요한데 이번 기회를 통해 학습을 했다. 아직 깊게 다뤄보진 않았지만, React가 익숙해서 그런지 html 코드에서 if, for 등의 처리가 어색하게 느껴졌다. 하지만 Lifecycle은 매우 직관적이여서 React에서는 그렇게 이해가 되지 않았던 Lifecycle을 Vue에서는 한 번에 이해할 수 있었다.

또한, Lifecycle이나, Computed, Wath등을 학습할때 React와 비교해서 이해하게 된다.

Computed는 "이건 react usecallback이랑 비슷하네"  Wath는 "이건 useEffect랑 비슷하네" 이렇게 비교가 되었다.

사람들이 한 가지 언어나 기술을 습득하면 나머지는 금방 익힐 수 있다는 것을 처음으로 몸소 느끼게 되었다.

 

 

📖 학습한 내용

  • Vue(1)
    • Vue 시작하기
    • 애플리케이션과 인스턴스 생성
    • 라이프 사이클
    • 템플릿 문법
    • Data와 Methods
    • Computed와 Watch
728x90
저작자표시

'프로그래머스 데브코스_FE > TIL' 카테고리의 다른 글

[Vue3] Vue(3)  (0) 2021.10.13
[Vue3] Vue(2)  (0) 2021.10.12
[html&CSS Clone] YouTube & 당근마켓  (2) 2021.10.03
[CSS Preprocessor ] Sass(SCSS) (2)  (2) 2021.10.02
[CSS Preprocessor ] Sass(SCSS) (1)  (0) 2021.10.01
'프로그래머스 데브코스_FE/TIL' Related Articles more
Comments