핵심만 골라 배우는 Vue.js

잠시만요!

강의에도 나와 맞는 '결'이 있다는 거 아시나요?

누구에게나 인정받는 대작 게임이 나에게는 재미없을 수 있는 것처럼,
강의도 모두에게 똑같이 맞는 건 아닙니다.

아무리 칭찬이 자자한 강의라도 나와 맞지 않을 수 있고,
반대로 누군가에겐 평범한 강의가 나에겐 최고의 강의가 될 수 있죠.

그래서 제 모든 강의는 최소 10% 이상 무료로 공개되어 있습니다.
직접 들어보고, 저와 스타일의 ‘결’이 맞는지 확인해 보세요!

만약 저와 결이 잘 맞는다면,
프런트엔드 개발자로 가는 가장 빠른 지름길을 안내해 드리겠습니다.
믿고 따라오세요! 🚀

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 기반 애플리케이션 개발 능력을 키울 수 있습니다. 🚀