Vue3 강좌 한방 정리 -csslick

vue와 같은 프레임워크는 싱글 페이지 방식 ( Client Side Rendering - 클라이언트 측 렌더링)

서버는 데이터만 제공해서 부담이 줄고

클라이언트는 페이지 전환이 빨라 상호 보완적인 관계

 

또, 보통 페이지를 요청하면 서버에서 해당 페이지를 처리하는 라우팅이 필요한데

서버에서 이런 역할을 하지 않아서 클라이언트에서 처리해야함

 

 

---

 

설치

 

1. node.js - 자바스크립트를 서버측에서 실행 시켜주는 런타임 환경 ( npm )

2. npm install -g @vue/cli

3. vscode 확장팩  1.  Vue - Official    2. vue 3 snippets 

4. vue create 프로젝트명

 

App.vue에서 코드 시작

npm run serve로 프로젝트 실행

 

 

프레임워크 문법으로 개발하면 실제 브라우저에서 실행 가능한 코드로 변환 시켜야함 - 과정이 복잡

vue, react는 개발코드와 배포용 코드가 따로 필요하다

---

 

구조

 

components - 재사용

assets - 이미지, 자원

src - 개발코드

main.js - 어플리케이션 중심

public - index.html - 최종적으로 app id 밑에 자바스크립트로 만들어진 코드와 데이터들이 삽입됌

package.json - npm으로 추가된 의존성

 

---

 

script ( option API , composition API  )

 

Option API ( 불편함 )

Option API

html에 데이터를 넣는 것을 데이터 바인딩,  {{ 변수명 }}

 

속성에 값을 바인딩 할때 : 붙이면 된다 ( v-bind )

 

 

 

Composition API ( 쉽고 편함 ) - 추천

 

 

---

 

ref, reactive로 데이터 정의 ( 반응형 상태 정의 )

 

 

 

 

• 단순한 값: ref를 사용하고 .value로 접근. ( value 생략 가능 )
• 객체 상태: reactive를 사용해 속성에 직접 접근.

 

---

 

배열에서 ref, reactive 사용 차이

 

배열 전체를 변경할 때 ref

배열 내부 요소를 수정하는 작업이 많다면 reactive

 

---

 

v-for

 

item = 배열 자료 ( 임의로 주면됌 )

index = 배열 번호

데이터 = 배열 명

데이터 뒤에 키값 추가 해야됌

 

 

---

v-on 이벤트 ( @ )

 

count하기

 

or 함수로 처리

 

 

 

 

---