입문자 분들을 위한 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으로 가야죠! 가능하다면 기존 프로젝트도 점진적으로 마이그레이션 하는 것을 추천드랍니다.
![Freelancer → Fractional CMO → Advisor → Teacher [DMAT Framework]](http://i.ytimg.com/vi/HBHvb4Ji8Cs/mqdefault.jpg)
입문자 분들을 위한 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 - 이벤트창 광고 텍스트 순환(라이프사이클 활용)
VUE 처음배우는데 도움이 많이 됐습니다!
유데미에 외국어 강의만 있는 줄 알았는데 한국어로 된 강의를 찾아서 좋아요. 외국어는 집중이 잘 안돼서...
좋은 강의 잘 듣고 갑니다!
감사합니다.
디렉티브 쓸때
@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 에 나와있는 는 오타인가요..? 🤔
네, 보통 줄여서 씁니다^^
진짜 너무너무 잘 봤습니다 ~!! 유료강의만큼 알차네요 👍👍👍
핵심적이면서도 간단하면서도....... Good..!
와 진짜 감사합니다. 필요하다고 생각하는 부분이 다들어 있네요
vue 명령어가 안먹히는 경우
저의 경우엔 이전에 홈브루를 통해 다른 노드를 설치한 적이 있어 경로가 이상하게 적용되었습니다.
아몰랑하고 홈브루 하위의 노드를 지우고 다시 설치하니 정상적으로 깔렸습니다~
와우 알찬강의 정말감사해요
♥{{ item.like }}
incLike() {
this.data.like += 1;
},
이렇게 인덱싱 없이도 되던데 차이가 있나요? 어떤게 더 좋은 선택인가요?
그럴리가요? 배열 데이터라 인덱스 번호가 있어야 값이 증가할텐데요?
안녕하세요 선생님. 혹시 Nuxt 강의도 제작 계획 있으실까요?
다른 강의 스케쥴이 있어 아직은 미정입니다 😅
엇 이 강의 유데미서 듣고 있는데...섹션1 강의네요 ^^
번외로 v-model 사용하면 한글(영어는 괜찮)에서 버퍼링?처럼 한글자 늦게 표시가 되던데 방법 없나요? 찾아보니 키보드 문제라는 것 같던데 해결이 안되네요
개발 과정뿐만 아니라, 여느 다른 컴퓨터 프로그램들에서도 종종 발생되긴해요ㅠㅠ, 언어 소프트웨어 문제인지
@@red-drug-j4z 영어는 단어가 하나인데 한글은 자음 모음 3개 조합이라 입력시 딜레이가 걸리는 거 같이 보일 수 있을 겁니다. v-model로 입력 받으면 하나하나 입력 채크를 받습니다. v-model이 기본적으로 자바스크립트 input 이벤트와 동일한 기능입니다. input 이벤트 대신 change 이벤트를 사용하면, 입력이 완료된 후에만 값이 업데이트되므로 한글 입력 시 딜레이 문제를 해결할 수 있을 듯 합니다. 자료를 찾아보니 v-model.lazy로 하면 change이벤트가 반영된다고 하니 이방법을 시도해 보셔도 좋을 듯 합니다, 아무튼 비슷한 사례가 있어 검색해보면 구체적인 사례를 참조할 수 있을듯 한데요?
vue 3에서도 data() return 을 쓰는건가요 ? 바꼇다고 들어가지고요..
기존 option API 문법을 그대로 사용 가능한데 composition API가 추가되어 더 간결한 문법 사용이 가능합니다.
카페 가입신청했는데 혹시 카페 가입이 불가할까요~
가입 되실거에요^^
@ 감사합니다~
@@csslick9865 님 혹시 25:07 에 나오는 자료를 참고하라는 말씀의 자료가 어디에 있을까요? 찾다 찾다 못찾아 이렇게 여쭤봅니다. 강의를 결제해야 한다면 편하게 말씀해주세요!!
@@starrystar6242 css 코드에요. 유료강의에 첨부된 자료 복붙하라는 건데 그냥 화면에 보이는 코드 그대로 따라 적으셔도 됩니다^^
@ 네^^ 그렇게 했습니다 좋은강의와 질문마다 답변해주셔서 감사합니다.
맨 처음에 마켓에 volar 검색해도 똑같은게 안나오네요...
Volar가 현재 폐기되어 Vue - Official로 변경되었으니 해당 플러그인으로 설치해 주세요~
유익하게 잘들었습니다.
한가지 궁금 한점은 vue3는 옵션 api 방식과 컴포지션 api 작성 방식이 두가지로 있는데,
현업에서는 어떤 방식을 더 선호하나요?
개인적으로 vue의 옵션api 방식이 html 친화적인 방식이라 vue를 수강하고 있지만,
컴포지션 방식은 리액트와 유사해보여서 질문 드리게 되었습니다.
수업은 정말 쉽고 재밌게 잘 들었습니다.
프레임워크들은 서로 단점을 보완하고 장점을 닮아 가고 있습니다. 하지만 각자 나름대로 철학이 있지요. 다만 option API는 군더더기가 많아 진부하고 불편합니다.물론 정답은 없고요. 익숙한게 편하니까요... 각자 처한 상황에서 판단하셔야죠. 새로 시작하는 프로젝트라면 당연히 composition으로 가야죠! 가능하다면 기존 프로젝트도 점진적으로 마이그레이션 하는 것을 추천드랍니다.
@@csslick9865 좋은 강의에 이어 좋은 답변 감사드립니다. 도움이 많이 되었습니다.
@@csslick9865 댓글에서 좋은 걸 알게 되었습니다 초보라 이런 정보 참 많이 도움 되요
자료는 어디에있을까요??