Atelier BiCute

HTML은 웹 페이지의 구조와 상호작용을 정의하는 강력한 도구입니다. 이 중에서도 inert 속성은 요소를 비활성화하여 상호작용을 제한하는 데 사용되는 중요한 속성입니다. inert? inert 속성은 요소와 해당 자식 요소들의 동작을 비활성화하는 기능을 제공합니다. 이 속성을 사용하면 요소와 그 자식 요소들은 마우스 이벤트, 키보드 이벤트, 포커스 등의 상호작용을 받지 않게 됩니다. 이를 통해 사용자의 상호작용을 제한하고, 특정 부분에 집중하거나 모달 창과 같은 팝업 요소를 표시할 때 유용하게 활용할 수 있습니다. inert 속성 사용 방법 inert 속성은 HTML 요소에 다음과 같이 추가할 수 있습니다: 위의 예시에서 div 요소와 그 안의 모든 자식 요소들은 비활성화됩니다. 요소에 inert 속성..

매번 commit 메시지를 뭘 적어야할지 망설이는 그대들을 위한 Open AI 사용법. aicommits aicommits는 AI로 git 커밋 메시지를 작성하는 CLI 입니다. 사용 방법은 공식 페이지를 통해 그대로 따라만 해도 되지만, 조금 더 간단히 정리해 보았습니다. 필요한 것 ① OpenAI의 API keys를 사용하기때문에 공식 페이지에서 API Keys를 발급 받을 필요가 있습니다. API 키 발급은 이곳에서 > ② 이전에는 무료로 사용 가능했지만, 2023.04.01 이후라면 지불 방법에 대한 설정이 필요합니다. Billing 페이지에서 신용카드를 등록해서 결제가 가능하도록 할 필요가 있습니다. ※ 저의 경험으로 판단해보자면 AI를 이용한 commit 1회당 약 $0.005048 정도 사용..

# BEM이란? BEM은 Block, Element, Modifier의 약자로, HTML과 CSS를 작성하는 데 사용되는 네이밍 방법론입니다. BEM은 페이지의 컴포넌트를 작은 블록(Block)으로 나눈 다음 각 블록(Block)에 속하는 요소(Element)와 요소(Element)의 변형(Modifier)을 식별하기 위해 특별한 클래스 이름을 사용합니다. Block(블록): 독립적으로 존재하는 페이지 컴포넌트의 이름입니다. 블록(Block)은 기능적으로 독립적이며 다른 블록(Block)과 관련이 없습니다. 예를 들어, "header", "menu", "button" 등이 블록(Block)에 해당합니다. Element(요소): 블록(Block) 내부에 존재하며 블록(Block)의 일부를 나타냅니다. 요소..

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