입문자 분들을 위한 Vue 3 무료 강의영상 2시간 합본입니다. 프로젝트를 만들어 보며 Vue3의 핵심 기능들을 배우실 수 있습니다. 느긋하게 달려보세요~ Vue3 코스: www.udemy.com/course/vuejs-3-f/?referralCode=8FF2C84B7B54B3C877A0 쿠폰: 536042F48931862AEAE1 Svelte 코스: www.udemy.com/course/svelte-k/?referralCode=EF2810C3EEC39049D2AC 쿠폰: 8CD00EC1CBFEF244D3ED 커뮤니티: cafe.naver.com/csslick Chapter: 0:00 - 소개 0:42 - 개발환경 설정 4:14 - Vue 3 프로젝트 생성 6:57 - 문서에 데이터 표시하기 11:52 - 반복문으로 영화정보 표시하기 17:24 - click 이벤트로 좋아요 버튼 만들기 22:13 - 이미지와 모달창 28:16 - 영화 데이터를 외부에서 가져오기 32:54 - 모달창 내용 동적으로 보여주기 34:42 - component로 기능별 UI 분리하기 40:50 - 자식 component에 데이터 전달하기 46:28 - 부모 component에게 데이터 변경 요청하기 51:27 - 영화 목록을 component로 만들기 57:15 - class를 동적으로 다루기 1:02:38 - 검색창 기능 1:27:27 - 이벤트창 광고 텍스트 순환(라이프사이클 활용)
감사합니다. 디렉티브 쓸때 @click is equivalent to v-on:click. 라고 나와있는데 @: 처럼 콜론을 붙이는것과 같은건가요? Combination of @: Symbol: There is no valid combination of @: in Vue.js. You may be confusing it with either @ for event listeners or : for binding, but they cannot be combined together in this manner. 52:49 에 나와있는 는 오타인가요..? 🤔
@@red-drug-j4z 영어는 단어가 하나인데 한글은 자음 모음 3개 조합이라 입력시 딜레이가 걸리는 거 같이 보일 수 있을 겁니다. v-model로 입력 받으면 하나하나 입력 채크를 받습니다. v-model이 기본적으로 자바스크립트 input 이벤트와 동일한 기능입니다. input 이벤트 대신 change 이벤트를 사용하면, 입력이 완료된 후에만 값이 업데이트되므로 한글 입력 시 딜레이 문제를 해결할 수 있을 듯 합니다. 자료를 찾아보니 v-model.lazy로 하면 change이벤트가 반영된다고 하니 이방법을 시도해 보셔도 좋을 듯 합니다, 아무튼 비슷한 사례가 있어 검색해보면 구체적인 사례를 참조할 수 있을듯 한데요?
유익하게 잘들었습니다. 한가지 궁금 한점은 vue3는 옵션 api 방식과 컴포지션 api 작성 방식이 두가지로 있는데, 현업에서는 어떤 방식을 더 선호하나요? 개인적으로 vue의 옵션api 방식이 html 친화적인 방식이라 vue를 수강하고 있지만, 컴포지션 방식은 리액트와 유사해보여서 질문 드리게 되었습니다. 수업은 정말 쉽고 재밌게 잘 들었습니다.
프레임워크들은 서로 단점을 보완하고 장점을 닮아 가고 있습니다. 하지만 각자 나름대로 철학이 있지요. 다만 option API는 군더더기가 많아 진부하고 불편합니다.물론 정답은 없고요. 익숙한게 편하니까요... 각자 처한 상황에서 판단하셔야죠. 새로 시작하는 프로젝트라면 당연히 composition으로 가야죠! 가능하다면 기존 프로젝트도 점진적으로 마이그레이션 하는 것을 추천드랍니다.
