전체 글 (61) 썸네일형 리스트형 Vue.js 생명주기 훅 정리 – 언제 뭐가 되는지 순서대로 보자 Vue 컴포넌트는 만들어지고, 그려지고, 업데이트되고, 사라지는 일련의 과정을 거쳐. 이걸 Vue에서는 **라이프사이클(Lifecycle)**이라고 부르고, 각 단계마다 특정한 **훅(hook)**을 호출할 수 있다.언제 뭘 할 수 있는지를 알면, 데이터 로딩 타이밍이나 DOM 조작 같은 것도 훨씬 수월하게 할 수 있다! 1. beforeCreateVue 인스턴스가 생성된 직후 가장 먼저 호출되는 단계다.이때는 data, methods, computed 등 옵션들이 아직 정의되지 않은 상태다.Vue 2에서는 props도 접근할 수 없지만, Vue 3에서는 props 값 사용이 가능하다.또한 Vue 3의 컴포지션 API에서는 setup()이 이 훅보다 먼저 호출된다.아무것도 준비되지 않은 시점이라, 보.. [Vue.js] 컴포저블(Composable)이란 무엇인가? [Vue.js] 컴포저블(Composable)을 배우며 느낀 점Vue 3에서 Composition API를 쓰다 보면 자연스럽게 접하게 되는 개념이 있다. 바로 컴포저블(Composable)이라는 것이다.처음에는 단순히 setup() 안에서 로직을 작성하는 것만으로도 만족했는데, 컴포저블이라는 개념을 알게 되면서 코드 재사용과 유지보수 측면에서 큰 차이가 난다는 걸 배웠다.컴포저블이란?간단하게 말하자면, 반복적으로 사용하는 로직을 함수처럼 분리해서 가져다 쓰는 방식이다. React로 치면 custom hook과 매우 유사한 느낌이다.예를 들어, 카운터 기능이 여러 컴포넌트에서 필요하다면 그 로직을 매번 setup() 안에 반복해서 작성할 필요 없이, 컴포저블로 하나 만들어두고 가져다 쓰면 된다.예제 - .. [Vue.js] Vue Composition API란 무엇인가? Vue Composition API란 무엇인가?Composition API는 Vue 3에서 공식적으로 도입된 새로운 컴포넌트 작성 방식이다. 기존의 Options API 방식이 아닌, setup() 함수 내에서 reactive state, computed, lifecycle 등을 선언하고 조작할 수 있도록 한다.Composition API는 코드의 응집도를 높이고, 기능별로 관련된 로직을 하나의 함수 블록 안에 묶을 수 있기 때문에, 규모가 큰 애플리케이션에서도 가독성과 유지보수 측면에서 유리한 구조를 제공한다.Vue 2에서의 사용Vue 2에서도 Composition API를 사용할 수 있다. 다만 별도의 플러그인 설치가 필요하다. 다음과 같이 패키지를 추가하면 된다.npm install @vue/com.. [ React.js ] 객체 복사, 진짜 '복사'일까? 객체 복사, 진짜 '복사'일까?React에서 발생한 참조 이슈와 해결 방법React로 작업을 하다 보면 종종 원본 데이터와 수정된 데이터를 따로 관리하고 싶을 때가 생긴다.예를 들어, 사용자 정보 폼을 띄우고 수정했다가 취소 버튼을 누르면 처음 상태로 되돌려야 하는 경우다.그래서 보통 다음과 같이 두 개의 상태를 선언해 놓고 사용한다.const [originalData, setOriginalData] = useState({}); const [editData, setEditData] = useState({}); 처음 데이터를 API로 받아오면 originalData와 editData를 동일하게 초기화한다.setOriginalData(res.data); setEditData(res.data); 그리고 수정 .. Zuul API Gateway에서 504 Gateway Timeout 에러 문제 쉽게 해결하기 프론트엔드에서 서버 API를 호출할 때, 응답 시간이 1초를 넘으면 가끔 504 Gateway Timeout 에러가 뜨는 문제가 있었다.문제가 왜 생겼을까?프로젝트에서는 설정 파일이 두 개였다. 하나는 bootstrap.yml, 다른 하나는 application.yml인데, 두 파일에 타임아웃 관련 설정이 서로 달라서 충돌이 났다.결국, API Gateway 쪽 설정이 제대로 적용되지 않고 기본값(매우 짧은 시간)으로 동작하면서 응답을 기다리지 않고 바로 에러가 난 거다.어떻게 고쳤을까?Zuul API Gateway에서 사용하는 Ribbon 설정에 연결 시간 제한과 응답 대기 시간을 명확히 늘려줬다.ribbon: ConnectTimeout: 5000 # 연결 시도 제한 시간 5초 (5000ms) R.. #4 [REACT.JS] 엑셀 데이터 기반 드래그앤드랍 명함 편집 기능 구현기 #4 [REACT.JS] 사진 불러오기, 엑셀 읽어오기#3 기본 레이아웃 구성 및 팝업 생성 #2 기본 버튼 컴포넌트 만들기 #1 기획단계 및 UI 작업 드디어 1인 토이 프로젝트를 진행하려 마음을 먹었다. 토이 프로젝트의 큰 토픽은 이름표다. (..오잉) 회potential-coding.tistory.com 사이드 프로젝트에서 명함을 자동 생성해주는 기능을 구현해야 할 일이 생겼다. 단순히 텍스트만 집어넣는 수준이 아니라, 사용자가 명함에 직접 속성을 배치하고, 테스트 인쇄까지 가능해야 하는 요구사항이었다.구현 개요이 기능은 크게 2가지 흐름으로 구성된다.엑셀 명단 업로드: 이름, 직책, 연락처 등 속성 값을 엑셀에서 불러온다속성 배치: 각 속성명을 명함 위에 드래그앤드랍 방식으로 위치 지정이후 .. [ EOSIO ] 계정과 스마트컨트랙트 EOSIO 계정 구조와 권한 이해하기EOSIO 기반 개발환경을 처음 구성하게 되면 가장 먼저 마주하게 되는 것이 바로 **시스템 계정(eosio)**이다.이 시스템 계정은 단순한 테스트 계정이 아니라, 전체 블록체인에서 가장 기본이 되는 관리자 계정이라 할 수 있다.EOSIO 계정 생성 규칙EOSIO에서 계정은 다음과 같은 명명 규칙을 따른다:사용 가능한 문자: a ~ z, 1 ~ 5, . (총 33개 문자)최대 길이: 12자까지 가능계정명은 고정된 문자열 형태이며, 소문자만 허용된다즉, 임의의 긴 영문자나 대소문자를 혼합해서 계정을 만들 수는 없다.예를 들어 myaccount12, abc123def456 이런 형태는 가능하지만 MyAccount, abc_123 같은 이름은 사용할 수 없다.계정이란 무엇.. 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.. 이전 1 2 3 4 5 ··· 8 다음
