Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
프로젝트로 쉽게 배우는 Vue.js 3 기본편(Composition API와 Pinia 반영!)
Rating: 4.7 out of 5(220 ratings)
846 students

프로젝트로 쉽게 배우는 Vue.js 3 기본편(Composition API와 Pinia 반영!)

프로젝트 실습을 통한 기본기 부터 빌드 및 배포까지 더욱 편리해진 Composition API와 전역상태관리 Pinia로 프론트엔드 개발을 쉽게 배워보세요!
Created byMichael Kwon
Last updated 9/2024
Korean
Korean [Auto],

What you'll learn

  • 프로젝트 위주로 Vue3의 기본기를 배웁니다.
  • 컴포넌트 작성 방법과 데이터 바인딩, 이벤트 처리, 조건부 렌더링 등의 기본적인 Vue 디렉티브 기능 등을 습득합니다.
  • Vue Router를 사용하여 다양한 페이지 간의 라우팅 및 네비게이션 구현, 동적 라우팅을 배웁니다.
  • Vue3의 간편한 문법인 Composition API에 대해 배우고 프로젝트로 실습합니다.
  • Vue3에 최적화된 빌드도구인 Vite를 통해 프로젝트를 빌드하고 배포합니다.
  • Vuex와 Pinia 라이브러리를 활용한 전역상태관리 방법을 배웁니다.
  • 날씨 앱을 통해 API 서버에 데이터를 요청하는방법을 배웁니다.

Explore related topics

Course content

5 sections • 61 lectures • 5h 2m total length

  • 소개1:39

    Vue.js에 대한 소개 및 프론트엔드 프레임워크의 역할과 특징에 대해 설명합니다.

  • 개발환경 설정2:32

    자바스크립트 애플리케이션 실행 환경인 Node.js와 NPM 패키지 매니저를 설치하여 개발환경 설정을 준비합니다

  • Vue 3 프로젝트 생성2:42

    vue cli를 통해 프로젝트를 생성합니다.

  • 문서에 데이터 표시하기4:56

    • 데이터 변수들을 화면에 출력하는 방법

    • 스타일 추가하기

    • 속성에 데이터 바인딩 하는 방법

  • 반복문으로 영화정보 표시하기5:31

    v-for 반복문에 대해 학습합니다.

  • click 이벤트로 좋아요 버튼 만들기4:48

    click 이벤트로 좋아요 버튼 기능을 만들고 각 영화정보 별로 좋아요 정보 업데이트 되도록 구현합니다.

  • 이미지와 모달창6:03

    이미지를 불러오는 방법과 상세페이지 모달창을 열고 닫는 기능을 학습합니다.

  • 영화 데이터를 외부에서 가져오기4:37

    외부에 작성한 영화데이터를 export로 내보내고 import 문법으로 가져옵니다.

  • 모달창 내용 동적으로 보여주기1:48

    모달 창에 클릭한 영화정보를 동적으로 표시합니다.

  • component로 기능별 UI 분리하기6:08

    영화정보 홈페이지의 주요 UI 요소들을 component로 분리하여 작성합니다.

  • 자식 component에 데이터 전달하기5:37

    컴포넌트로 분리된 상세정보(모달)창에 데이터를 전달합니다.

    props 문법으로 부모 컴포넌트에서 자식 컴포넌트에게 데이터를 전달합니다.

  • 부모 component에게 데이터 변경 요청하기4:58

    $emit()이라는 커스텀 메소드를 사용하여 자식 컴포넌트에서 이벤트를 발생시켜 부모 컴포넌트에게 데이터 변경을 요청할 수 있습니다. 해당 기능을 이용하여 모달 컴포넌트에서 창을 닫는 기능까지 완성합니다.

  • 영화 목록을 component로 만들기5:48

    component간 데이터 통신의 종합적인 응용입니다.


    • 영화목록을 component로 만들어 props를 통해 영화 데이터를 전달합니다.

    • 좋아요 버튼과 상세보기 관련 props를 전달하고 $emit을 통해 해당 기능이 동작할 수 있도록 합니다.

  • class를 동적으로 다루기5:22

    class를 동적으로 추가하는 방법에 대해 알아보고 이를 이벤트 창에 적용하여 닫기 기능을 구현합니다.

  • 검색창 입력기능4:08

    • 검색창에 사용자의 입력을 받는 기능을 구현합니다.

    • v-model 속성으로 사용자의 입력을 간편하게 처리할 수 있습니다.

  • 검색창 입력값 검사하기4:21

    watch 기능으로 검색창에 텍스트가 입력될 때 어떤 텍스트가 입력되었는지 검사하는 기능을 추가합니다.

  • 검색기능 구현 1/26:08

    실제 영화 데이터를 가져와서 검색어에 입력된 값과 영화제목을 비교하여 찾는 로직을 구현하고 검색 실패 시 경고 메시지를 출력하게 합니다.

  • 검색기능 구현 2/26:15

    • 검색어를 입력하면 영화데이터를 검색하는 기능을 구현합니다.

    • 배열 데이터 복사를 다루는 방법에 대해 학습합니다.

    • 영화 검색 결과를 확인한 후, 다시 전체보기로 돌아가는 기능을 구현합니다.

  • 좋아요가 클릭이 안되는 문제-고유 id3:54

    영화 데이터를 검색하여 좋아요 버튼이나 상세보기 창으로 연결시 정보가 올바르게 업데이트가 되지 않는 이유와 그 해결책으로 영화 데이터에 고유 id 속성을 부여하여 조회하는 방법에 대해 학습합니다.

  • 이벤트창 광고 텍스트 순환 1/26:03

    이벤트 창의 광고 텍스트가 일정 시간이 지나면 다른 내용으로 업데이트 되도록 합니다. 이와 관련하여 라이프사이클 훅에 대해서 공부합니다.

  • 이벤트창 광고 텍스트 순환 2/23:51

