실무 첫걸음, 생성형 AI로 배우는 UX/UI & 프론트엔드

이번 강의에서는 TodoList 앱을 더 편리하게 사용할 수 있도록**사용자 경험(UX)**을 개선하는 방법을 배웁니다.불필요한 동작을 줄이고, 실수를 방지하며, 사용 흐름을 자연스럽게 만드는 것이 목적입니다.주요 개선 내용입력 후 자동 포커스 처리빈 값 등록 방지Enter 키로 바로 등록불필요한 스페이스 입력 제거등록 시 버튼 클릭 없이 바로 반응개선된 입력 폼 코드 추가 UX 개선 포인트 설명자동 포커스ref="inputRef"를 설정하고 onMounted()에서 .focus() 호출앱 실행 시나 항목 추가 후 입력창에 자동 커서 이동Enter 키 처리@keyup.enter 이벤트를 통해 버튼 클릭 없이 할 일 추가 가능공백 제거 및 예외 처리trim()으로 불필요한 ..

이번 강의에서는 할 일 목록을 전체 / 완료 / 미완료로 나누어 볼 수 있는 필터링 기능을 구현합니다.사용자가 버튼을 클릭하면 해당 조건에 맞는 항목만 화면에 출력됩니다.구현 흐름필터 상태(state) 선언필터 버튼 클릭 시 상태 변경computed를 사용해 조건에 맞는 목록 계산필터 버튼 및 출력 목록 예시 전체 미완료 완료 핵심 포인트 설명filter 상태현재 선택된 필터 값을 ref로 관리 (all, active, done)버튼 클릭 시 setFilter()를 통해 필터 상태 변경computed로 조건부 목록 계산filteredTodos는 filter 값에 따라 보여줄 목록을 계산UI에는 todos가 아니라 filteredTodos를 출력스타일 분기선택된 버튼에만..

이번 강의에서는 사용자가 입력한 Todo 목록을 브라우저 로컬스토리지에 저장하고,페이지를 새로고침해도 데이터를 유지할 수 있도록 기능을 확장합니다.구현 흐름앱 실행 시 localStorage에서 기존 데이터 불러오기todos가 변경될 때마다 localStorage에 자동 저장JSON 형태로 직렬화/역직렬화 처리TodoList.vue 전체 코드 예시 추가 주요 포인트 설명onMounted()Vue 컴포넌트가 마운트된 직후 실행되는 생명주기 훅입니다.이 시점에 localStorage에서 저장된 데이터를 불러옵니다.watch()todos 배열이 변경될 때마다 해당 값을 감지하고, localStorage에 자동 저장합니다.{ deep: true } 옵션을 주어 객체 내부까지 감지..

이번 강의에서는 각 할 일 항목의 완료 여부를 시각적으로 표시하고,클릭 시 완료 상태를 **토글(변경)**할 수 있는 기능을 추가합니다.구현 흐름todos 항목에 isDone 속성 포함완료 상태에 따라 텍스트 스타일 분기항목 클릭 시 isDone 값을 반전TodoItem.vue: 상태 토글 및 스타일 분기 {{ todo.text }} @click 이벤트로 부모에 toggle 이벤트 전달:class="{ done: todo.isDone }"를 통해 완료 상태일 때만 스타일 적용완료 항목은 회색 글자와 취소선 표시TodoList.vue: toggle 이벤트 수신 및 상태 변경 @toggle 이벤트를 받아 toggleTodo() 실행클릭한 항목의 isDone 값을 반전시킴이렇게 하면 사..

이제 입력한 할 일을 삭제할 수 있는 기능을 추가해보겠습니다.삭제 기능은 각 Todo 항목에서 삭제 버튼을 클릭하면 해당 항목을 리스트에서 제거하는 방식으로 작동합니다.구현 흐름TodoItem.vue에 삭제 버튼 추가클릭 시 상위 컴포넌트로 이벤트 발생 (emit)TodoList.vue에서 해당 항목 삭제 처리TodoItem.vue: 삭제 버튼과 emit {{ todo.text }} 삭제 @click으로 삭제 버튼을 누르면 delete라는 사용자 정의 이벤트 발생$emit('delete')는 상위 컴포넌트(TodoList)에서 처리할 수 있도록 이벤트를 전달하는 역할TodoList.vue: 이벤트 수신과 항목 제거 @delete="deleteTodo(index)"는 TodoI..

