수코딩

중급

핵심만 골라 배우는 Vue.JS

프론트엔드 입문자들은 필수적으로 익혀야하는 Vue.JS!! 기초부터 시작해서 고급에 이르기까지 Vue.JS를 샅샅히 파헤쳐봅니다!
  • 19

    19개의 챕터

    체계적인 챕터 구성

  • 228

    228개의 동영상

    평균 7분 내외

  • 40

    약 40 시간

    학습 권장 시간

79,200원

  • 강의소개
코스 소개

핵심만 골라 배우는 Vue.JS는
[입문자]를 위해 준비한 강좌입니다.

아직도 Vue2를 쓰신다면 주목!!
Vue2는 2023년 12월부로 공식 Deprecated(지원종료) 되었다는 사실!
이제라도 더 늦기전에 최신 Vue3 문법을 배우고 사용하셔야 합니다.
이 강의에서 모든 지식을 학습해보세요.

혹시 수코딩이 집필한 vue.js 책을 보셨나요?

[코딩 자율학습 Vue.js 프런트엔드 개발 입문] 완독 후에 어떻게 공부해야 하냐구요?

2024년, 수코딩이 집필한 [코딩 자율학습 Vue.js 프런트엔드 개발 입문] (구매링크)
무료 강의까지 제공하는 수코딩 책을 완독하셨다면, 이제 어떻게 공부해야 할까요?
바로 이 강의를 통해 더 확장되고 넓은 범위의 Vue3를 배워보세요.
책에서는 미처 소개하지 못한 고급 기술을 배울 수 있습니다.

학습 기술

이 강의에서 배울 수 있는 기술

  • Vue2

    레거시 코드를 위한 Vue2 문법

  • Vue3

    가장 최신 버전의 Vue3 문법

  • Vue + Publishing

    Vue.js에서 퍼블리싱하는 방법

  • Vue Router

    최신 라우팅 처리 방법

  • Pinia

    공식 상태관리 라이브러리

  • JWT

    인증과 인가를 통한 JWT Token

  • Options API

    가장 일반적인 문법

  • Composition API

    가장 현대적인 문법

  • Swiper

    Swiper With Vue

  • Infinity Scroller

    예제로 배워보는 무한 스크롤링

실전 예제

이 강의에서 만들어보는
다양한 미니 프로젝트

computed & watch사람인 글자수 세기

실제로 사람인 사이트에서 사용하고 있는 기능을 그대로 클론 코딩해서 직접 구현해봅니다.

saramin
autocomplete
component검색어 자동완성

검색 엔진 서비스에서 사용하는 검색어 자동완성 기능을 직접 구현해봅니다.

컴포넌트 심화탭 메뉴 UI

다이나믹 컴포넌트 개념을 활용하여 탭 메뉴 UI를 구현해봅니다.

탭 메뉴 UI
할일관리앱
할일관리앱Todo List

지금까지 배운 모든 내용을 활용하여 Todo List를 만들어봅니다.

Auth인증과 인가

인증과 인가를 이해하고 JWT Token을 활용하여 로그인 기능을 구현해봅니다.

인증과 인가
movie app
MovieMovie App

지금까지 배운 내용을 모두 사용해서 영화 정보를 제공하는 웹을 만들어봅니다. (영화 API 사용)

추천대상

핵심만 골라 배우는 Vue.JS는
누가 들으면 좋을까요?

학생1

입문자

뷰를 한 번도 공부해본 적 없는 사람

학생2

뷰(vuejs)포자

뷰를 공부하려고 시도했지만, 번번히 포기한 사람

학생3

실무자

뷰를 사용해서 당장이라도 서비스를 만들어야 하는 사람

학생4

부담없이 쉽게

복잡한 설명 없이 단순하고 쉽게 배우고 싶은 사람

FAQ

자주 묻는 질문

  • Q. 사전에 학습해야 하는 것들이 있나요?

    네, 본 강좌를 원활하게 듣기 위해서는 HTML5/CSS/Javascript에 대한 사전 학습이 필요합니다.

  • Q. Vue.JS 버전은 몇으로 강의하나요?

    실무에서 많이 사용하는 Vue 2.x 버전과 최신 Vue 3.x 버전이 모두 포함되어 있습니다.

  • Q. 따로 중급 / 고급편이 출시되는 강의인가요?

    아닙니다. 본 강의는 기초부터 중급 / 고급 내용이 모두 포함된 올 인 원(All In One) 강의입니다.

  • Q. 취업에 필요한 내용을 모두 배우나요?

    네, 이 강의는 취업에 필요한 뷰 스킬을 모두 익힐 수 있도록 구성되었습니다.

수코딩이 보장하는

