Vite와 Vue3를 활용해 실제 동작하는 TodoList 앱을 직접 만들어보는 실습 중심 강의 시리즈
이 시리즈는 다음과 같은 흐름으로 구성되어 있습니다:
- 1강 개발환경 세팅 및 프로젝트 생성
- 2~6강 컴포넌트 분리, 항목 등록·삭제·완료처리 기능 구현
- 7~9강 로컬 저장, 필터링, 사용자 경험 개선
- 10강 Netlify를 활용한 실전 배포
실습만 따라와도 Vue3의 핵심 개념과 프론트엔드 개발 흐름을 자연스럽게 익힐 수 있도록 구성했습니다.특히 Composition API 기반 실습을 통해 Vue3의 최신 문법에 익숙해질 수 있습니다.
이런 분께 추천합니다
- 프론트엔드 입문자
- Vue3와 Vite를 실전으로 익히고 싶은 분
- 기초 프로젝트 완성 경험이 필요한 수강생/강사
1강. 개발환경 준비 및 프로젝트 생성
- Node.js 설치 확인
- Vite + Vue3 프로젝트 생성
- 의존성 설치 및 개발 서버 실행
- 주요 폴더 구조 설명
2강. 컴포넌트 구조 설계 및 레이아웃 구성
- TodoList 기본 화면 설계
- App.vue, TodoList.vue, TodoItem.vue 구조 나누기
- CSS 기본 스타일 설정 (선택: Tailwind 적용 방법도 설명)
3강. 입력창과 추가 기능 구현
- v-model을 사용한 입력값 바인딩
- 새로운 Todo 항목 객체 구조 정의
- 리스트 배열에 추가하는 로직 구현
- @submit.prevent 활용법 설명
4강. 리스트 출력과 항목 컴포넌트화
- v-for를 통한 반복 렌더링
- key 속성 사용 이유
- TodoItem.vue로 항목 분리 및 props 전달
5강. 삭제 기능 구현
- 자식 컴포넌트에서 부모로 이벤트 전달 (emit)
- 배열에서 항목 삭제하는 로직
- 각 항목에 삭제 버튼 추가
6강. 완료 상태 표시 및 토글 구현
- 완료 상태 속성 추가 (isDone)
- 항목 클릭 시 상태 변경
- 완료된 항목 스타일 분기처리
7강. 로컬스토리지 저장 및 불러오기
- mounted() 훅에서 저장된 데이터 로드
- watch로 todos 배열 감시 후 저장
- JSON.stringify와 JSON.parse 사용법 설명
8강. 필터 기능 구현 (전체/완료/미완료)
- computed를 활용한 필터링 목록
- 상태 필터용 버튼 UI 추가
- 현재 필터 상태에 따른 리스트 출력
9강. 사용자 경험 개선
- 입력창 초기화, 포커싱 처리
- Enter 키 입력 시 자동 등록
- 빈 값 입력 방지
10강. 빌드 및 Netlify 배포하기
- vite.config.js 설정 확인
- npm run build로 배포용 빌드 생성
- Netlify 가입 및 GitHub 연동
- dist 폴더로 정적 배포하는 방법
- 사용자에게 공개 링크 전달
단계 요약
- 개발환경 세팅: Node.js, Vite, Vue3
- 컴포넌트 구성: App → TodoList → TodoItem
- 기능 구현: 등록, 삭제, 완료체크, 필터링
- 상태 저장: LocalStorage
- 사용자 경험: UX 최적화
- 배포: Netlify 정적사이트 배포
의견을 남겨주세요