디벨롭per

EOSIO Developer Portal - EOSIO Development Documentation Developer 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는 기업에서 사용하기 위함 또는 퍼블릭/프라이빗 블록체인 개발을 위해 설계되었다. 이는 역할 기반 권한 시스템이나 안전한 애플리케이션 트랜잭션을 통해 광범위한 비즈니스 요구에 맞..

Vue.js 애플리케이션을 위한 상태관리 라이브러리다. store이라는 중앙 저장소에 데이터를 보관하고 모든 컴포넌트가 이용할 수 있도록 해준다. 기존 컴포넌트간에 데이터를 넘길 때 eventbus나 props를 사용했지만, 컴포넌트가 많아질 수록 데이터 처리가 복잡해진다. 그러므로 vuex이용하여 store에서 관리하고 해당 데이터를 수정 및 삭제하는 것이 효율적이다. 1) Getters getters는 state에서 데이터를 가져오는 함수를 나타낸다. getter의 결과가 의존성에 기반해 캐시되므로 의존성에 변화가 생겼을 경우에만 재실행된다. 2) Mutations Mutation은 state를 바꾸는 유일한 방법으로 상태가 변경되는 것을 추적할 수 있고 한 곳에서 상태를 변경하기에 일관되게 데이터를..

1) 컴포넌트 구성 html, 디렉티브, 바인딩 2) 컴포넌트 적용 3) 컴포넌트 간 데이터 전달 1) props로 부모컴포넌트에서 자식컴포넌트로 데이터 전달 //자식 컴포넌트 Vue.component('ChildComponent' , { props:['message'], template: ' {{message}} ' }) //부모 컴포넌트 4) $.emit() 메서드로 자녀 컴포넌트에서 부모 컴포넌트로 데이터 전달 myevent는 특정 이벤트가 발생했을 때 동작하는 메서드 의미, parameter는 전달할 데이터 5) 이벤트 버스를 이용한 데이터 전달 이벤트 버스는 발행자와 구독자 패턴으로 이루어져있다. 컴포넌트가 A이벤트 발행하면 B이벤트가 A이벤트를 구독하는 구조 6) 컴포넌트 재사용 : 슬롯 부모..

A) Vue.js 인스턴스 1) 뷰 인스턴스 template 뷰 instance에서 정의한 데이터와 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속서 methods 마우스 클릭이나 버튼 클릭과 같은 이벤트 처리하는 동적인 작업 처리 ( 사용자가 이벤트를 함 ) computed data 객체 내 프로퍼티에 변화가 발생할 때마다 변화됨 => React의 useEffect와 같음 props 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용된다. watch data 객체 내의 데이터를 모니터링 할 수 있다. 특정 데이터에 변화가 생길 시 후속 처리 가능하다. 한페이지내의 인스턴스가 서로 격리되어있지 않기 때문에 하나의 뷰 인스턴스에 있는 데이터에 변화가 생길 경우, ..

Redux toolkit 공식문서에 따르면 RTK Query is powerful data fetching and caching tool 강력한 데이터 패칭과 캐싱 툴을 지원해주고 있다. 본인도 RTK를 한 3개월 정도 써본 결과 직접 느낀 장점들이 있었다. ❏ Api로부터 호출된 데이터가 캐싱된다. - RTK를 사용하지 않을 경우, 검색 조회조건이 변경될 때마다 api를 호출했을 것이다. 하지만 RTK를 쓰니, 이미 호출했던 조건으로 변경 했을 때 캐싱된 데이터가 있어, API 재호출을 안해주는 특징이 있었다. ❏ API 응답 상태를 따로 명시안해도 된다.Redux-thunk를 사용하게 되면 pending,fullfiled,rejected 를 제공해주어 비동기 처리가 가능한 점이있다. 하지만 loadi..

Intersection ObserverAPI를 사용하게 되면, 우린 특정 element가 viewport에 보일때 관찰이 가능하다. 주로 해당 기능을 페이지 성능 개선을 위해 Lazy Image loading에 사용하곤 한다. intersection observerAPi를 사용하지 않고, react.js, typescript를 사용하여 구현해보도록 하겠다. | 화면 크기 구하기 element가 viewport에 표시되는 것을 관찰하기 위해서는, window의 width, height를 먼저 알아내야한다. 유동적 화면 변화를 위해선 eventHandler를 사용하여 크기를 감시해야한다. useEffect(() => { handleObserveElement(); }, [handleObserveElement]..

line-break가 안되는 이유는 jsx에선 \n가 동작하지 않아 오류 출력이 나오게 된다. 이를 해결하기 위해서는 해당 text가 들어간 div에 white-space에 pre-line 속성을 줄경우 \n을 인식하여 line-break가 된다.

막대를 x축 방향으로 슬라이드를 통해 두개의 이미지를 보여지도록 개발했다. 1. 이미지 2개 겹치기 //이미지 1개 /** 막대 setPressed(true)} onMouseUp={() => setPressed(false)} > {""} **/ //이미지 2개 styled-components const Layout = styled.div` display: flex; justify-content: center; width: 100%; height: 100%; position: relative; overflow: hidden; border: 1px solid ${({ theme }) => theme.gray300}; div[class^="crop"] { position: absolute; width: 100..

폼을 저장할 때 버튼을 한번에 많이 눌렀을 경우 API 중복 호출이 일어나기 때문에, 이를 방지하기 위해서 throttle과 debounce를 사용할 수 있다. 1. throttle throttle은 버튼을 클릭했을 때 최초로 한번 실행하고, n초 동안을 실행 못하도록 해준다. 2. debounce debounce는 버튼을 클릭하고 n초동안 실행을 못하도록 방지해주고, 제한시간이 끝나고 나서야 api호출을 해준다.

구글 맵에서 기존에 있던 장소 마커를 지우고 싶을 경우 //커스텀 맵 스타일 선언 const mapStyle = [ { featureType: 'poi', //(물가, 교량..등 장소) elementType: 'labels.icon', stylers: [{ visibility: 'off' }], }, ... return( ) 위에 처럼 해주면 된다 참고 https://developers.google.com/maps/documentation/javascript/examples/maptype-styled-simple Styled Map Types | Maps JavaScript API | Google Developers This example creates a new map type, which the us..