커리큘럼

  • 총 레슨 228개
  • 1. 시작하기(공통)
    • 수코딩 교육 시스템
    • 개발 환경 구성하기(with Visual Studio Code)
    • 비주얼 스튜디오 코드 작업 폴더 설정
    • 예제 코드
  • 2. 뷰JS 시작하기
    • 맥OS_개발 환경 설정
    • Prettier 설정
    • 비주얼 스튜디오 코드 추가 설정(Vue.js)
    • 뷰JS 프로젝트 만들기(with. CDN)
    • 뷰JS 프로젝트 만들기(with. NPM)
    • 뷰JS 프로젝트 만들기(with. Vue CLI)
    • 어떤 방법을 사용해야 할까?
  • 3. 기본 개념 익히기
    • 기본 구조 살펴보기
    • 기본 구조 정리
    • npm run dev
    • 애플리케이션 실행 순서
    • SFC
    • Exercise 1
    • Exercise 1 - 해설
    • 텍스트 보간
    • 단축 메서드명
    • Options API, Composition API
  • 4. 디렉티브
    • v-html
    • v-text
    • v-bind
    • v-pre
    • v-show
    • v-if
    • v--else-if, v-else
    • v-for
  • 5. 반응성과 이벤트
    • counter(with html+js)
    • counter(with vue)
    • 이벤트 연결
    • 이벤트 연결(축약형)
    • 이벤트 객체
    • 데이터 변경
    • 데이터 종류와 반응성
    • 인라인 핸들러
    • 다른 함수 호출하기
    • v-once
    • v-memo
  • 6. 폼(forms) 다루기
    • 입력 요소 핸들링
    • 입력 요소 초기값 지정하기
    • 사용자 입력 값 쉽게 가져오기
    • 데이터 바인딩 종류
    • v-model의 문제점
    • textarea, select
    • checkbox
    • radio
    • progress
    • file
  • 7. 이벤트 수식어
    • 이벤트 수식어란?
    • .stop, .capture
    • .prevent
    • self
    • passive
    • once
    • Keyboard Modifier
    • System Modifier
  • 8. computed & watch
    • computed 속성이 필요한 이유
    • computed - 1
    • computed - 2
    • computed - 3
    • computed 속성 정리
    • (실습) computed 사용하기 - 1
    • (해설) computed 사용하기 - 1
    • (실습) computed 사용하기 - 2
    • watch 속성이 필요한 이유
    • watch - 1
    • watch - 2
    • watch - 3
    • watch - 4
    • watch 속성 정리
    • (실습) 사람인 글자수 세기
    • (해설) 사람인 글자수 세기
  • 9. 컴포넌트
    • 라이프사이클
    • 라이프사이클 훅
    • 훅 사용하기
    • 새로운 컴포넌트 만들기
    • 전역 컴포넌트 등록
    • 지역 컴포넌트 등록
    • template 속성
    • render 속성
    • 스타일 정리
    • 컴포넌트는 왜 사용할까?
    • 컴포넌트 속성 전달이 필요한 이유
    • 컴포넌트 속성 전달 - 1
    • 컴포넌트 속성 전달 - 2
    • 컴포넌트 속성 전달 - 3
    • 컴포넌트 속성 전달 정리
    • 이벤트 전달이 필요한 이유
    • 이벤트 전달 - 1
    • 이벤트 전달 - 2
    • 컴포넌트 v-model이 필요한 이유
    • 컴포넌트 v-model - 1
    • 컴포넌트 v-model - 2
    • 컴포넌트 v-model - 3
    • 컴포넌트 v-model - 4
    • (실습) 검색어 자동완성
    • (해설) 검색어 자동완성
  • 10. 컴포넌트 심화
    • 상속 - 1
    • 상속 - 2
    • 상속 - 3
    • 상속 - 4
    • 상속 정리
    • dynamic component
    • (실습) 탭 메뉴 UI
    • (해설) 탭 메뉴 UI
    • slot이 필요한 이유
    • slot - 1
    • slot - 2
    • slot - 3
    • provide & inject가 필요한 이유
    • provide & inject - 1
    • provide & inject - 2
    • provide & inject - 3
    • provide & inject - 4
  • 11. Composition API
    • Composition API 시작하기 전에
    • Composition API란?
    • Composition API 학습 방법
    • ref vs reactive
    • Component (with composition)
    • watch(with composition) - 0
    • watch(with composition) - 1
    • watch(with composition) - 2
    • watch(with composition) - 3
    • watch(with composition) - 4
    • watch(with composition) - 5
  • 12. Todo List
    • (실습) Todo List 소개
    • (해설) Todo List 해설 - 1
    • (해설) Todo List 해설 - 2
    • (해설) Todo List 해설 - 3
    • (해설) Todo List 해설 - 4
    • (해설) Todo List 해설 - 5
    • (해설) Todo List 해설 - 6
  • 13. 라우팅
    • 라우팅이란?
    • 해시 라우팅
    • 브라우저 라우팅
    • vue-router
    • vue-router - 2
    • vue-router - 3
    • vue-router 초기 설정
    • router name
    • 동적 경로 매칭이 왜 필요해?
    • 동적 경로 매칭
    • 여러개의 동적 경로 매칭
    • useRoute & meta
    • meta 심화
    • children - 1
    • children - 2
  • 14. Pinia
    • Pinia 준비 - 1
    • Pinia 준비 - 2
    • Pinia - 1
    • Pinia - 2
    • Pinia - 3
    • pinia 복습하기
    • storeToRefs
    • 셋업스토어
  • 15. 네트워크 통신
    • json-server 준비
    • json-server - 1
    • json-server - 2
    • json-server - 3
    • json-server - 4
    • json-server - 5
    • axios - 1
    • axios - 2
    • axios - 3
    • axios - 4
    • axios - 5
  • 16. 컴포저블
    • 상태 비저장 로직
    • 상태 저장 로직 - 1
    • 상태 저장 로직 - 2
    • 컴포저블과 axios
    • 컴포저블 - 이해하기
    • 컴포저블 - axios1
    • 컴포저블 - axios2
    • 컴포저블 - axios3
    • 컴포저블 - pinia
  • 17. 인증과 인가
    • 인증과 인가를 배워야 하는 이유
    • 예제 코드 구조 설명
    • 프론트엔드 코드 작성 - 기본
    • 백엔드 코드 작성 - 기본
    • 백엔드 코드 작성 - 로그인과 로그아웃
    • API 관리 도구
    • 컴포저블 패턴으로 API 호출하기
    • 프론트_로그인 기능 구현하기
    • 프론트_로그아웃 기능 구현하기
    • 프론트_라우터 가드로 라우터 전환 제어하기
    • 프론트_로그인 상태 유지하기
    • 프론트_인터셉터로 인증헤더 추가하기
    • 백엔드_미들웨어로 토큰 검증하기
    • 프론트_마이페이지 로그아웃 다듬기
    • 프론트_마이페이지 코드 정리하기
    • 백엔드_리프래쉬토큰으로 액세스토큰 재발급
    • 프론트_리프래쉬토큰으로 액세스토큰 재발급
    • 미비된 코드 정리
    • 프론트_디자인 적용하기
  • 18. 영화 사이트
    • 영화 API 소개
    • 포스트맨으로 API 관리
    • 실습 프로젝트 소개
    • 초기구성
    • api 호출
    • 메인_상영중인 영화(api)
    • 메인-인기_예정_높은(api)
    • 메인-함수 호출 이해하기
    • 메인-디자인 적용
    • 메인-릴리즈 영역
    • 상세(디테일)-라우터추가
    • 메인-영화 목록 영역(상영중)
    • 메인-영화 목록 영역(나머지)
    • 메인-영화 목록 버그 수정
    • 상세(디테일)-트레일러
    • 상세(디테일)-정보-1
    • 상세(디테일)-정보-2
    • 상세(디테일)-정보-3
    • 상세(디테일)-정보-4
    • 더보기-1
    • 더보기-2
    • 더보기-3
    • 상세(디테일) - 버그 수정 - 1
    • 상세(디테일) - 버그 수정 - 2
    • 검색 - 1
    • 검색 - 2
    • 검색 - 3
    • 검색 - 4
    • 마무리
    • 상세(디테일) - 버그 수정 3
  • 19. 배포
    • 배포-1
    • 배포-2

