[Vue] Vue 3 Tutorial for Beginners

👉Chapter 1: 0:00 - 소개

• Vue.js의 기본 개념과 그 장점에 대해 소개합니다. 왜 Vue.js를 배워야 하는지, 다른 프레임워크와 비교했을 때 어떤 점이 유리한지 설명합니다.

👉Chapter 2: 0:42 - 개발환경 설정

• Vue 개발을 위한 환경을 설정합니다. Node.js와 npm을 설치하고, Vue CLI를 설치하는 방법을 단계별로 안내합니다.
• 개발 툴 추천 (VS Code, Vetur 확장 등)도 함께 소개합니다.

👉Chapter 3: 4:14 - Vue 3 프로젝트 생성

• Vue CLI를 사용하여 Vue 3 프로젝트를 생성하는 방법을 설명합니다.
• 프로젝트 구조와 주요 파일 설명을 통해 기본적인 이해를 돕습니다.

👉Chapter 4: 6:57 - 문서에 데이터 표시하기

• Vue에서 데이터를 어떻게 바인딩할 수 있는지 설명합니다.
• {{ }} 구문을 사용하여 데이터를 표시하는 방법을 예시와 함께 제공합니다.

👉Chapter 5: 11:52 - 반복문으로 영화정보 표시하기

• v-for 디렉티브를 사용하여 배열 데이터를 반복하는 방법을 배웁니다.
• 영화 데이터를 예시로, 리스트 형태로 화면에 표시하는 방법을 설명합니다.

👉Chapter 6: 17:24 - click 이벤트로 좋아요 버튼 만들기

• @click 이벤트 디렉티브를 사용하여 사용자 인터랙션을 처리하는 방법을 소개합니다.
• 좋아요 버튼을 클릭할 때마다 상태가 변경되는 예시를 구현합니다.

👉Chapter 7: 22:13 - 이미지와 모달창

• Vue에서 이미지를 다루고, 모달창을 구현하는 방법을 설명합니다.
• 모달창을 띄우고 닫을 수 있는 간단한 예제를 통해 실습합니다.

👉Chapter 8: 28:16 - 영화 데이터를 외부에서 가져오기

• axios를 사용하여 외부 API에서 데이터를 가져오는 방법을 설명합니다.
• 영화 데이터를 외부 서버에서 비동기로 가져오는 예시를 제공합니다.

👉Chapter 9: 32:54 - 모달창 내용 동적으로 보여주기

• 외부 데이터를 기반으로 모달창의 내용을 동적으로 업데이트하는 방법을 설명합니다.
• v-bind와 v-if를 활용하여 유동적인 UI를 구현합니다.

👉Chapter 10: 34:42 - component로 기능별 UI 분리하기

• Vue 컴포넌트를 사용하여 UI를 재사용 가능하고 관리하기 쉽게 분리하는 방법을 소개합니다.
• 컴포넌트 간 데이터 전달 방식에 대해 설명합니다.

👉Chapter 11: 40:50 - 자식 component에 데이터 전달하기

• 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법을 props를 이용해 설명합니다.
• 데이터 흐름에 대한 이해를 돕습니다.

👉Chapter 12: 46:28 - 부모 component에게 데이터 변경 요청하기

• 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하거나 변경 요청을 보내는 방법을 emit을 사용하여 구현합니다.

👉Chapter 13: 51:27 - 영화 목록을 component로 만들기

• 영화 목록을 표시하는 UI를 하나의 컴포넌트로 만들고, 이를 다른 곳에서 재사용하는 방법을 설명합니다.

👉Chapter 14: 57:15 - class를 동적으로 다루기

• v-bind:class를 사용하여 동적으로 CSS 클래스를 적용하는 방법을 소개합니다.
• 조건에 따라 스타일을 변경하는 예시를 제공합니다.

👉Chapter 15: 1:02:38 - 검색창 기능

• 검색어 입력에 따라 영화 목록을 필터링하는 검색창 기능을 구현합니다.
• v-model을 활용하여 양방향 바인딩을 설명합니다.

👉Chapter 16: 1:27:27 - 이벤트창 광고 텍스트 순환 (라이프사이클 활용)

• Vue의 라이프사이클 훅을 활용하여 광고 텍스트를 순차적으로 표시하는 기능을 구현합니다.
• mounted, updated 등의 훅을 이해하고 활용하는 방법을 설명합니다.

---

위 내용은 Vue 3 Tutorial for Beginners 영상 강의를 참고하여 작성한 것입니다.

각 섹션에서 다루는 예제 코드와 개념을 통해 Vue.js의 주요 기능들을 쉽게 이해할 수 있도록 도움을 줄 수 있습니다.

(출처: Vue 3 Tutorial for Beginners)