Vue 앱에서 리스트 데이터를 화면에 출력할 때는 v-for 디렉티브를 사용합니다. 이 강의에서는 Todo 항목을 반복 출력하고, 각 항목을 별도 컴포넌트로 분리하여 구성합니다.전체 흐름todos 배열을 v-for로 반복 출력각 항목을 TodoItem.vue 컴포넌트로 렌더링props를 사용해 항목 데이터 전달리스트 출력 예시 여기서는 TodoItem 컴포넌트를 반복 출력하고, 각각에 todo 객체를 props로 전달합니다.key는 리스트 항목의 고유성을 보장하기 위한 필수 속성입니다. 여기서는 간단히 인덱스를 사용했지만 실제로는 고유 ID 사용을 권장합니다.항목 컴포넌트 구성 {{ todo.text }} TodoItem.vue는 props로 받은 todo 객체의 내용을 화면에 출..

이번 강의에서는 사용자가 직접 할 일을 입력하고 리스트에 추가할 수 있는입력 기능(addTodo)을 구현합니다. 이 기능은 Todo 앱의 가장 핵심이 되는 부분입니다.입력 기능 구성 흐름input 요소에 v-model로 입력값 바인딩form 제출 시 addTodo() 함수 실행입력값이 유효할 경우 todos 배열에 추가입력창 초기화입력창과 추가 기능 코드 추가 주요 개념 설명v-modelVue의 양방향 바인딩 디렉티브로, 사용자 입력값을 newTodo라는 상태 변수에 실시간 반영합니다.@submit.prevent폼의 기본 동작(페이지 새로고침)을 막고, 사용자 정의 함수인 addTodo()만 실행되도록 합니다.입력값 유효성 검사빈 문자열 입력을 방지하기 위해 trim()을 사용하고, 조..

Vue3 애플리케이션은 여러 개의 컴포넌트로 구성됩니다.이번 강의에서는 TodoList 앱의 전체 구조를 설계하고, 주요 컴포넌트를 나누는 방법을 실습합니다.구조 설계 목표App.vue: 전체 레이아웃 담당TodoList.vue: 입력창과 리스트 묶음 처리TodoItem.vue: 개별 항목 처리이처럼 역할 단위로 컴포넌트를 분리하면, 유지보수가 쉬워지고 기능 확장이 유연해집니다.레이아웃 구성 예시 My Todo List App.vue는 전체 앱의 레이아웃을 담당하며, 내부에 TodoList 컴포넌트를 배치합니다.TodoList 컴포넌트 초기 구조 이렇게 기본적인 레이아웃과 컴포넌트 구조만 설정해두고, 기능은 이후 강에서 점진적으로 채워나갑니다.폴더 및 파일 구조 예시src/..

npm create vite@latest vue-todolist -- --template vuecd vue-todolistnpm installnpm run dev용어 먼저 이해하기Vite란?Vite는 Vue.js의 핵심 개발자 Evan You가 만든 차세대 프론트엔드 빌드 도구입니다.기존 Webpack보다 훨씬 빠른 개발 서버 구동과 빌드 속도를 제공합니다.Vue3란?Vue는 가볍고 직관적인 프론트엔드 프레임워크이며,Vue3는 Composition API 기반으로 더 유연하고 확장 가능한 구조를 제공합니다.npm create vite@latestVite 프로젝트를 최신 버전으로 생성하는 명령어입니다.Vue, React, Svelte 등 다양한 템플릿 중 vue를 선택합니다.실제 설치 단계1. Node.j..

프론트엔드를 처음 배우는 분들을 위해Vite와 Vue3를 활용해 실제 동작하는 TodoList 앱을 직접 만들어보는 실습 중심 강의 시리즈입니다.이 시리즈는 다음과 같은 흐름으로 구성되어 있습니다:1강: 개발환경 세팅 및 프로젝트 생성2~6강: 컴포넌트 분리, 항목 등록·삭제·완료처리 기능 구현7~9강: 로컬 저장, 필터링, 사용자 경험 개선10강: Netlify를 활용한 실전 배포실습만 따라와도 Vue3의 핵심 개념과 프론트엔드 개발 흐름을 자연스럽게 익힐 수 있도록 구성했습니다.특히 Composition API 기반 실습을 통해 Vue3의 최신 문법에 익숙해질 수 있습니다. 이런 분께 추천합니다프론트엔드 입문자Vue3와 Vite를 실전으로 익히고 싶은 분기초 프로젝트 완성 경험이 필요한 수강생/강사1..

