모던 프론트엔드 프레임 워크는 다양하다.

대표적으로 React, Vue, Angular가 있다.

각 프레임워크의 목적이나 특성이 분명하기 때문에 상황에 맞게 사용하면 된다. 무엇이 좋고 무엇이 나쁜지 명확하네 나누는 것은 애매한 것 같다.

대규모 프로젝트에서는 주로 React를 쓰고 소규모는 Vue 쓴다고 한다.

뷰가 초보자가 접근하기 더 쉬운 측면이 있어 공부하기 좀 더 편하다.

어쨌든 쓰는 문법만 다르지 비슷한 패턴 및 흐름이기 때문에 여러가지 사용해보고 한 가지를 깊이 공부하면 좋을 것 같다.

Vue 공부 1일차

전역 설치

• npm install -g @vue/cli

시작

• vue create 폴더명

pacakge.json

• serve -> 개발 서버 오픈(dev)
• lint -> 소스코드 점검 툴

뷰 구성요소

App.vue

• template -> HTML
• script -> JS
• style -> CSS

반응성

• 데이터를 바꾸면 화면도 바뀐다.

디렉티브

• v-{}

• 조건문 -> v-if

• 반복문 -> v-for
  -> Html 태그 속성으로 넣어줌

Style 속성

• scoped
  -> 해당 컴포넌트만 스타일이 적용되도록 설정

컴포넌트명 multi-word 에러
-> vue.config.js 파 파일에 lintOnSave: false 프로퍼티 추가
-> 컴포넌트 명은 html과 혼동을 방지하기 위해 ComponentName 과 같은 형식으로 작서앻야함

• vue에서 scss 적용
  -> 설치: npm I -D sass-loader node-sass
  -> 스타일태그에 적용

컴포넌트 인스턴스 속성들

• 외부에서 해당 컴포넌트에서 사용된 프로퍼티들을 사용할 수 있음
  Const vm = app.mount(#app)
  console.log(vm.count)

라이플 사이클 훅

• 컴포넌트가 생성되고 업데이트 할 때 각 특정 단계별로 코드를 추가할 수 있음!(라이프싸이클 다이어그램 참고)
• 종류

1. beforeCreated
2. created -> 컴포넌트 연결된 직후
3. beforeMount
4. mounted -> 렌더링 된 직후
5. beforeUpdate
6. updated
7. beforeUnmount
8. unmounted

템플릿 문법

• v-once
  데이터를 한번만 렌더링 데이터가 변경되어도 다시 렌더링 하지 않음(반응성X)

• v-html
  Html 태그 속성으로 요소 삽입 가능
  (이중 중괄호는 일반텍스트임)

• v-bind
  클래스나 아이디 등의 html 속성을 입력할 때 사용(v-bind:id=“”)
  약어 -> 콜론

• v-on
  이벤트 처리
  약어 -> @click

• html 속성 이름 대체(동적 전달 인자)
  [속성이름] = “”

• computed(계산된 데이터)

• 연산 관련 코드를 저장하는 용도

computed 캐싱

• 반복되는 연산을 최적화
• 함수가 아닌 계산된 데이터,
• 캐싱으로 연산을 저장시켜 놓음, 반복해도 연산은 한번만 함!(리액트의 useMemo랑 비슷한듯)
• 읽기 전용 데이터 -> Getter, 계산된 값을 저장하는 기억이니깐 당연한듯