Atelier BiCute

#1. Vue 소개 • Vue 3란 무엇인가? • Vue 3의 특징과 장점 #2. Vue 3 설치 및 설정 ▷ 프로젝트와 파일의 구조와 형식 #3. Vue 3 기본 문법 • Template 문법 ▷ 컴포넌트 단위로 스타일 적용하기 • 디렉티브(Directive) ▷ 데이터 바인딩하는 방법 ▷ 반복문(v-for) 사용하는 방법 ▷ 이벤트 핸들링(v-on) ▷ 조건식 v-if, v-show • 컴포넌트(Component) ▷ 새로운 컴포넌트를 생성하고 추가하는 방법 ▷ 데이터를 전달할 때는 props ▷ 사용자 지정 이벤트(Custom Event) ▷ 데이터를 전달하는 또 다른 방법 Slot • 라우터(Router) ▷ 페이지 전환하기 (라우터 설치부터 사용까지) ▷ 게시물마다 번호를 달아주자 (라우터 파라..

# 스타일 가이드란? 스타일 가이드는 코드를 작성하는 방법과 규칙을 정해놓은 문서입니다. 스타일 가이드를 사용하면 다음과 같은 장점을 얻을 수 있습니다. 일관성 유지: 스타일 가이드는 모든 개발자가 동일한 코드 스타일을 따르도록 강제합니다. 이렇게 하면 코드가 일관성 있게 유지되므로 읽기 쉬워집니다. 버그 감소: 일관성 있는 코드 스타일을 따르면 실수를 줄일 수 있습니다. 예를 들어, 잘못된 인덴트, 괄호 누락 등의 문제가 발생할 가능성이 줄어듭니다. 코드 유지보수성 향상: 스타일 가이드는 코드를 더 읽기 쉽고 이해하기 쉽도록 만듭니다. 따라서 코드의 유지보수성이 향상되고 변경이 쉬워집니다. 코드 리뷰 용이: 스타일 가이드는 코드 리뷰를 용이하게 만듭니다. 코드가 일관성 있게 작성되면 리뷰어가 코드를 더..

# 간단한 CRUD 앱 만들기 우선 CRUD는 생성(Create), 읽기(Read), 수정(Update), 삭제(Delete)의 약자로 데이터베이스나 서버에서 데이터를 다룰 때 가장 많이 사용하는 기능입니다. 이번 예제에서는 간단한 할 일 목록을 다루는 CRUD 기능을 구현해 볼 것입니다 (1) 먼저 src/components 폴더 안에 TodoList.vue 컴포넌트를 만듭니다. 할 일 목록 {{ todo }} 삭제 수정 추가 취소 수정 이 컴포넌트는 할 일 목록을 표시하고, 새로운 할 일을 추가하거나 삭제하는 기능을 가지고 있습니다. data 속성에서 todos 배열에 기본 할 일 목록을 설정하고, newTodo 변수에 새로 추가할 할 일을 저장합니다. methods에서는 addTodo 함수를 통해 ..

# 렌더링 최적화 Vue에서 렌더링을 최적화하는 몇 가지 방법은 다음과 같습니다: (1) 가상 DOM 활용 Vue에서 가상 DOM을 활용하면 실제 DOM을 추상화하여 변경된 부분만 업데이트할 수 있습니다. 아래는 가상 DOM을 사용하여 성능을 개선하는 예시입니다. {{ item }} Shuffle 위 코드에서는 key 속성을 사용하여 각각의 li 요소를 고유하게 식별할 수 있도록 하였습니다. 이렇게 하면 Vue가 변경된 부분을 추적하여 성능을 향상시킬 수 있습니다. (2) 컴포넌트 분할 Vue에서 컴포넌트를 작은 단위로 분할하면 부분적으로 렌더링할 수 있습니다. 아래는 컴포넌트를 분할하여 성능을 개선하는 예시입니다. Shuffle {{ item }} 위 코드에서는 ParentComponent와 Child..

# Composition API Vue 3에서 새롭게 도입된 Composition API는 Vue.js의 고급 기능 중 하나로, Options API와 달리 코드의 구조화와 재사용성을 높일 수 있습니다. Composition API는 Vue.js의 함수형 프로그래밍과 React Hooks와 같은 아이디어를 결합하여, 컴포넌트 로직을 보다 작고 독립적인 단위로 분리할 수 있습니다. 아래는 Composition API를 사용하여 구현된 간단한 Counter 애플리케이션 예시입니다. Counter: {{ counter }} Increment Decrement 위 코드에서는 reactive 함수를 사용하여 state 객체를 생성하고, toRefs 함수를 사용하여 state 객체를 reactive한 ref 객체로..

