# vue
와 다크모드!
다크모드아~ 그 식상한 다크모드~역시 회사에서 할 게 없어서 무지성 개발 중인 본인. 월급루팡 아니에요 일을 다 끝낸 거뿐이에요 ^\_\_\_^ bNuxtTailwindCSSVercel(역시 배포 짱 편함)animation 노가다귀여운 🌞과 🌚아무생각 없이 적은 개
크리스마스 트리를 만들어보자!
크리스마스트리당시 크리스마스 트리를 만들던 본인은 배포 때문에, 강제로 10시까지 야근하게 생긴 상황이였음. 무의미한 시간이 매우 많았다는 말 ^\_\_\_^ b출근길에 인스타 릴스에서 외국인이 2진수로 이루어진 크리스마스 트리를 만드는 것을 봄. 오 재밌어 보이는데?
Vue components 통신 방식
뷰 컴포넌트는 각각 고유한 데이터 유효 범위를 갖는다.따라서, 컴포넌트 간에 데이터를 주고 받기 위해선 아래와 같은 규칙을 따라야 함상위에서 하위로는 데이터를 내려줌, 프롭스 속성하위에서 상위로는 이벤트를 올려줌, 이벤트 발생데이터의 흐름 추적이 가능하다. (항상 위에
Vue Components
컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능이다.컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면을 제작할 수 있다.뷰를 사용하기 위해 인스턴스를 생성함.컴포넌트 사용방법Vue.component('컴포넌트 이름', 컴포넌트
Vue Instance
인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드이다.인스턴스는 아래와 같이 생성할 수 있다.인스턴스를 생성하고 나면 아래와 같이 인스턴스 안에 어떤 속성과 API가 있는지 콘솔 창에서 확인 가능하다.인스턴스에서 사용할 수 있는 속성과 API는 아래와 같다.el :
[Vue] Vue 컴포넌트
기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화한다View, Data, Code의 세트 (컴포넌트 안에는 HTML코드, 코드를 실행하기 위한 Javascript코드, 데이터가 존재한다)경우에 따라 특별한 is 속성으로 확장 'UI 덩어리'라고 생각하기 (
[Vue] 폼 입력 바인딩
v-model 디렉티브를 사용하여 입력 폼 input과 textarea 엘리먼트를 양방향 데이터로 바인딩할 수 있다.v-model은 내부적으로 서로 다른 속성과 서로 다른 이벤트를 전송한다. text와 textarea 태그는 value 속성과 input 이벤트를 사용
[Vue] 리스트 렌더링 - 객체
때로는 Object.assign()이나 \_.extend()를 사용해 기존의 객체에 새 속성을 할당할 수 있다. 이 경우 두 객체의 속성을 사용해 새 객체를 만들어야 한다.Vue.set(object, propertyName, value) 메소드를 사용하여 중첩된 객체에
[Vue] 리스트렌더링 - 배열
Vue는 감시중인 배열의 변이 메소드를 래핑하여 뷰 갱신을 트리거한다버튼을 누르면 4번째 인덱스가 추가되도록 push메서드 생성배열 데이터를 갱신하거나 삭제할때는 자바스크립트의 변이 메서드를 사용해야 한다push() 배열의 가장 뒤에 새로운 요소를 추가해주는 메서드po
MVVM 모델에서의 Vue
MVVM 패턴의 뷰 모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리DOM Listeners사용자가 마우스 클릭이나 키보드를 입력한다던지, 이벤트를 중간에 DOM Listeners가 청취하게 된다. 그러한 이벤트들을 잡아서 JS에 있는 데이터를 바
Vue vscode setting
VSCode 에서 Vue를 사용하기 위해 다운 받을 만한 플러그인 들.VeturVue.js 관련 플러그인이다.Night OwlVSCode 테마관련 플러그인이다.Material Icon Theme아이콘 관련 테마.ESLintjs 관련 플러그인, 오류를 표시 해 주는 플러
Vue - Vuex
Vue의 상태관리를 위해 Vuex를 사용한다.store.js 혹은 store.ts파일을 만들어 아래의 코드를 작성한다.main.js 혹은 main.ts에 다음을 추가한다.import { createStore } from 'vuex'const store = createS