강의 설명

• BootStrap
• Pinia 등등

What Why How 순

• 무엇이고
• 왜해야하고
• 어떻게하는지

소스 , 교안

https://www.gymcoding.co/vuejs-3-

개발 환경 구성

• 크롬(확장프로그램 : vue devtools)
• VSCode (volar 설치 )

준비하기

Vue란 무엇인가.

• Framework : 틀이 있음.
• 설치 방법 : 여러가지 있음

CDN 방식으로 설치 선언만 해도 렌더링이 된다. 속성만 증가 시켜도 렌더링이 된다.

자바스크립트와의 차이

• 선언적 렌더링 : {{}} 안에 출력이 됨.
• 반응성 : 추적하고 자동으로 업데이트 해준다.

바인딩 태그 안에 v-bind: 를 사용하면 해당하는 데이터로 바인딩 시켜서 뜨게 만들 수 있다.

핸들링 v-on 으로 핸들링 할 수 있음.

양방향 바인딩 양방향 바인딩이라는거 자체가 data의 변경에 따라

• v-bind를 사용하는 걸로는 양방향 바인딩이 안됨 (단방향 바인딩)
• v-model 을 사용하면 양방향 바인딩 됨.

dom의 속성이 변경되었을 때, 위 상태값도 같이 바뀌게 됨.

상태값이랑 value 값 간의 동기화가 가능하다는 뜻.

v-if v-for 을 사용하여 아이템 뿌려주는 부분에 조건/반복이 가능해짐.

컴포넌트 이해하기

재사용 가능하게 만든것이 컴포넌트

반복되는 템플릿을 사용하는 방법

• 문자열 템플릿
• SFC (SingleFileComponent)

컴포넌트 등록 방법

app.component('컴포넌트 명', 컴포넌트 코드);

뷰는 컴포넌트로 만들어진 시스템이라고 보면 됨.

그래서 컴포넌트를 만드는것이 기본이 됨.

vite 의 설치

그냥 어느정도의 설명만 했음