실전 목표로그인한 사용자만 특정 버튼이나 기능을 사용할 수 있도록 제한하는 디렉티브를 만들어봅니다.로그인하지 않은 사용자가 버튼을 누르면 경고 메시지가 뜨고, 동작은 막아야 합니다.기능 설명로그인 상태는 전역 상태(isLoggedIn)로 관리v-guard 디렉티브를 통해 버튼에 제어 기능 부여로그인하지 않은 경우:버튼 클릭 차단경고 메시지 출력1단계: 전역 상태 만들기간단한 전역 상태를 app.config.globalProperties에 저장합니다.// main.jsconst app = createApp(App)app.config.globalProperties.$auth = { isLoggedIn: false}실제 프로젝트에선 Pinia나 Vuex 같은 상태 관리 도구를 사용합니다.2단계: v-guar..

v-model과 사용자 정의 디렉티브의 차이점과 직접 구현해보기Vue에서 양방향 바인딩을 할 때 자주 사용하는 v-model.이번 시간에는 v-model의 작동 방식과, 비슷한 기능을 디렉티브로 직접 만들어보는 방법을 다룹니다.v-model이란?양방향 바인딩을 위한 기본 디렉티브사용자가 입력한 값을 자동으로 변수에 반영하고, 변수 값이 바뀌면 화면도 바뀜예시{{ message }}사용자가 입력한 값이 message에 자동으로 들어가고, message가 바뀌면 다시 화면도 자동 업데이트 됩니다.사용자 정의 디렉티브로 v-model처럼 만들기목표v-model 없이도, 사용자의 입력값을 변수에 실시간으로 반영할 수 있는 디렉티브 만들기구현v-model-lite 디렉티브 만들기// directives/model..

외부 라이브러리를 디렉티브로 감싸서 사용하는 방법Vue 프로젝트를 하다 보면, **타사 외부 라이브러리(예: animation.js, clipboard.js 등)**를 사용해야 할 때가 있습니다.이럴 때 Vue 디렉티브를 사용하면 라이브러리를 간단하게 통합할 수 있습니다.실전 예제: ScrollReveal.js로 스크롤 애니메이션 구현하기 목표스크롤할 때 요소가 부드럽게 나타나도록 애니메이션을 적용합니다.이 기능을 디렉티브로 감싸서 원하는 요소에 쉽게 붙일 수 있게 만들겠습니다.1단계: 라이브러리 설치npm install scrollreveal2단계: 디렉티브로 감싸기src/directives/reveal.jsimport ScrollReveal from 'scrollreveal'export default..

디렉티브 vs 컴포넌트, 언제 무엇을 써야 할까?Vue를 배우다 보면 이런 질문이 생깁니다:"이 기능, 디렉티브로 만들까? 컴포넌트로 만들까?"이번 시간에는 이 두 가지의 차이를 정확히 이해하고, 언제 디렉티브를 쓰고 언제 컴포넌트를 써야 하는지 정리해드립니다.개념 비교: 디렉티브 vs 컴포넌트항목 디렉티브 컴포넌트목적DOM 조작 중심의 기능 재사용UI 구조 + 로직 재사용형태v-my-directive처럼 속성처럼 사용처럼 태그 형태기능 범위간단한 동작 1~2개템플릿 + 스타일 + 로직 전체 포함예시포커스, 복사, 스크롤 등카드 UI, 모달 창, 폼 등디렉티브가 적합한 상황HTML 요소에 작은 동작만 추가하고 싶을 때복잡한 UI 없이 DOM 조작만 필요할 때이벤트 등록, 포커스 제어, 스타일 변경 등에 ..

실무에서 유용한 사용자 정의 디렉티브 예제 3가지이번 회차에서는 직접 써먹을 수 있는 실무형 사용자 정의 디렉티브를 3가지 소개합니다.각 예제는 실제 프로젝트에서 자주 등장하는 요구사항입니다.예제 1: v-auto-focus — 자동 포커스기능 설명페이지가 열리면 자동으로 입력창에 커서를 넣어주는 디렉티브입니다.구현// directives/autoFocus.jsexport default { mounted(el) { el.focus() }}사용 예로그인 폼, 검색창 등에 자주 사용됩니다.예제 2: v-copy — 클릭 시 텍스트 클립보드 복사기능 설명버튼이나 텍스트를 클릭하면 원하는 문자열을 클립보드에 복사합니다.구현// directives/copy.jsexport default { mounte..