인스타그램을 만들며 배워보는 Vue.js 3 완벽 가이드
Vue 공식문서나 책봐도 뭔소린지 모르겠다면, 리액트도 나랑 안맞는 것 같다면 이걸로 입문하십시오.
인스타그램과 유사한 Single page application을 만들어보며 배워보는 프로젝트형 Vue.js 강의입니다.
Vue CLI를 이용한 프로젝트 만들기부터 컴파일, 그리고 PWA 발행 방법까지 실제 프로덕션에 쓰이는 Vue의 대부분의 기술을 배워가실 수 있습니다.
Vue는 React와 동일한 기능을 제공하는 라이브러리입니다. 문법만 살짝 다릅니다.
네이버, 카카오톡에서 새로운 서비스만들 때 리액트 말고 Vue를 가끔 쓰는데 그 이유를 아십니까.
1. 문법이 쉽고 2. 코딩패턴이 정해져있어서 초보도 쉽고 협업도 쉽고 3. 가볍고 빠릅니다
리액트는 자바스크립트 잘해야 모든게 가능한데
Vue는 자바스크립트가 어설퍼도 Vue 문법 10개 정도만 새로 외워주시면 쪼렙 개발자도 누구나 멋진 웹앱을 쉽게 만들 수 있습니다.
남들 다 하는 todoapp 이딴거 말고 어디가서 자랑하기 좋은 인스타그램을 만들어봅시다.
만들어볼 샘플 사이트 일부 맛보기 https://yogoho210.github.io/
필요한 사전지식 :
- HTML/CSS 기초
- JavaScript 기초 (var, function, if, for, Array와 Object 자료형)
- JavaScript가 처음이라면 JavaScript 기초 강의 선행 추천드립니다.
커리큘럼 :
[Vue.js 3버전 기초와 부동산 사이트 만들어보기]
- Vue CLI 프로젝트 기본 설치와 환경셋팅
- Bootstrap-vue를 이용한 UI 개발과 반응형 레이아웃
- v-bind, v-for, v-if
- HTML 컴포넌트화 하기
- Props 사용하기
- Vue-router 설치와 라우터 개념
- 라이프사이클 함수 사용하는 법
- methods, computed 에 기능개발하기
- 라우터를 이용한 페이지 나누기
- URL파라미터를 추가한 라우터 만들기
- named routes, navigation guard
- Github Pages를 이용한 간단한 발행
[인스타그램 웹앱버전 만들기]
- Vue UI로 프로젝트 만들어보기
- step에 따른 페이지 구분패턴
- 알아서 해볼 많은 숙제들
- FileReader, ObjectURL을 이용한 프론트엔드 환경에서의 이미지 업로드
- 글작성과 발행기능
- 커스텀 이벤트 만들어 사용하기
- 상위요소로 데이터 버스태워 전달하기
- Vuex 로 쉽게 데이터 관리해보기
- Props를 갖다버리고 Slot을 이용하자
- Axios를 이용한 Ajax요청 배워보기
- Progressive Web App 발행과 셋팅
- Vue 3 Composition API 사용법
커리큘럼
| Part 1 : 부동산 쇼핑몰 | |||
| 카카오가 리액트 냅두고 왜 Vue 쓰는지 알려드림 | 무료 | 00:06:00 | |
| 개발환경 셋팅과 Vue3 설치 | 무료 | 00:08:00 | |
| HTML에 데이터 꽂아넣는 Vue 데이터바인딩 문법 | 무료 | 00:13:00 | |
| 리액트보다 쉬운 Vue 반복문 v-for | 무료 | 00:12:00 | |
| Vue 이벤트 핸들러로 click 감지하기 (허위매물 신고버튼) | 무료 | 00:14:00 | |
| v-if 와 모달창 만들기 (Vue에서 동적인 UI 만드는 법) | 무료 | 00:14:00 | |
| 실제 데이터를 박아넣어 상품목록 만들기 (import / export) | 무료 | 00:14:00 | |
| 모달창 내에 상세페이지 만들기 | 00:13:00 | ||
| HTML 복잡해보이면 컴포넌트 Component 만들어 쓰셈 | 00:14:00 | ||
| 부모가 가진 데이터를 자식이쓰고 싶으면 props | 00:12:00 | ||
| props 나머지 내용 조금 & 저번시간 숙제 | 00:12:00 | ||
| 자식이 부모데이터 바꾸고 싶으면 custom event | 00:13:00 | ||
| 사용자의 input을 받는 법 (v-model) | 00:14:00 | ||
| watcher로 데이터 감시하는 법 | 00:09:00 | ||
| Vue에서 매끈한 UI 애니메이션 주는 법 2개 | 00:10:00 | ||
| 상품정렬기능과 데이터 원본 보존 | 00:14:00 | ||
| Vue의 라이프사이클을 어디다 쓰냐면 | 00:14:00 | ||
| 버그찾고 싶으면 Vue devtools | 00:05:00 | ||
| Part 2 : blog 레이아웃과 라우터 | |||
| Blog 프로젝트 생성, Bootstrap | 00:09:00 | ||
| 블로그 글목록을 만들어보자 | 00:12:00 | ||
| vue-router 설치와 기본 라우팅 | 00:14:00 | ||
| 상세페이지 200만개 만들기 (URL 파라미터) | 00:15:00 | ||
| 심심할까봐 소개하는 Nested routes & push 함수 | 00:11:00 | ||
| 라우터 나머지 기능들 (hash mode, guards) | 00:05:00 | ||
| 만든 Vue 사이트 build & Github Pages로 배포하려면 | 무료 | 00:05:00 | |
| Part 3 : 인스타그램 만들기 | |||
| 뷰 인스타그램 프로젝트 생성 & 레이아웃 만들기 | 00:12:00 | ||
| 저번시간 숙제 & style 속성 데이터바인딩 | 00:13:00 | ||
| ajax 요청과 더보기 버튼 | 00:14:00 | ||
| 탭 만들기 & 탭으로 사진 업로드 페이지 만들기 | 00:12:00 | ||
| 서버없이 업로드한 이미지 다루기 (잡기술) | 00:12:00 | ||
| 글 발행기능 만들기 (이쯤 되면 혼자서도 잘함) | 00:12:00 | ||
| 인스타그램 필터 기능 만들기 (잡기술) | 00:12:00 | ||
| props 싫으면 slot은 어떻습니까 | 00:13:00 | ||
| 멀리 있는 컴포넌트간 데이터전송할 땐 mitt | 00:11:00 | ||
| 저번 시간 숙제와 Vuex 1 : 사용하는 이유 | 00:14:00 | ||
| Vuex 2 : store에 있는 state 데이터 바꾸는 법 | 00:11:00 | ||
| 숙제해설 : 좋아요 & 좋아요 취소기능 만들기 | 00:07:00 | ||
| Vuex 3 : actions 항목을 알아보자 | 00:10:00 | ||
| Vuex 4 : mapState를 사용하면 편리할 수도 있음 | 00:14:00 | ||
| Progressive Web App 만들려면 | 00:09:00 | ||
| Composition API 사용법 (팔로워 페이지 만들기) | 00:16:00 | ||
| Composition API 사용법 2 & 간단한 검색기능 | 00:14:00 | ||
| Vue 강의 나가는 말 (강의 그만들으셈) | 00:05:00 | ||
수강생 리뷰
관련강좌
도커 Docker & Container
웹서버를 만들든 파이썬으로 AI모델을 돌리든 뭘하든 도커와 컨테이너라는 용어를 자주 듣게 될텐데 왜냐면 이전과 다르게 프로그램을 컨테이너로 싸매서 배포 & 실행하는 경우가 많아졌기 때문입니다. …
신청하기50,000₩30,000₩
쉽게 배우는 Spring Boot & JPA
옆집 철수도 백엔드 개발자되는 시대라길래 6개월짜리 학원 며칠 다녀봤지만 막상 스프링 부트 배워보면 1. 어렵고 복잡함 2. 암기식임 3. 노잼 이런 이유 때문에 매년 …
신청하기180,000₩85,000₩
Next.js로 웹서비스 만들기
Next.js는 프론트엔드부터 서버까지 만들 수 있는 React기반 프레임워크입니다. 이것만 사용해도 풀스택 웹개발이 가능합니다. Next.js 사용시 서버사이드 렌더링이 쉽기 때문에 React, Vue만 사용해서 만든 …
신청하기160,000₩75,000₩
[[코딩애플 웹개발 프리패스]] 수강하고
ㅎㅎㅎ제가 배우고싶었던 react, node.js , vue까지 수강은 완료 하게됐습니다.
물론 아직 활용이나 응용면에서는 많이 부족하겠지만 .
인터넷 강의라서 강의내용과 다르면 어쩌지? 라는 고민도 했었는데
이 강의는 전혀 그런거 없이 처음부터 끝까지 강의 내용대로 강의 환경대로 에러가 나더라도 강의에서 나는거처럼 똑같이 돼서
초보인 제가 공부하기에 정말 좋았습니다.
이 프리패스를 통해 가장 좋았던 점은
제가 해당 프로그래밍 언어에 대해 좋은 이미지를 갖고 공부를 시작하게 해준것 입니다.
처음 코딩을 배울떄 그 이미지가 얼마나 중요한지 ㅎㅎ... 저에겐 많은 도움이 되었습니다.
뷰 기초를 다지기에 좋았습니다
강의를 다 들었지만 사실 엥 이게정말끝이라고? 싶을정도로 저는 아직 실력이 넘 없고 걱정이 많은데,, (강의가 뒤에 더 나올줄)
근데 가르쳐주신 것들만 다 익혀도 웬만한 만들고싶은건 다 구현이 되는거라고 하시니 그만큼 뷰가 간단하고 좋은거겠죠..? (?)
저는 우선 부족한 자바스크립트를 더 공부해야겠어요ㅜㅜ 그리고 뷰 강의도 계속해서 반복적으로 다시 봐야할듯요
처음에 빡대가리 수준으로 가르쳐주신다는 말씀 듣고 좋았는데 저는 더 빡빡대가리 인가봅니다 ㅠ ..
파트2 중간인가 파트3인가 들어가면서부터 어느 순간부터 헤매기 시작,,,,
파트3 6번째꺼 제목에 '이쯤되면 혼자서도잘함' 이라고 적혀있길래 저도 그때쯤엔 잘할줄,,,,,,
그나마 선생님의 뷰 강의를 들어서 이 정도 이해라도 된 것 같아요~! 다른 분 강의 봤으면 아마 중도 포기했을듯요 ^^
기초를 다지고 뷰를 입문하기에 넘 좋았던것같구요
원래 쌩 html css jquery로 혼자 하던 프로젝트가 있는데 그걸 뷰로 한번 첨부터 다시 시작해보려구요
좋은 강의 넘 감사합니다 나중에 다른 강의도 들으러 다시 찾아올게요,,,,
감사합니다 감사합니다 (- -)(_ _) 꾸벅
(선생님 개그(?) 넘 취향저격입니다.... 덕분에 안졸고 너무 재밌게 강의 순삭으로 봤네요^^b)
뷰기초를 다기지에 정말 좋습니다.
조금 난해했던 Vuex를 조금 더 쉽게 이해할수있었고
무엇보다 뷰를 못하는게 아니라 js를 못하던거였던게 확실해져서...좀 더 제 위치를 다잡을수 있었습니다.
중간씩 던져주시는 개그도 재밌어서 지루하지않고 끝까지 완강했던거 같습니다 정말 감사합니다ㅋㅋㅋ
완강했습니다.
유튜브에서 코딩애플 강의를 알게되어서 무료강의 다 듣고 너무 재미있어서 바로 결제해버렸어요.
part 3 인스타그램만들기 후반부가 조금 어려워서 혼자 연습해야할 거같아요.
뷰 기초배우기로 딱 좋았고 이제 혼자 프로젝트 만들어 볼 생각입니다.
선생님 덕분에 빡대가리에서 박대가리로 탈출한 것 같습니다.
프로젝트 만들어보고 얼른 리액트 강의도 듣고싶습니다.
감사합니다 🙂
코딩애플은 신이다
본인 프리패스 무지성 결제한지 3주 지났는데, 다른 클론코딩 강좌에서 3개월간 배운것보다 훨씬 더 많이 습득했음.
이해만 하고 넘어가는게 아닌, 직접 프로젝트 구성과 기능개발을 하려면 그냥 여기서 들으셈
어짜피 저같은 비전공자님들 클론코딩강의 듣다보면 어느새 무념무상으로 강사가 하는거 따라치지않음?
여기선 그럴 일 없음. 다만 숙제가 잘 안 풀려도 정답 바로 보지 말고.. 끝까지 풀어보셈..
처음에는 많이 답답하고 힘들 수도 있는데, 이해 잘 안 되는 내용은 5번도 돌려보면서 하다보면 결국 됨.
그러면서 개념들이 하나하나 체득되는거임.
그리고 커리큘럼이나 로드맵에는.. 자바스크립트 기초만 알아도 된다고 써있긴 한데..
이게 틀린 말은 아니긴 한데, ES6신문법(this, Class, Promise, Arrow Function, Spread operator, import/export), 자료형에 대한 개념, 자바스크립트 내장 함수 조금(주로 자료형 다루는 함수들..) 정도는 이해하고 수강하는거 추천함.
왜냐면 강의 중간중간에 이해하지 못 할 ES6문법이 나오는데, 어짜피 이해하지 못하면 왜?라는 의문을 품고 지나갈 수 밖에 없기 때문에, 그냥 처음부터 ES6 개념은 이해하고 듣는게 정신건강에 좋음
코딩애플 ES6 강의도 있음 https://codingapple.com/course/javascript-es6/ 여기 ㄱㄱ. 본인도 들었음 2번정도 들으면 빡대가리도 80%이상은 이해됩니다 ㅇㅇ
마지막으로 도움되는 공부법 추천 해드림
1. 일단 처음부터 vuex 전까지 수강한다. (숙제 최대한 열심히 풀어보셈 정답 바로 보지 말고.. )
2. 다시 처음부터 끝까지 듣는다(vuex 포함). 이 때, 자신이 강의를 보지 않고도 바로 기능개발을 할 수 있다면 강의를 보지 않고 바로 먼저 해본 후 강의를 본다.
3. 다시 처음부터 끝까지 듣는다. 근데 기능개발은 props나 emit 없이 vuex만으로 개발 해본다. (전부 가능함 리얼로 ㅇㅇ)
이렇게 하면 vuex를 왜 쓰는지, 언제 써야하는지, 그리고 복잡해보이는 vuex문법이 정말 익숙해질거임.
처음에는 vuex문법 진짜 어려웠는데 혼자힘으로 강의내용 vuex로 기능개발하니까 실력 존나 빨리 늠
코딩애플에서 공부하시는분들 화이팅합시다.
아직 수강 안 하는사람은 무지성 프리패스 결제 ㄱㄱ; 진짜 존나 혜자구성임 리얼
참고로 본인 알바, 억빠 아님 ㅇㅇ 구라시 탈모 + 대가리에 든거 리셋됨 맹세함
최고
초보에게 정말 딱 맞는 수업입니다.
무조건 추천드립니다.
막힘없이 진행되었던 교육
막힘없이 진행되었던 교육 입니다.
커리큘럼 구성이 잘되어 있습니다.
완강했습니다
vue 공식문서 뒤적거리다가 너무 어려워서 유튜브 뒤적이다가 유입되어서 강의 듣기 시작했는데 최고의 선택이었네요.
여태까지 들어본 코딩 강의 중에 제일 명쾌하고 이해가 쉬웠습니다. 좋은 강의 감사합니다^^
현 회사가 Vue로 작업한다고해서 입사 이틀전에 이 강의를 참고하였음
기껏 리엑트 배웠더니 우린 vue2로함 ㅋㅋ;;
해서 들었습니다.
유용해요!
최고에요
공식문서 위주의 강의를 들었는데 실무에 진짜 도움1도 안됐어요 ㅠㅠ
코딩애플님께 실습예제 위주라서 매우 도움이 되는것 같아요
여러번 반복해서 듣다보면 언젠간 다 내꺼가 될날이 오겠쥬??
유투브 보고 너무 쉽게 설명하셔서 강좌까지 듣게 되었는데 돈이 아깝지 않네요
좋습니다 굿
리액트, JS, 뷰까지 덕분에 개발자 현업에서 잘 하고 있습니다
리액트 이해 안가던 부트캠프 시절.... 뒤쳐지지 않고 수료하게 만드셨고, 현업에서 주니어 개발자로 근무중입니다.... vuejs를 쓰고 있어서 2달전 강의 지르고 현재까지 들으면서 필요한 부분 들으며 공부중인데요... 역시 명불허전 코딩애플입니다 감사합니다 앞으로도 많은 강의 부탁드려요.... 이쯤되면 그냥 패키지 질렀을걸 싶네요 이렇게 쉽게 가르치는 강의는 없습니다..
나만 알고싶은 최고의 뷰 강의
진짜 말이 필요없네요 ㅋㅋㅋ 제가 이미 리액트 개발자라서 더 쉽게 이해된것도 잇지만, 리액트는 너무 힘들게 배웠는데 뷰는 코딩애플 덕분에 너무 쉽고 재미있네요 ㅋㅋㅋㅋ
저는 이제 리액트보다 뷰가 좋아요 ㅋㅋㅋㅋ
개인프젝 ㄱㄱ
강의 4일 컷하고 바로 개인프로젝트하러갑니다
귀찮으니까 두 줄만 적을게요. 효율good
vue 쓸 일 생겨서 급하게 배움
최고임 헤헤
신고합니다.
혼인신고.........................
취뽀했는데 회사에서 리액트말고 Vue쓰고있어서 보고있어요.
재밌어요 흑흑..
코딩애플님 너무 재밌어요
!
리액트하다 뷰제이에스 하니 암이 나았습니다
사실 리액트 강의자체가가 좋아서 2번듣고 리액트 구조를 이해하고오니까 뷰제이에스 이해하는건 조빱이네요 근데 과거의 나에겐 무조건 뷰제이에스 시킬듯
큰 그림 그리기 좋은 내 최애 강의
자바스크립트 거의 모를 때 코딩애플 강의 (절반도 안들었음) 듣고 바로 실무했는데 엄청 도움 되었었음!
물고기 잡는 법을 가르쳐주는 강의였어서 체험 강의 듣고 바로 1년 구독 했고 올해도 연속으로 구독함!
vue 강의 재밌어서 완강했읍니다,,
코딩 애플은 꼼꼼하지 않음! 큰 그림을 그려준다. 꼼꼼하지 않아서 더더더 좋음 너무 꼼꼼하면 완강하기 싫어짐
재밌고 핵심만 알려줘야 강의를 끝까지 들을 수 있고 이거 완강하면 다른 강의 들을 때 술술 풀림
바라는 점이 있다면 step2 처럼 조금 더 핵심적인 내용이 있는 강의도 만들어줬으면 좋겠슴다
난 암튼 코딩애플 강의 넘 내 스탈이고 앞으로도 계속 들을 것이니 계속 만들어주세요
적게 일하시,,지마시고 많이는 버세요!
인스타 그램이 너무 버거워요
나머지는 매우 good
NUXT도해주세요
NUXT도해주세요
NUXT도해주세요
NUXT도해주세요
NUXT도해주세요
NUXT도해주세요
NUXT도해주세요