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

프론트엔드 코드를 실시간으로 미리보기 가능한 온라인 편집기 추천왜 온라인 편집기를 써야 할까?프론트엔드 개발은 눈에 보이는 결과가 중요한 분야입니다. 직접 작성한 코드를 바로 실행해보며 화면 변화나 동작을 확인하는 과정은 학습과 개발 모두에서 핵심입니다. 이러한 작업을 빠르게 처리하려면 온라인 편집기를 활용하는 것이 가장 효율적입니다. 복잡한 개발 환경 설정 없이 브라우저에서 바로 코드를 실행하고 결과를 확인할 수 있기 때문입니다.대표적인 프론트엔드 온라인 편집기CodeSandbox접속 주소: https://codesandbox.io특징폴더 구조 기반의 실전 프로젝트 작성 가능Vite, CRA, Next.js 등 다양한 템플릿 제공GitHub 연동 및 협업 기능 지원활용 예시포트폴리오 제작컴포넌트 테스트..

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..

Vite란 무엇인가Vite는 모던 프론트엔드 개발을 위한 도구입니다. 여기서 '번들러'란 여러 개의 JavaScript 파일을 하나로 합쳐주는 도구를 말하고, '모듈 핫 리로딩(HMR)'은 코드가 수정되었을 때 전체 페이지를 새로고침하지 않고도 수정된 부분만 실시간으로 반영해주는 기능입니다. Vite는 이러한 기능을 빠르고 효율적으로 제공합니다. 기존의 CRA(Create React App)보다 훨씬 가볍고 빠릅니다.기본 개념개발 시에는 ES Module 방식으로 동작빌드 시에는 Rollup을 활용한 번들링 제공React, Vue, Svelte 등 다양한 프레임워크 지원주요 사용 위치/상황빠른 개발 환경이 필요한 프로젝트React 기반 SPA 또는 MPA 개발 시CRA를 대체할 최신 개발 방식 도입 시구..

1회차: Vite와 React 소개 및 개발 환경 구축Vite란 무엇인가Vite vs CRA 비교Vite + React 프로젝트 생성 실습디렉토리 구조 이해2회차: React의 기본 문법과 JSX 이해JSX 문법 기본JSX에서 JavaScript 표현식 사용법Babel의 역할 간략 소개컴포넌트 기본 구조3회차: 컴포넌트의 구성과 분리함수형 컴포넌트 작성컴포넌트 파일 분리Props 전달과 재사용성실습: 사용자 카드 컴포넌트 만들기4회차: 이벤트 처리와 상태 관리 (useState)이벤트 핸들링 기초useState 훅의 기본 개념실습: 클릭 카운터 만들기컴포넌트 상태의 흐름 이해5회차: 조건부 렌더링과 리스트 렌더링조건부 렌더링 방식: if, 삼항연산자배열 map()을 통한 반복 출력key 속성의 중요성실습..

외부 라이브러리를 디렉티브로 감싸서 사용하는 방법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..

사용자 정의 디렉티브를 정리하고 재사용하기 (컴포지션 방식)문제 상황부터 이해하기이전 시간에 만든 v-focus 디렉티브는 main.js에 하나씩 등록했죠.그런데 나중에 v-focus, v-scroll, v-copy 등 여러 개의 디렉티브를 만들다 보면 main.js가 지저분해지고 관리하기 어려워집니다.그래서 이번 시간에는 여러 디렉티브를 한 곳에 정리해서 자동으로 등록하는 방법을 알려드립니다.1단계: 디렉티브 파일을 폴더에 정리하기먼저 src/directives 폴더를 만들고, 각각의 디렉티브를 파일로 나눕니다.src/directives/focus.jsexport default { mounted(el) { el.focus() }}src/directives/copy.jsexport default..

