Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
장기효(캡틴판교)
Vue.js 중급 강좌 - '누구나', '쉽게', '훌륭한' 웹 어플리케이션을 만들 수 있도록 도와주는 Vue.js 활용 강좌 입니다. Vue.js 에 대한 기본적인 이해를 바탕으로 Todo 앱을 만들어 보며 코드 중심의 실용적인 지식을 배우게 됩니다.
중급이상
JavaScript, Vue.js, ES6
핵심만 골라 배우는 Vue.js
프론트엔드 입문자들은 필수적으로 익혀야하는 Vue.JS!! 기초부터 시작해서 고급에 이르기까지 Vue.JS를 샅샅히 파헤쳐봅니다!
초급자를 위해 준비한
[프론트엔드, Vue.js] 강의입니다.
이런 걸 배울 수 있어요
Vue2 문법 전체
Vue 3 기본 개념 (Vue 인스턴스, 템플릿 문법, 데이터 바인딩)
Composition API 사용법 (reactive, ref, computed, watch)
Vue Router 설정 및 라우팅
Pinia 상태 관리
Vue 3의 반응성 시스템
컴포넌트 설계와 데이터 전달 (Props, Emits, Slots)
Vue 3 라이프사이클 훅 사용법
Composition API vs 옵션 API
서버와의 통신 (Axios, Fetch, async/await)
애플리케이션 성능 최적화
Vue 앱 빌드 및 배포
computed & watch
사람인 글자수 세기
Vue 3의 핵심 기능인 computed와 watch를 활용하여,
사람인 사이트에서 사용되는 글자수 세기 기능을 직접 클론 코딩해봅니다.
computed를 사용해 입력된 글자 수를 실시간으로 계산하고,
watch를 활용하여 사용자의 입력 변화를 효율적으로 감지합니다.
실무에서 활용되는 기능을 그대로 구현하면서,
반응형 데이터 처리의 개념을 쉽고 명확하게 익힐 수 있습니다! 🚀
component
검색어 자동완성
Vue 3의 핵심 개념인 컴포넌트(Component)를 활용하여
검색 엔진 서비스에서 자주 사용하는 검색어 자동완성 기능을 직접 구현해봅니다.
컴포넌트 분리를 통해 검색창과 자동완성 리스트를 효율적으로 관리합니다.
props와 emit을 활용해 컴포넌트 간의 데이터 흐름을 자연스럽게 익힙니다.
실시간 데이터 렌더링으로 사용자 입력에 빠르게 반응하는 인터랙티브한 UI 구현까지!
실무에서 바로 사용할 수 있는 기능을 직접 만들어보며
Vue 컴포넌트의 활용 방법과 구조화된 개발 방식을 배울 수 있습니다. 🚀
컴포넌트 심화
탭 메뉴 UI
Vue 3의 다이나믹 컴포넌트(Dynamic Component) 개념을 활용하여
사용자 경험을 높이는 탭 메뉴 UI를 직접 구현해봅니다.
동적 컴포넌트 전환으로 여러 탭 콘텐츠를 효율적으로 관리합니다.
v-bind와 is 속성을 사용해 유연한 컴포넌트 렌더링을 학습합니다.
상태 관리와 이벤트 핸들링으로 탭 간의 자연스러운 전환을 구현합니다.
이 과정을 통해 복잡한 UI도 재사용 가능하고 확장성 있는 컴포넌트로 만드는 방법을 익힐 수 있습니다. 🚀
할일관리앱
Todo List
Vue 3에서 배운 모든 개념과 기술을 활용하여
완성도 높은 Todo List 애플리케이션을 직접 만들어봅니다.
컴포넌트 분리를 통해 할 일 추가, 삭제, 수정 기능을 효율적으로 관리합니다.
Reactive 데이터 바인딩으로 실시간 상태 변화에 반응하는 UI를 구현합니다.
computed, watch, v-model을 활용해 상태 관리와 데이터 흐름을 자연스럽게 익힙니다.
로컬 스토리지를 활용하여 데이터 영구 저장 기능까지 구현!
이 프로젝트를 통해 Vue의 핵심 기능들을 실전처럼 통합하고,
실무에서 바로 사용할 수 있는 개발 역량을 키울 수 있습니다. 🚀
Auth
인증과 인가
웹 애플리케이션의 핵심 기능인 인증(Authentication)과 인가(Authorization) 개념을 명확하게 이해하고,
**JWT(Json Web Token)**를 활용하여 안전한 로그인 기능을 직접 구현해봅니다.
인증과 인가의 차이를 이론과 실습을 통해 명확히 구분합니다.
JWT 토큰 발급 및 검증 과정을 통해 보안성 높은 로그인 로직을 학습합니다.
토큰 저장 및 관리(LocalStorage, SessionStorage) 방법을 실습합니다.
로그인 후 사용자 정보를 안전하게 유지하고, 권한에 따라 접근 제어하는 방법을 배웁니다.
이 과정을 통해 프런트엔드 개발자에게 필수적인 인증·인가 개념을 실전처럼 경험하고,
안전하고 효율적인 사용자 관리 방법을 익힐 수 있습니다. 🚀
Movie
Movie App 🎬
지금까지 배운 Vue 3의 모든 개념과 기술을 활용하여
영화 정보를 제공하는 웹 애플리케이션을 직접 만들어봅니다.
외부 영화 API를 활용하여 실시간으로 영화 데이터를 가져오고 표시합니다.
컴포넌트 구조화로 영화 목록, 상세 정보, 검색 기능 등을 효율적으로 관리합니다.
Axios를 활용한 API 요청 및 비동기 처리로 데이터 흐름을 제어합니다.
라우터(Vue Router)를 이용해 페이지 전환 기능을 구현하고, 동적 라우팅도 경험합니다.
반응형 UI와 상태 관리를 통해 실전 같은 사용자 경험(UX)을 제공합니다.
이 프로젝트를 통해 Vue 3의 핵심 기능을 통합적으로 활용하며,
실무에 가까운 개발 경험과 함께 API 기반 애플리케이션 개발 능력을 키울 수 있습니다. 🚀
이런 분들께
추천드려요!
학습 대상은
누구일까요?
뷰를 한 번도 공부해본 적 없는 사람
뷰를 공부하려고 시도했지만, 번번히 포기한 사람
뷰를 사용해서 당장이라도 서비스를 만들어야 하는 사람
복잡한 설명 없이 단순하고 쉽게 배우고 싶은 사람
선수 지식,
필요할까요?
HTML/CSS
JavaScript
안녕하세요
수코딩입니다.
3,961
명
수강생
162
개
수강평
52
개
답변
4.9
점
강의 평점
6
개
강의
수코딩은 온라인과 오프라인을 병행하면서
코딩을 가르치는 활동을 하고 있습니다.
다년간의 오프라인 강의 경험을 바탕으로,
더 많은 사람들이 코딩을 쉽고 재미있게 배울 수 있도록
매일 고민하고, 끊임없이 노력하고 있습니다.
현재까지 다음과 같은 3권의 책을 출판하며
프런트엔드 강의 분야를 선도하고 있습니다:
또한, 유튜브 채널을 통해 다양한 무료 강의도 제공하고 있습니다.
👇 지금 바로 방문해 보세요
[유튜브 채널 링크]
커리큘럼
전체
229개 ∙ (23시간 32분)
해당 강의에서 제공:
수업자료
맥OS_개발 환경 설정
23:23
Prettier 설정
04:36
기본 구조 살펴보기
10:51
npm run dev
03:59
애플리케이션 실행 순서
04:43
SFC
06:23
(실습) Exercise 1
03:28
(해설) Exercise 1
03:12
텍스트 보간
03:59
단축 메서드명
01:54
강의 게시일:
마지막 업데이트일:
수강평
전체
1개
5.0
1개의 수강평
비슷한 강의
같은 분야의 다른 강의를 만나보세요!
![기획자님 이 정도 웹 개발은 배워보면 어떨까요? [이론+실습]강의 썸네일](https://cdn.inflearn.com/public/courses/333579/cover/5bfdb903-721c-4e32-803b-ed0d4cfc28b7/333579.png?w=420)