수강생 강의 후기

  • 5명 참여 / 5.0(5 ratings)
5
100%
4
0%
3
0%
2
0%
1
0%
차유리
처음에 Vue.js가 좀 어려울까 걱정했는데, 강의가 너무 잘 되어 있어서 생각보다 금방 이해할 수 있었어요! 기본 개념부터 차근차근 설명해주고, 실습도 있어서 실제로 해보면서 배우는 느낌이었어요. 덕분에 Vue.js가 훨씬 친근하게 느껴졌습니다! 강의 듣고 나니까 웹 개발에 대한 자신감이 생겼어요. 강력 추천!🔥🔥
JEK
여러 강의 유목민해봤는데요.. 정말 섬세하게 설명해주셔서 궁금증이 많이 해소되고있는 완전완전 무바탕 초보입니다. 감사합니다!!!
김찬혁
코딩 자율학습 vue.js 책을 다 본 다음에 조금 더 공부하고 싶어서 결제해서 듣고 있습니다. 책에 있는 내용도 있지만 동영상으로 다시 배우니까 새롭네요. 끝까지 완강하도록 노력해보겠습니다. 감사합니다.
sophie
강의 용량, 퀄리티, 최신 버전, 인증/인가까지 기대하는 모든 게 있어요!! 대만족입니다!! 현존하는 Vue3 강의 중 최강..👍
홍정아
공부해야 할게 많아져 동공 지진 온 현직 퍼블리셔.. 강사님 덕분에 회사 업무에 뒤처지지 않아요 ㅠㅠ 꼼꼼하게 설명해 주셔서 느림보도 잘 이해할 수 있어요!!
수코딩 로고수코딩

수코딩은 누구나 쉽게 코딩을 배울 수 있는 온라인 코딩 교육을 만들어갑니다.

대표자: 김기수 | 사업자번호: 208-26-67207 | 통신판매업신고: 2024-성남중원-0311 개인정보관리책임자: 김기수 | 이메일: sucoding@naver.com

유튜브 로고
카카오 채널