사용자 정의 디렉티브란?지금까지는 Vue가 기본으로 제공하는 v-if, v-model 같은 디렉티브를 배웠습니다.그런데 개발을 하다 보면 **"직접 나만의 디렉티브를 만들고 싶다"**는 경우가 생깁니다.예를 들어, 어떤 요소가 화면에 보일 때 자동으로 포커스를 주고 싶을 때, 아래처럼 쓸 수 있다면 좋겠죠?이렇게 v-focus는 Vue가 기본으로 제공하지 않기 때문에 내가 직접 만들어야 합니다.이걸 사용자 정의 디렉티브(Custom Directive) 라고 부릅니다. 사용자 정의 디렉티브는 언제 쓰나요?요소에 커스텀한 동작을 적용하고 싶을 때 (예: 자동 포커스, 자동 스크롤)Vue 컴포넌트로 만들기에는 너무 간단한 기능일 때반복적으로 사용하는 동작을 공통화하고 싶을 때예시: 포커스를 자동으로 주는 v-..

디렉티브란? (용어부터 쉽게 설명)**디렉티브(Directive)**는 Vue 템플릿 안에서 HTML 태그에 특별한 역할을 추가해주는 속성입니다.Vue는 기본 HTML에 기능을 덧붙이는 프레임워크이고, 디렉티브는 그 도구 중 하나입니다.Vue에서는 모든 디렉티브가 v-로 시작합니다.예를 들면 아래와 같습니다:v-if: 조건에 따라 보여줄지 말지 결정v-show: 보여주긴 하는데 display: none으로 숨김v-model: 양방향 입력 연결v-on: 이벤트 연결 (예: 클릭)v-for: 목록을 반복해서 출력즉, 디렉티브는 Vue가 HTML을 똑똑하게 만들기 위해 사용하는 문법입니다.디렉티브는 어디에 사용하나요?디렉티브는 보통 HTML 태그에 붙여서 아래처럼 사용합니다:이 문장은 조건에 따라 보여져요 실..

Vue3 디렉티브 완전 정복 시리즈 - 강의 계획안Vue3 Composition API 방식으로 사용자 정의 디렉티브를 처음부터 끝까지 실전 위주로 학습하는 10회 구성 강의입니다.실무에서 유용하게 활용되는 디렉티브 개념, 구현 방법, 외부 라이브러리 연동, 사용자 이벤트 제어 등 다양한 상황을 직접 경험해볼 수 있습니다.1회차: 디렉티브란 무엇인가?주요 내용디렉티브 기본 개념 소개 (v-if, v-for, v-model 등)DOM 제어 역할 이해사용자 정의 디렉티브 필요성기대 결과Vue에서 디렉티브가 하는 역할을 이해하고, 기본 내장 디렉티브를 구분할 수 있다.2회차: 사용자 정의 디렉티브 기본 구조와 등록 방법주요 내용mounted, updated 훅 사용법디렉티브 지역 등록과 전역 등록 방법간단한 ..

1. Vite + Vue 프로젝트 초기 세팅 방법Node.js 설치Node.js LTS 버전(14 이상) 설치 필요프로젝트 생성npm create vite@latest my-vue-app -- --template vue프로젝트 디렉터리 이동cd my-vue-app의존성 설치npm install개발 서버 실행npm run dev브라우저에서 http://localhost:5173 접속2. 주요 설정 파일vite.config.jsVite 빌드 및 플러그인 설정 담당기본 예시: Vue 플러그인 추가import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'export default defineConfig({ plugins: [vue()], ..

◾ 강의 개요항목내용강의명Vue 3 + Vite 실전 가이드대상Vue.js 입문자 및 React 경험자, 프론트엔드 실무 개발 입문자선행지식HTML/CSS, JS 기초, 모듈 개념, React 경험자 우대총 강의시간8회차 × 2시간 = 총 16시간강의방식Vite 기반 개발 환경 실습, 컴포지션 API 적용 프로젝트 중심 실습 ◾ 강의 목표Vite 기반 Vue 3 프로젝트 구성과 실행 구조를 이해한다.Composition API의 구조와 작성 방법을 체득한다.컴포넌트 중심 설계, 상태관리, 라우팅, API 통신까지 실습한다.To-do List 완성 프로젝트를 통해 Vue SPA 구조를 실전 감각으로 익힌다.◾ 회차별 강의 내용 회차 주제 ..