Requirements

  • HTML, CSS, JavaScript에 대한 기초적인 이해가 필요합니다.
  • 가능한 짧고 간결한 구성을 추구하였으니 짬짬이 시간을 내어 들어주시면 완강할 수 있어요!

Description

강의 개요:

이 강의는 최신 웹 개발 트렌드에 부합하는 Vue 3와 Vite를 중심으로 구성되었습니다. Vue 3는 Composition API를 도입하여 더 모듈러하고 간결한 코드 작성을 지원하며, Vite는 빠르고 간편한 빌드 도구로 최신 프론트엔드 개발에 이상적입니다.

문법만 배우다 지루해서 포기하지 마시고 프로젝트를 만들면서 배워보세요!

- 2024 3월 API 활용 및 Vuex 관련 추가 콘텐츠 업데이트 완료

- 2024 3월 새로운 상태관리 라이브러리 Pinia 관련 콘텐츠 업데이트 완료


주요 내용:

  1. 영화정보:

    • Vue 3의 주요 특징과 기본 기능을 학습

    • 컴포넌트, 데이터 관리, props, 이벤트 핸들링, 라이프사이클 등


  2. 포트폴리오 홈페이지:

    • Vue 3와 Vite를 사용하여 프로젝트 초기 설정부터 빌드 및 배포까지

    • Composition API 활용

    • 페이지 라우팅

    • Bootstrap5와 SASS로 스타일링 하기

    • 빌드 및 배포하기


  3. 날씨정보 앱

    • 서버에 데이터 요청하기

    • 날씨 API 활용

    • props와 emit으로 데이터 관리

    • Vuex로 전역 상태관리 마이그레이션


  4. 더 나은 상태관리를 위한 Pinia

    • Vue 개발자 도구 활용하기

    • 스토어에 데이터를 저장하는 방법

    • 컴포넌트에서 store에 접근하는 방법


Who this course is for:

  • HTML, CSS, JavaScript에 대한 기초적인 이해가 있지만 프레임워크나 라이브러리를 사용한 경험이 적은 분
  • Vue에 대한 기본기 습득을 원하는 분
  • 실습 위주로 빠르게 공부하고 싶은 분

Report abuse