![]()
오늘은 REST API test url 사이트에 대해 포스팅하려고 합니다. 웹 개발을 할 때 API를 자주 사용하게 되면서 REST API는 필수적으로 사용되는 형태입니다. REST API에 대한 FrameWork 모듈, Library, Tools 등 굉장히 많은 곳에서 지원하기 때문에 기능에 대한 점검 또는 테스트가 필요할 수 있습니다. 단순한 테스트를 위해 API를 직접 정의하는 것도 불필요한 시간이 들고 귀찮은 일입니다. 이러한 API Resource를 지원해주는 웹 사이트가 있습니다. 하단 링크에 접속하면, GET, POST, PUT, PATCH, DELETE의 메소드 타입 사용이 가능하며, JSON형태의 REST API를 테스트할 수 있습니다. https://jsonplaceholder.typi..
![]()
오늘은 step 10. eventBus 컴포넌트 간 데이터 전달에 대해 포스팅하려고 합니다. 컴포넌트 간의 데이터 전달은 총 2가지가 있습니다. 첫 번째 방법은 서로 컴포넌트끼리 연결되어 event-emit(부모로 전달), props(자식으로 전달)의 형태로 사용되는 데이터 전달 방법이 있고, 두 번째 방법은 서로 관계없는 컴포넌트끼리 데이터를 전달하는 eventBus의 연결 방법이 있습니다. 바로 앞에 첫번째 방법에 대해 포스팅했기 때문에, 오늘은 두번째 방법인 서로 관계없는 컴포넌트끼리 데이터를 전달하는 eventBus 방식에 대해 진행하겠습니다. eventBus는 컴포넌트간에 상위(부모), 하위(자식) 관계가 없더라도 데이터를 전달할 수 있다는 장점이 있지만,너무 많이 사용하면 관리가 안된다는 단점..
![]()
오늘은 Vue.JS step 9. 같은 컴포넌트 레벨의 데이터 전달(자식1 -> 자식2)에 대해 포스팅하려고 합니다. 컴포넌트 간의 데이터 전달은 총 2가지가 있습니다. 첫 번째 방법은 서로 컴포넌트끼리 연결되어 event-emit(부모로 전달), props(자식으로 전달)의 형태로 사용되는 데이터 전달 방법이 있고, 두 번째 방법은 서로 관계없는 컴포넌트끼리 데이터를 전달하는 eventBus의 연결 방법이 있습니다. 오늘은 첫번째 방법인 event-emit(부모로 전달), props(자식으로 전달) 방식에 대해 진행하겠습니다. 상위(부모) 컴포넌트에서 하위(자식) 컴포넌트로 데이터를 전달할때는 props를 사용하고, 하위(자식) 컴포넌트에서 상위(부모) 컴포넌트로 데이터를 전달할때는 event-emit..
![]()
오늘은 Vue.JS step 8. event-emit 데이터 전달(자식 -> 부모)에 대해 포스팅하려고 합니다. 하위(자식) 컴포넌트에서 상위(부모) 컴포넌트로 데이터를 상속하기 위해서는 하위(자식) 컴포넌트에서 이벤트를 발생시켜 전달합니다. 디렉티브(directive)의 이벤트 문법인 v-on이 사용되어야 하며 v-on:[하위(자식) 컴포넌트 이벤트 이름]="[상위(부모) 이벤트 핸들링 메소드 이름]" 형태로 선언되어야 합니다. 그리고 하위(자식) 컴포넌트 이벤트 이름은 this.$emit('이벤트 이름', 전달 파라미터) 형태로 $emit() 안에 이벤트 이름과 전달하고자 하는 파라미터를 정의해야 합니다. 파라미터 전달 없이 이벤트만 실행하는 것이 목적이라면 this.$emit('이벤트 이름') 형태..
![]()
오늘은 Vue.JS 보간법 디렉티브(Directive) v-bind, v-on 약어에 대해 포스팅하려고 합니다. vue에서는 인스턴스에 선언한 엘리먼트를 통해서 DOM요소를 제어합니다. DOM 제어는 v- 접두어가 붙어있는 보간법 디렉티브 속성들을 사용합니다. 디렉티브 속성중에서 v-bind와 v-on은 vue에서 자주 사용되기 때문에 약어를 제공하고 있습니다. 약어의 사용은 개인의 취향 또는 선택사항이지만 개발자끼리 소통 또는 서로의 코드를 공유하고 쉽게 이해하기 위해서는 필수로 알아두어야 한다고 생각합니다. 1. v-bind 약어 ... ... ... 2. v-on 약어 ... ... ... 참조 - https://kr.vuejs.org/v2/guide/syntax.html#%EC%95%BD%EC%9..
![]()
오늘은 Vue.JS step 7. props 데이터 전달(부모 -> 자식)에 대해 포스팅하려고 합니다. Vue.JS에서는 상위(부모) 컴포넌트에서 선언한 data의 값을 하위(자식) 컴포넌트에서 사용하고자 할 때 단순하게 bind를 하거나 Mustache(이중 중괄호)를 사용하여 data를 이용할 수 없습니다. 위 문제를 해결하기 위해 props라는 속성을 이용합니다. props란 상위(부모) 컴포넌트에서 하위(자식) 컴포넌트로 데이터를 전달할 때 사용되는 전달 방식입니다. v-bind를 사용하여 상위(부모) 컴포넌트의 데이터를 동적으로 바인딩할 수 있습니다. 아래 예제 소스코드를 통해 알아보도록 하겠습니다. props.html을 만들고, 기본 html에서 vue를 활용해 보겠습니다. 위 예제 소스에서 ..
![]()
오늘은 온라인에서 사용 가능한 gif 변환기에 대해 소개 및 사용법에 대한 포스팅을 하려고 합니다. 종종 확장자를 변환하여 사용할 일들이 생기는데 그때마다 특정 tool을 설치하여 사용하는 일도 생각보다 번거로운 일입니다. ezgif는 설치가 필요 없이 아래 링크를 통해 온라인에서 사용할 수 있습니다. https://ezgif.com/ Animated GIF editor and GIF maker Easy to use online animated GIF maker and image editor. Upload and edit GIF images for free. Create, crop, resize, reverse, optimize and split animated GIFs, cut and resize vi..
![]()
오늘은 CentOS7에서 python 패키지 수동 설치 방법에 대해 포스팅 하려고 합니다. CentOS7에서 python은 기본으로 2.7.5v이 설치되어 있습니다. 새로운 python version을 사용하기 위해서 yum install python과 같은 명령어를 사용할 수 있지만, 안정화된 버전들만 yum install이 되기 때문에 python의 가장 최신버전을 설치하기 위해서는 python 패키지를 별도로 다운받아서 수동으로 설치해야 합니다. 1) python 설치에 필요한 플러그인 설치 # yum install gcc openssl-devel bzip2-devel libffi-devel -y 2) python 설치 버전 확인 및 다운로드 아래 링크를 통해 수동으로 설치하기 위한 python 버..
