[HTML/canvas] 기본 사용법과 도형 그리기

mdn의 캔버스 튜토리얼 따라하기 참고 : 캔버스 튜토리얼 기본 그리기 팩맨 그리기 Path2D 그리기 var btBasicDraw = document.getElementById("btBasicDraw"); btBasicDraw.addEventListener("click", basicDraw); var btDrawPacman = document.getElementById("btDrawPacman"); btDrawPacman.addEventListener("click", drawPacman); var btDrawPath2d = document.getElementById("btDrawPath2d"); btDrawPath2d.addEventListener("click", drawPath2D); function..

• format_list_bulleted Frontend/HTML
• · 2024. 2. 20.
• textsms

[Vue 빠른시작] 반응형 기초 예제 추가(Composition API.ver)

이전글 [Vue 빠른시작] 반응형 기초 예제 추가(Options API.ver) 1. 반응형 상태 설정 'reative()' 함수를 사용하여 객체 또는 배열을 반응형으로 만들 수 있다. import { reactive } from 'vue' const state = reactive({ count: 0 }) 반응형 객체는 JavaScript Proxy이며 일반 객체처럼 작동한다. 일반 객체와 차이점은 Vue가 속성에 접근 및 반응형 객체의 변경사항을 감지할 수 있다는 것이다. 컴포넌트의 템플릿에서 반응형 상태를 사용하려면, 컴포넌트의 'setup()' 함수에서 반응형 상태를 선언하고 반환해야 한다.(Vue3의 컴포지션 API는 setup 함수 내에서 사용이 가능하..

• format_list_bulleted Frontend/Vue3
• · 2024. 2. 16.
• textsms

[Vue 빠른시작] 컴포넌트 기초 예제 추가(Composition API ver)

이 파트도 공부하다보니 api 버전을 나눠야할 필요가 있을것 같아 따로 작성한다. 이전글 보기 : [Vue 빠른시작] 컴포넌트 기초 예제 추가(Options API ver) 컴포넌트를 사용하면 UI를 독립적이고 재사용 가능한 일부분으로 분할하고 각 부분을 개별적으로 다룰 수 있다. 따라서 앱이 중첩된 컴포넌트의 트리로 구성되는 것은 일반적이다. 이것은 기본 HTML 엘리먼트를 중첩하는 방법과 매우 유사하지만, Vue는 각 컴포넌트에 사용자 정의 컨텐츠와 논리를 캡슐화할 수 있는 자체 컴포넌트 모델을 구현한다. Vue는 기본 웹 컴포넌트와도 잘 작동한다. 1. Defining a Component 빌드 방식을 사용할 때 일반적으로 Single-File Component(SFC)라고 하는 .vue 확장자를 ..

• format_list_bulleted Frontend/Vue3
• · 2024. 1. 25.
• textsms

[Vue 빠른시작] 컴포넌트 기초 예제 추가(Options API ver)

이 파트도 공부하다보니 api 버전을 나눠야할 필요가 있을것 같아 따로 작성한다. 이후글 보기 : [Vue 빠른시작] 컴포넌트 기초 예제 추가(Composition API ver) 컴포넌트를 사용하면 UI를 독립적이고 재사용 가능한 일부분으로 분할하고 각 부분을 개별적으로 다룰 수 있다. 따라서 앱이 중첩된 컴포넌트의 트리로 구성되는 것은 일반적이다. 이것은 기본 HTML 엘리먼트를 중첩하는 방법과 매우 유사하지만, Vue는 각 컴포넌트에 사용자 정의 컨텐츠와 논리를 캡슐화할 수 있는 자체 컴포넌트 모델을 구현한다. Vue는 기본 웹 컴포넌트와도 잘 작동한다. 1. Defining a Component 빌드 방식을 사용할 때 일반적으로 Single-File Component(SFC)라고 하는 .vue 확..

• format_list_bulleted Frontend/Vue3
• · 2024. 1. 25.
• textsms

[Vue 빠른시작] Template Refs(템플릿 참조) 예제 추가

[Vue 빠른시작] Template Refs(템플릿 참조) 예제 추가 예제 코드가 Options API ver, Composition API ver 순서대로 등장한다. 본문에 Composition API ver인 경우 추가 설명이 있으니 잘 봐야함 Vue의 선언적 렌더링 모델은 개발자가 직접 DOM에 접근해야 하는 대부분을 추상화하지만, 개발자가 DOM 엘리먼트에 직접 접근해야 하는 경우가 여전히 있을 수 있다. 이러한 필요성을 충족시키기 위해 ref라는 특별한 속성을 사용할 수 있다. ref는 v-for장에서 언급한 key 속성과 유사한 특수 속성이다. 이를 통해 마운트된 특정 DOM 엘리먼트 또는 자식 컴포넌트 인스턴스에 직접적인 참조를 얻을 수 있다. 예를 들어 컴포넌트 마운트의 인풋에 초점을 맞추..

• format_list_bulleted Frontend/Vue3
• · 2024. 1. 23.
• textsms

[Vue 빠른시작] watchers(감시자) 예제 추가(Composition API ver)

[Vue 빠른시작] watchers(감시자) 예제 추가(Composition API ver) 감시자 항목은 생각보다 정리가 길어져서 Composition API ver, Composition API ver으로 나누어서 작성함 이전글 : [Vue 빠른시작] watchers(감시자) 예제 추가(Options API ver) 1. Basic Example computed(계산된 속성)은 계산되어 파생된 값을 선언적으로 사용할 수 있게 한다. 그러나 상태 변경에 대한 반응으로 "사이드 이펙트"(ex. DOM을 변경하거나 비동기 작업의 결과를 기반으로 다른 상태를 변경하는 것)를 수행해야 하는 경우가 있다. Composition API를 사용하는 경우, watch 함수를 사용하여 반응형 속성이 변경될 때마다 함수..

• format_list_bulleted Frontend/Vue3
• · 2024. 1. 22.
• textsms