# Template 문법 Vue.js에서는 HTML과 유사한 형태의 템플릿 문법을 사용하여 UI를 작성합니다. 템플릿 문법은 Vue.js의 핵심 요소 중 하나이며, 다음과 같은 기능을 제공합니다. 보간(Interpolation): 중괄호({{}})를 사용하여 데이터 값을 표시할 수 있습니다. 이를 통해 Vue.js는 데이터와 UI를 자동으로 동기화할 수 있습니다. 디렉티브(Directive): v- 접두사를 사용하여 Vue.js의 특수한 기능을 사용할 수 있습니다. 예를 들어, v-if 디렉티브를 사용하여 조건부 렌더링을 할 수 있습니다. 이벤트(Event): v-on 접두사를 사용하여 이벤트 핸들러를 등록할 수 있습니다. 예를 들어, v-on:click 디렉티브를 사용하여 클릭 이벤트를 처리할 수 있습..

Vue 개발 환경 세팅하기에도 비슷한 글을 작성한 적이있었는데 이때는 Vue CLI를 이용한 설치 방법을 설명하였었습니다. 하지만 현재는 Vue CLI가 Maintenance Mode에 진입하면서, Vue.js 공식 문서에서는 Vite를 기반으로 하는 create-vue를 사용하여 새로운 Vue.js 프로젝트를 생성할 것을 권장하고 있습니다. 이를 위해 Vue의 설치 와 설정 과정은 다음과 같은 단계를 따릅니다. 1. Node.js 설치: create-vue를 사용하려면 Node.js가 설치되어 있어야 합니다. Node.js를 설치하려면 공식 웹사이트(https://nodejs.org/)다운로드하여 설치합니다. 2. create-vue 설치: npm(Node.js 패키지 매니저)를 사용하여 create-..

# Vue란 무엇인가? Vue는 웹 애플리케이션을 개발하기 위한 JavaScript 프레임워크 중 하나입니다. Vue.js는 사용자 인터페이스(UI)를 개발하기 위한 직관적이고 간결한 API를 제공합니다. Vue.js는 컴포넌트 기반 아키텍처를 사용하여 복잡한 애플리케이션을 작은 조각으로 분할하여 관리할 수 있습니다. 이는 코드 재사용성을 높이고 유지보수를 용이하게 만들어줍니다. Vue.js는 리액트(React)와 앵귤러(Angular)와 함께 세 가지 가장 인기 있는 웹 프론트엔드 프레임워크 중 하나입니다. 또한 Vue.js는 다른 라이브러리나 프레임워크와 쉽게 통합되며, 개발자 커뮤니티에서 높은 평가를 받고 있습니다. ※ 앵귤러는 이미 죽었으니 새롭게 배우신다면 잊으셔도 됩니다. # Vue.js의 특..

Mitt는 작고 빠른 JavaScript 이미터(emitter) 라이브러리입니다. 브라우저와 Node.js 환경 모두에서 작동하도록 설계되었으며 이벤트를 내보내고 처리하기 위한 간단하고 직관적인 인터페이스를 제공합니다. Mitt를 사용하면 사용자 정의 이벤트를 생성하고, 이벤트 핸들러를 연결하여 이러한 이벤트를 수신하고, 무언가 발생했음을 코드의 다른 부분에 알리고 싶을 때마다 이러한 이벤트를 트리거할 수 있습니다. ※ emitter란? 코드의 다른 부분에 알림을 보낼 수 있는 소프트웨어 디자인 패턴입니다. # 설치 npm npm install --save mitt yarn yarn add mitt # 등록 전역 플러그인으로 설치 import Vue from 'vue' import mitt from 'm..

Vue.js에서 조건에 따라 클래스를 지정하려면 v-bind디렉티브를 사용하여 부울 값(참, 거짓)으로 평가되는 표현식에 클래스를 바인딩할 수 있습니다. 단일 조건부 클래스 :class="{'클래스명': '조건'}" 다음은 단일 조건부 클래스의 예입니다. isActive의 속성이 true인 경우 div 요소에 active 클래스가 적용 됩니다. 다중 조건부 클래스 :class="{'클래스명': '조건', '클래스명': '조건'}" 다음은 다중 조건부 클래스의 예입니다. isActive가 ture인 경우 active 클래스를 추가하고, hasError가 true인 경우 'text-danger' 클래스를 추가합니다. 삼항 연산자를 사용한 조건부 클래스 :class="[조건 ? '조건이 true일 경우의 클래..