본문 바로가기
반응형

분류 전체보기166

[Vue] 5장: 조건부 렌더링 - 상황에 맞는 UI 보여주기 5장: 조건부 렌더링 - 상황에 맞는 UI 보여주기조건부 렌더링은 특정 조건에 따라 다른 엘리먼트나 컴포넌트를 렌더링하는 기법입니다. Vue에서는 v-if, v-else-if, v-else, v-show 디렉티브를 사용하여 이를 구현합니다.1. 핵심 개념 및 기법v-if, v-else-if, v-else:v-if는 디렉티브의 표현식이 true일 때만 블록을 렌더링합니다.v-else-if는 이전 v-if 또는 v-else-if 블록이 false일 때 자신의 조건을 검사합니다.v-else는 앞선 모든 v-if, v-else-if 조건이 false일 때 렌더링됩니다.이 디렉티브들은 "실제" 조건부 렌더링입니다. 조건이 false이면 해당 엘리먼트와 그 안의 자식 컴포넌트들은 DOM에서 완전히 제거되고 파괴됩니.. 2025. 9. 23.
[Vue] 4장: 이벤트 핸들링 - 사용자와의 상호작용 4장: 이벤트 핸들링 - 사용자와의 상호작용사용자의 클릭, 입력, 마우스 움직임 등 다양한 행동에 반응하는 방법을 배웁니다. Vue의 v-on 디렉티브를 사용하여 DOM 이벤트를 수신하고 JavaScript 코드를 실행할 수 있습니다.1. 핵심 개념v-on 디렉티브: DOM 이벤트를 수신하고 특정 JavaScript 코드를 실행하는 데 사용됩니다. 단축 문법으로 @를 사용합니다. (예: v-on:click -> @click)메서드 핸들러: 이벤트가 발생했을 때 실행할 로직이 복잡할 경우, {{ message }} 클릭하세요 이곳에 마우스를 올려보세요. 폼 제출 예제 2: 이벤트 핸들러에 인자 전달하기map 안에서 특정 항목에 .. 2025. 9. 23.
[Vue] 3장: 반응성과 생명주기 - 살아 움직이는 컴포넌트 3장: 반응성과 생명주기 - 살아 움직이는 컴포넌트반응성(Reactivity)은 Vue의 가장 핵심적인 특징입니다. 데이터가 변경되면 화면이 자동으로 업데이트되는 원리를 이해하고, 컴포넌트의 '생명'과도 같은 생명주기 훅을 다루는 방법을 배웁니다.1. 핵심 개념반응형 상태(Reactive State): Vue는 JavaScript 객체를 프록시(Proxy)하여, 객체의 속성이 변경되는 것을 감지하고 관련 UI를 자동으로 업데이트합니다.ref: 원시 값(primitive value, 예: String, Number, Boolean)을 반응형으로 만들기 위해 사용합니다. ref는 .value 속성을 가진 객체를 반환하며, 스크립트 내에서는 항상 .value로 값에 접근해야 합니다. (템플릿에서는 자동으로 ... 2025. 9. 23.
[Vue] 2장: Props - 컴포넌트에 생명 불어넣기 2장: Props - 컴포넌트에 생명 불어넣기Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 통로입니다. Props를 통해 재사용 가능한 동적인 컴포넌트를 만드는 방법을 배웁니다.1. 핵심 개념Props (Properties): 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터 묶음입니다. 자식 컴포넌트는 defineProps 매크로를 사용하여 수신할 props를 명시적으로 선언해야 합니다.단방향 데이터 흐름 (One-Way Data Flow): 모든 props는 부모와 자식 사이에 하향식 바인딩을 형성합니다. 부모 속성이 업데이트되면 자식으로 전달되지만, 자식 컴포넌트 내에서 props를 직접 변경해서는 안 됩니다. 이는 데이터 흐름을 예측 가능하게 만듭니다.Props 선언: .. 2025. 9. 23.
[Vue] 1장: 템플릿과 컴포넌트 - Vue.js의 첫인상 1장: 템플릿과 컴포넌트 - Vue.js의 첫인상Vue 개발의 가장 기본이 되는 두 가지 개념, 템플릿 문법과 컴포넌트에 대해 배웁니다. UI를 레고 블록처럼 조립 가능한 부품으로 만드는 방법을 이해합니다.1. 핵심 개념컴포넌트(Component): Vue는 UI를 "싱글 파일 컴포넌트(Single File Component, SFC)"라는 독립적이고 재사용 가능한 .vue 파일 단위로 나누어 관리합니다. 각 컴포넌트는 자신만의 구조(HTML), 로직(JavaScript), 스타일(CSS)을 하나의 파일 안에 가집니다.템플릿 문법 (Template Syntax): Vue는 렌더링될 DOM을 선언적으로 설명하기 위해 HTML 기반의 템플릿 문법을 사용합니다. 데이터 바인딩, 디렉티브 등 강력한 기능을 제공.. 2025. 9. 23.
[Hono] 6장: 실전 프로젝트 - URL 단축기 만들기 (on Cloudflare Workers) 6장: 실전 프로젝트 - URL 단축기 만들기 (on Cloudflare Workers)Hono의 가장 큰 장점 중 하나인 엣지(Edge) 환경 배포를 경험해봅니다. Cloudflare Workers 플랫폼에 간단한 URL 단축기(URL Shortener) API를 Hono로 만들어 배포하는 전 과정을 실습합니다.1. 프로젝트 목표 및 환경기능 요구사항:긴 URL을 받아 짧은 단축 URL 코드를 생성 (POST /shorten)단축 URL 코드로 접속 시 원래의 긴 URL로 리다이렉트 (GET /:code)기술 스택:프레임워크: Hono배포 환경: Cloudflare Workers데이터베이스: Cloudflare KV (간단한 Key-Value 저장소)Cloudflare Workers란?: 전 세계에 분.. 2025. 9. 23.
반응형

티스토리툴바