분류 전체보기 (357) 썸네일형 리스트형 [Vue3] 상태 관리 라이브러리 Pinia Vue 컴포넌트는 이미 반응형 상태(=== 데이터)를 관리하고 있다.컴포넌트 구조의 단순화- 상태(State): 앱 구동에 필요한 기본 데이터- 뷰(View): 상태를 선언적으로 매핑하여 시각화- 기능(Actions): 뷰에서 사용자 입력에 대해 반응적으로 상태를 변경할 수 있게 정의된 동작 {{ count }}=> '단방향 데이터 흐름'의 간단한 표현상태 관리의 단순성이 무너지는 시점"여러 컴포넌트가 상태를 공유할 때" 1) 여러 뷰가 동일한 상태에 종속되는 경우- 공유 상태를 공통 조상 컴포넌트로 끌어올린 다음 props로 전달하는 것- 하지만 계층 구조가 깊어질 경우 비효율적, 관리가 어려워짐 2) 서로 다른 뷰의 기능이 동일한 상태를 변경시켜야 하는 경우- 발신(emit)된 이벤트를 통해 상태의.. [Design Pattern] MVVM 패턴 MVVM 패턴이란?- Model-View-ViewModel의 약자이다.- View와 Model 사이에 중간 레이어로 ViewModel을 두어 View와 Model의 결합도를 낮추어 유지보수성을 향상시킨다. Model- 데이터와 비지니스 로직을 담당하는 부분- 데이터를 가져오고 저장하는 역할 수행- 보통 데이터베이스, 네트워크 요청 또는 파일 시스템과 같은 여러 데이터 소스와 상호작용함 View- 사용자 인터페이스를 담당하는 부분- 사용자가 보는 화면을 표시하고, 사용자 입력을 처리- 보통 마크업 언어를 사용하여 디자인됨 ViewModel- View와 Model 사이에서 중재자 역할 수행- View에서 발생하는 이벤트를 감지하고, 해당 이벤트에 맞는 비지니스 로직을 수행- Model과 상호작용하여 데이터를.. [Vue3] Vue Router로 페이지 이동하기 Vue Router: Vue 공식 라우터https://v3.router.vuejs.org/kr/Vue Router 추가- Vite로 프로젝트 생성 시 Router를 추가한다.- 서버 실행 후 Router로 인한 프로젝트 변화를 확인할 수 있다.-> Home, About 링크에 따라 URL과 새로 렌더링되는 화면이 바뀐다.- 프로젝트 구조도 변화된 것을 확인할 수 있다. -> App.vue 코드가 바뀌고, router 폴더 및 views 폴더가 생성된다. 1) App.vue- RouterLink: 페이지를 다시 로드하지 않고 URL을 변경하고 URL 생성 및 관련 로직을 처리한다. HTML의 a 태그를 렌더링한다.- RouterView: URL에 해당하는 컴포넌트를 표시한다. 어디에나 배치하여 레이아웃에.. [Vue3] 컴포넌트 간 통신 (props, emit) 동일한 사진 데이터가 한 화면에 다양한 위치에서 여러 번 출력될 수 있다.하지만 해당 페이지를 구성하는 컴포넌트가 여러 개라면 각 컴포넌트가 개별적으로 동일한 데이터를 관리해야 할까?그렇다면 사진을 변경해야 할 때 모든 컴포넌트에 대해 변경 요청을 해야한다.=> "공통된 부모 컴포넌트에서 관리하자" 부모는 자식에게 데이터를 전달(pass props)하며, 자식은 자신에게 일어난 일을 부모에게 알림(emit events)Props- 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는데 사용되는 속성- 모든 props는 자식 속성과 부모 속성 사이에 하향식 단방향 바인딩(one-way-down binding) 형성부모 속성이 업데이트되면 자식으로 흐르지만 그 반대는 안됨자식 컴포넌트 내부에서 props를 .. [Vue3] Lifecycle Hooks Lifecycle Hooks: Vue 인스턴스의 생애주기 동안 특정 시점에서 실행되는 함수-> 개발자가 특정 단계에서 의도하는 로직이 실행될 수 있도록 함 1. Vue 컴포넌트 인스턴스가 초기 렌더링 및 DOM 요소 생성이 완료된 후 특정 로직을 수행하기 2. 반응형 데이터의 변경으로 인해 컴포넌트의 DOM이 업데이트된 후 특정 로직을 수행하기 Add 1 Count: {{ count }} {{ message }} 이외에도 다양한 hooks 함수들이 있다.https://vuejs.org/api/composition-api-lifecycleLifecycle Hooks 특징- Vue는 Lifecycle Hooks에 등록된 콜백 함수들.. [Vue3] watch watch() 함수는 반응형 데이터를 감시하고, 감시하는 데이터가 변경되면 콜백 함수를 호출한다.watch 구조watch(variable, (newValue, oldValue) => { // do something}- variable: 감시하는 변수watch 예시감시하는 변수에 변화가 생겼을 때 기본 동작 확인하기 Add 1 Count: {{ count }} 감시하는 변수에 변화가 생겼을 때 연관 데이터 업데이트하기 Message length: {{ messageLength }} [Vue3] 리스트 렌더링 (v-for) v-for 특징- alias in expression 형식의 특수 구문을 사용하여 반복되는 현재 요소에 대한 별칭(alias) 제공 {{ item.text }} - 배열에서 인덱스에 대한 별칭을 지정할 수 있음 {{ index }} / {{ item.name }} - 객체에서는 키, 인덱스에 대한 별칭을 지정할 수 있음 {{ index }} / {{ key }} / {{ value }} 여러 요소에 대한 v-for 적용- template 요소에 v-for을 적용하여 하나 이상의 요소에 반복 렌더링 할 수 있음 {{ item.name }} {{ item.age }} .. [Vue3] 조건부 렌더링 (v-if, v-show) v-if: 표현식 값의 T/F를 기반으로 요소를 조건부로 렌더링 - 'v-else' directive를 사용하여 v-if에 대한 else 블록을 나타낼 수 있다. true일때 보여요 false일때 보여요 토글 - 'v-else-if' directive를 사용하여 v-if에 대한 else if 블록을 나타낼 수 있다. Alice입니다 Bella입니다 Cathy입니다 아무도 아닙니다. 여러 요소에 대한 v-if 적용- v-if는 directive이기 때문에 단일 요소에만 연결 가능- template 요소에 v-if를 사용하여 하나 이상의 요소에 대해 적용할 수 있다. (v-else, v-else-.. 이전 1 2 3 4 ··· 45 다음
