Vue3

데이터바인딩은 HTML에 자바스크립트 데이터를 꽂아넣는 작업입니다. Vue에서는 데이터바인딩 문법을 통해 아래 두 가지 방식으로 데이터를 쉽게 HTML에 삽입할 수 있습니다. 1️⃣ 왜 데이터바인딩을 할까

HTML을 짜다 보면 비슷한 `` 같은 요소들이 수백 번 등장할 때가 있죠. 이럴 때 v-for을 사용하면 복붙 없이 간편하게 반복되는 HTML 요소를 생성할 수 있습니다. 리액트나 Vue를 쓰는 큰 장점 중 하나입니다.

어떤 HTML 요소를 클릭했을 때 뭔가 일이 일어나게 만들고 싶다면 원래 HTML에서는 `` 같은 방식으로 작성하지만, Vue에서는 @click="" 을 사용합니다. 1️⃣ 기존 HTML 구조 (예전 Vue2 문법

상품을 누르면 뜨는 상세페이지를 모달창 스타일로 만들어보는 예제를 통해, Vue를 사용한 동적 UI 제작 단계를 알아봅니다. > 모달창이란? > > > 배경은 어둡게 처리하고 중앙에 하얀 창이 나타나는 UI를 의미합니다. >

서버가 있다면 서버에서 데이터를 받아와서 보여주는 것이 일반적이지만, 여기서는 가짜 데이터를 직접 준비해 사용합니다. 데이터가 길어 복잡해질 수 있으므로, import/export 문법을 이용해 데이터를

목표: 상품 제목을 클릭하면 해당 상품의 상세정보(제목, 가격, 설명 등)가 모달창에 출력되도록 구현핵심 아이디어:사용자가 클릭한 상품의 인덱스를 저장하는 누른거 변수를 둔다.모달창은 모달창열렸니 상태가 true일 때 보여지고, 내부에서 원룸들\[누른거] 데이터를 출력

HTML 짜다 보면 <div>가 수십 개 나오는 게 일상. 이게 싫으면 컴포넌트를 만들어서 사용하면 됩니다. 원하는 HTML 덩어리를 한 글자로 축약할 수 있게 도와주는 문법이 바로 컴포넌트입니다.컴포넌트를 사용하면 긴 HTML을 간결하게 축약할 수 있습니다.예를

저번 시간에 <Modal/> 컴포넌트를 만들어봤는데, 모달창이 제대로 뜨지 않았습니다.문제는 데이터 바인딩에 있습니다.Modal.vue 코드에서는 아래와 같이와 같이 원룸들, 누른거 등의 변수를 사용하고 있는데,Modal.vue 내부에 해당 데이터가 없어서 바인딩

props를 통해 문자, 숫자, 배열, 객체 등 원하는 데이터를 직접 전달할 수 있습니다.주의:콜론(:)을 붙이면 자바스크립트 표현식으로 평가되어 배열, 객체, 숫자 등이 그대로 전달됩니다.콜론이 없으면 값은 문자열로 전달됩니다.하나의 객체 { name: 'kim',

1️⃣ 왜 Custom Event가 필요한가? 자식 컴포넌트가 부모 컴포넌트의 데이터를 직접 수정할 수 없음 다른 파일에 있는 데이터이기 때문 props로 전달받은 데이터는 변경하면 안됨 (부작용 방지) 해결책: 자식이 직접 데이터를 수정하는 대신, 부

목표:사용자가 <input>에 입력한 값을 data에 저장하여, 이를 바탕으로 상품 수량 변경, 총금액 계산 등 여러 UI 기능을 구현핵심 포인트:이벤트 핸들러(@input, @change)로 처리 가능더 간단하게 v-model 디렉티브 사용Refactoring

입력 데이터 처리:<input>에 입력한 데이터는 무조건 문자입니다.예를 들어, 숫자 123을 입력해도 '123'으로 저장됩니다.만약 이를 숫자형으로 변환하고 싶다면 v-model.number="데이터이름"을 사용합니다.문자 입력 제한:하지만 'abc'와 같은 문

UI가 등장하거나 퇴장할 때 살짝 애니메이션 효과를 주고 싶을 때가 있습니다.애니메이션을 주는 방법은 크게 2가지가 있습니다.애니메이션 시작 전에 적용할 클래스 스타일을 미리 디자인합니다.애니메이션 동작 후에 적용할 클래스 스타일도 디자인해둡니다.특정 이벤트(예: 모달

상품 정렬 기능: 버튼을 누르면 상품 데이터(예: 원룸들)가 가격순으로 정렬되어 화면에 보여집니다. 데이터 원본 보존: 정렬 전 원본 데이터 순서를 보존해두어, '되돌리기' 버튼을 누르면 원래 순서로 복원할 수 있습니다. (데이터를 단순히 = 연산자로 복사하면

Vue 공식문서를 살펴보면, 컴포넌트가 어떻게 생성되고, 업데이트되며, 소멸되는지에 대한 Lifecycle(생명주기) 설명을 볼 수 있습니다.Lifecycle Hook을 활용하여 특정 시점에 코드를 실행하기 위해 꼭 알아야 하는 개념입니다.생성 (Create & Mou

에러 발생: 코드 작성 시 터미널이나 크롬 개발자도구의 에러 메시지로 대부분 해결 가능하지만,props, 이벤트 전달 데이터, 라우터 설정 등은 에러가 발생하지 않아 문제를 파악하기 어려울 수 있음.해결책: 실제 사이트에서 코드들이 제대로 동작하는지 확인하려면 Vue

여러 페이지를 만들고 싶을 때 vue-router 라이브러리를 사용하여 URL 경로에 따라 다른 컴포넌트를 보여줄 수 있습니다.예시:codingapple.com/list → List.vuecodingapple.com/detail → Detail.vue터미널에서 아래 명

URL 파라미터를 활용하여 여러 개의 상세페이지를 하나의 컴포넌트로 처리하는 방법에 대해 알아봅니다. 네이버 블로그 등에서 볼 수 있는 “/어쩌구/글번호”와 같이 URL에 글 번호를 포함하여 해당 글의 내용을 동적으로 불러오는 방식을 구현해보겠습니다.만약 상세페이지를

Vue3에서 Nested Routes를 활용하는 방법과 라우터 관련 함수($router.push, $router.go 등)를 알아봅니다.Nested Routes는 하나의 페이지 내에서 추가적인 라우트를 분리하여 보여줄 때 사용합니다.예를 들어, /detail/0/aut

Vue3의 라우터 설정 중 Hash mode vs HTML5 mode와 Navigation Guards에 대해 자세히 알아봅니다.설정 예시:특징:URL에 - 누군가/detail\`과 같이 URL을 직접 입력하면, Vue 라우터가 아니라 서버에 요청하게 됩니다.서버

CSS 속성을 직접 바인딩주의: CSS 속성명은 CamelCase (font-size → fontSize)로 작성해야 함여러 개의 스타일을 적용할 때 유용배경 이미지 동적 바인딩 방법📌 주의:background-image 값은 url() 안에 넣어야 함${변수} 문법

요청하면 데이터를 주는 프로그램네이버 웹툰 서버 → 웹툰 요청하면 줌요청 방법:GET: 서버에서 데이터 가져올 때POST: 서버에 데이터 보낼 때할 일 → 더보기 버튼을 누르면 서버에서 추가 게시물 가져오기📌 GET 요청할 URL:첫 번째 게시물: https&#x3A

step 상태를 이용하여 현재 선택된 탭을 관리버튼을 클릭하면 step을 변경하여 해당하는 내용만 표시step 상태를 사용하여 업로드 페이지 이동0: 기본 화면, 1: 필터 선택, 2: 글 작성step 상태를 사용하여 탭 전환탭 UI를 사용하면 vue-router 없이

목적:Vue 문법만 알아서는 안 되고, 웹 브라우저의 기본 기능들을 이해.Vue는 브라우저 기능을 다루는 도구에 불과.이전 방식:사용자가 업로드한 이미지를 바로 브라우저에 보여주기 어려워, 서버에 저장 후 저장된 이미지 URL을 <img src="">에 넣어 표시

목적:상단에 Next 버튼을 두고, 버튼 클릭 시 다음 step으로 넘어가도록 함.메인페이지에서는 step이 0일 때 Next 버튼이 보이지 않아야 함.App.vue발행 버튼 조건:Next 버튼 옆에 위치하며, step이 2일 때만 보입니다.버튼 클릭 시 publish

자식 컴포넌트에서 부모 데이터를 사용하려면 보통 props로 전송해야 하는데, 번거로운 과정을 줄이기 위해 slot을 사용할 수 있습니다.자식 컴포넌트slot이 들어갈 위치에 <slot></slot> 태그를 작성합니다.예를 들어, 자식 컴포넌트에서는 아래와

mitt는 아주 가벼운 이벤트 버스 라이브러리로, Vue3 프로젝트에서 컴포넌트 간의 커뮤니케이션을 보다 간편하게 만들어줍니다.mitt 인스턴스 생성const emitter = mitt()를 통해 mitt 인스턴스를 생성합니다.전역 등록app.config.globalP

provide / inject는 부모 컴포넌트에서 데이터를 제공하고, 하위 컴포넌트(자식, 손자 등)에서 이를 주입 받아 사용하는 의존성 주입 패턴입니다.여러 단계의 컴포넌트 간에 props를 일일이 전달하지 않고도 데이터를 공유할 수 있게 해줍니다.provide: 상

Pinia는 Vue의 Store 라이브러리로, 컴포넌트/페이지 간 state를 공유할 수 있게 해줍니다.상태관리 라이브러리를 꼭 써야 한다고 하지만, 반드시 필수 X대신, 다음과 같은 상황에서 사용하면 유용합니다.props와 custom event로 데이터 주고받기가

직접 Vue 파일에서 state를 수정하면 안 됩니다.예를 들어, name: 'kim'이라는 state 데이터가 있고 100개의 컴포넌트에서 이를 직접 수정하게 되면, 어딘가에서 갑자기 'kim' 대신 123이라는 숫자로 바뀌는 버그가 발생할 수 있습니다.만약 버그가

뭔가 복잡하지만 익숙해지면 이게 코드 관리하기 좋구나라는 생각을 하게 됨.아닐 수도 있지만 결국 프로젝트 커지면 pinia는 필수.예전 Vuex에서는 state 수정을 위해 mutations를 사용하고, 서버에서 데이터를 가져와 state를 변경할 때는 ajax 같은

컴포넌트 내부에서 함수를 만들 때 보통 methods에 작성하는데,실제로는 계산된 값으로 작성할 수도 있습니다.computed는 컴포넌트 로드 시 한 번 실행되고, 그 결과를 캐싱해두므로반복 호출해도 내부 코드가 다시 실행되지 않습니다.Vue2 예시 (Vuex 이전 방

PWA(Progressive Web App)란 웹사이트를 모바일 앱처럼 설치하여 사용할 수 있도록 만든 것을 의미합니다.기존에 모바일 앱처럼 부드럽게 동작하는 웹사이트를, 실제 모바일 앱처럼 활용할 수 있게 하는 개념입니다.예시: flipkart.com 등에서 “설치”

follower.json 에 들어갈 데이터기존 Options API에서는 data, methods, computed 등 관련된 기능이 분산되어 있어서 특정 데이터를 찾으려면 여러 위치(예: 150번, 380번, 670번 줄 등)를 뒤져야 합니다.Composition A

설명: Vue3에서는 ref와 reactive를 모두 사용하여 반응형 데이터를 만들 수 있습니다.ref: 숫자, 문자 같은 primitive 타입 저장에 적합reactive: object, array 같은 reference data type 저장에 적합실제로 ref

Pinia는 Vue 애플리케이션의 중앙 상태 관리(store)를 간편하게 구현할 수 있도록 도와주는 라이브러리입니다. Pinia에서는 defineStore() 함수를 사용해 store를 정의하며, Options API 방식과 Composition API(Setup) 방

onBeforeMount(callback)설명: 컴포넌트가 DOM에 마운트 되기 직전에 호출됨.용도: 초기 렌더링 전에 준비할 작업을 실행할 때 사용.onMounted(callback)설명: 컴포넌트가 DOM에 마운트 된 후 호출됨.용도: DOM에 접근해야 하거나, 외

Nuxt.js는 Vue.js 기반의 프레임워크로, 빠르고 효율적으로 웹 애플리케이션을 제작할 수 있도록 도와줍니다.주요 역할은 개발자가 SPA(Single Page Application), SSR(Server Side Rendering), 또는 정적 사이트를 쉽게 구현

목적:비동기 컴포넌트를 렌더링할 때, 아직 데이터나 컴포넌트가 준비되지 않은 경우 대신 보여줄 콘텐츠(예: 로딩 스피너)를 정의할 수 있도록 합니다.동작 방식:<Suspense> 컴포넌트 내부의 기본 슬롯에 비동기 컴포넌트나 지연되는 콘텐츠가 있을 때, 준비가 완