전체 글 (62) 썸네일형 리스트형 Vue에서 커스텀 디렉티브 만들기 – 직접 만든 v-detect 예시로 이해해보자 Vue에서 커스텀 디렉티브 만들기 — v-detect 예제Vue에서는 v-if, v-for처럼 v-로 시작하는 디렉티브를 통해 HTML 요소에 특정 동작을 지정할 수 있다.그리고 기본 디렉티브 외에도, 직접 커스텀 디렉티브를 만들어서 사용할 수 있다.이번에는 사용자가 input에 특정 단어를 입력했을 때, 그 단어를 치환해주는 간단한 디렉티브를 만들어보자.1. main.vue — 커스텀 디렉티브 사용 {{ content }} v-detect라는 커스텀 디렉티브를 input 요소에 적용했다.detect 디렉티브 객체를 외부 파일에서 import해서 directives 옵션에 등록했다.2. common.js — 디렉티브 정의export const detect = { mounted: (el.. [회고] 19살, 첫 회사에서 배운 것들 19살, 신입 개발자였던 내가 겪은 ‘현실’ 그리고 성장나는 19살이 되는 해에, 선생님의 추천을 받아 약 180명 규모의 IT 중소기업에 면접을 보게 됐고, 9월부터 3개월간의 현장실습 과정을 거쳐 정규직으로 입사하게 됐다. 이후 약 3년간 회사에 몸담으며 다양한 경험을 했다. 2년은 사내 시스템을 개발했고, 1년은 B2C 플랫폼을 맡아 일했다."환영합니다"는 없었다입사 첫날, 내가 상상했던 회사의 모습은 ‘웰컴키트’가 책상 위에 올려져 있고, 사수가 배정되어 업무를 하나하나 알려주는 구조였다. 하지만 현실은 딱 달랐다. 테이프로 칭칭 감긴 컴퓨터 박스와 오래된 본체가 덩그러니 책상 위에 놓여 있었다. 나와 함께 입사한 동기에게도 어떤 가이드도 주어지지 않았다. 그래도 나는 열정이 가득한 신입이었다. .. [EOSIO] 용어 정리 EOSIO Developer Portal - EOSIO Development DocumentationDeveloper Portal for EOSIO. EOSIO is a next-generation, open-source blockchain protocol with industry-leading transaction speed and flexible utility.developers.eos.io --- EOSIO 기본 용어 정리용어설명Account (계정)EOSIO 블록체인과 상호작용할 때 꼭 필요한 고유 식별자이다. 다른 암호화폐와 달리 공개키가 아니라 사람이 읽을 수 있는 계정 이름으로 전송된다.그리고 이 계정에 연결된 키는 트랜잭션에 서명하는 데 사용된다.Account Name (계정 이름)사람이.. EOSIO 시작 가이드 Getting Started GuideDeveloper Portal for EOSIO. EOSIO is a next-generation, open-source blockchain protocol with industry-leading transaction speed and flexible utility.developers.eos.io 이 가이드의 목적은 본인의 로컬에 EOSIO 개발 환경을 구축하고, 이를 사용해 헬로월드 단계의 스마트 컨트랙트를 빌드하고 배포해보는 것입니다.EOSIO 워크플로우 다이어그램 주요 내용로컬에 개발환경 구성하기헬로월드 단계의 기초 스마트 컨트랙트 빌드와 배포해보기워크플로우를 시작하기 전에 EOSIO 플랫폼, 툴체인, Core 컨셉과 여러 기술적 기능들에 익숙해지는 것이 필.. EOSIO란 무엇인가? EOSIO Developer Portal - EOSIO Development DocumentationDeveloper Portal for EOSIO. EOSIO is a next-generation, open-source blockchain protocol with industry-leading transaction speed and flexible utility.developers.eos.ioEOSIO는 차세대 블록체인 플랫폼으로, 오픈소스로 개발되어 있고 높은 트랜잭션 처리 속도와 유연한 유틸리티를 갖춘 것이 특징이다. 기업 환경 또는 퍼블릭/프라이빗 블록체인 개발을 위한 플랫폼으로 설계되었다고 한다.내가 이해한 바로는 EOSIO는 단순한 블록체인 솔루션을 넘어서서, 역할 기반 권한 제어 시스템이나 .. Vue.js 상태관리 라이브러리, Vuex Vuex는 Vue 애플리케이션을 위한 상태관리 라이브러리다.store라는 중앙 저장소에 데이터를 보관하고, 모든 컴포넌트에서 해당 데이터를 공유하고 사용할 수 있게 도와준다.기존에는 컴포넌트 간에 데이터를 주고받기 위해 props나 event bus를 사용했지만, 컴포넌트가 많아질수록 구조가 복잡해지고 관리가 어려워진다.이러한 문제를 해결하기 위해 Vuex를 통해 중앙에서 상태를 관리하는 것이 훨씬 효율적이다.1) Gettersgetters는 state에서 데이터를 가져오는 함수다.Vue의 computed 속성과 유사하며, getter의 결과는 의존성 기반으로 캐시된다.즉, 의존하고 있는 state 값이 바뀔 때에만 다시 실행된다.2) Mutationsmutation은 state를 직접 변경하는 유일한 .. [Vue.js] Component 1) 컴포넌트 기본 구성 2) 컴포넌트 사용하기 3) 부모 → 자식 : props로 데이터 전달자식 컴포넌트에서 받을 props를 선언하고, 부모 컴포넌트에서 데이터를 바인딩한다.// 자식 컴포넌트Vue.component('ChildComponent', { props: ['message'], template: `{{ message }}`})// 부모 컴포넌트4) 자식 → 부모 : $emit() 으로 이벤트 전달5) 이벤트 버스(Event Bus) 사용하기전역 Vue 인스턴스를 이벤트 버스로 활용하여 컴포넌트 간 데이터 전달 가능// event-bus.jsimport Vue from 'vue';export const EventBus = new Vue();// 이벤트 발행EventBus.$emit('.. [Vue.js] Instance, directive A) Vue.js 인스턴스 1) 뷰 인스턴스 template 뷰 instance에서 정의한 데이터와 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속서 methods 마우스 클릭이나 버튼 클릭과 같은 이벤트 처리하는 동적인 작업 처리 ( 사용자가 이벤트를 함 ) computed data 객체 내 프로퍼티에 변화가 발생할 때마다 변화됨 => React의 useEffect와 같음 props 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용된다. watch data 객체 내의 데이터를 모니터링 할 수 있다. 특정 데이터에 변화가 생길 시 후속 처리 가능하다. 한페이지내의 인스턴스가 서로 격리되어있지 않기 때문에 하나의 뷰 인스턴스에 있는 데이터에 변화가 생길 경우, .. 이전 1 2 3 4 5 6 ··· 8 다음
