분류 전체보기
-
Vue.js - Vuex 개념 및 statesIT/Vue.js 2020. 7. 27. 09:46
Vuex란? Vue.js의 상태 관리를 위한 패턴이자 라이브러리입니다. 다른 상태 관리 패턴이나 라이브러리와 비교했을 때 뷰의 반응성(Reactivity) 체계를 효율적으로 활용하여 화면을 업데이트 한다는 차이점이 있습니다. 정리하자면, - 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리 상태 관리(State Management)가 왜 필요한가? 컴포넌트 기반 프레임워크에서는 작은 단위로 쪼개진 여러 개의 컴포넌트로 화면을 구성합니다. 예를들면, header, button, list 등의 화면 요소가 각각 컴포넌트로 구성되어 한 화면에서 많은 컴포넌트를 사용합니다. 이에 따라 컴포넌트 간의 통신이나 데이터 전달을 좀 더 유기적으로 관리할 필요성이 생깁니다. 상태 관리란? 상태..
-
Vue.js - 하위 컴포넌트에서 상위 컴포넌트 통신 ($emit)IT/Vue.js 2020. 7. 24. 11:09
전에 포스팅들은 부모에서 자식으로 데이터를 전달하는 것을 알아봤습니다. 때로는 하위 컴포넌트에서 상위 컴포넌트로 데이터를 보내거나 메소드를 호출하기도 합니다. 하위 컴포넌트로 상위 컴포넌트의 이벤트를 발생하여 메소드를 호출해보도록 하겠습니다. 이벤트 발생과 수신은 $emit과 v-on 속성을 사용합니다. 1. 이벤트 발생 코드 형식 하위 컴포넌트의 메소드에 아래와 같이 코드를 작성합니다. // 하위 컴포넌트의 내용 this.$emit('이벤트 명'); 그리고 나서 해당 이벤트를 수신하기 위해 상위 컴포넌트의 HTML을 아래와 같이 구현합니다. 그럼 예시로 구현을 해보겠습니다. 2. 하위 컴포넌트 작성 (ChildEmit.vue) 하위 컴포넌트는 'Emit 클릭 !' 이라는 버튼을 클릭하면 sendEven..
-
Vue.js - 컴포넌트 통신 동적 props 사용하기 (Daynamic props)IT/Vue.js 2020. 7. 23. 11:15
Vue를 사용할 때 부모 컴포넌트에 있는 데이터를 자식 컴포넌트에서 필요로 할 때가 있습니다. props 옵션을 사용하면 부모 컴포넌트에 있는 데이터를 자식 컴포넌트로 보낼 수 있습니다. 저번 포스팅에는 정적 porps에 대해서 다루었는데요. https://kshman94.tistory.com/125 Vue.js - 상위에서 하위 컴포넌트 데이터 전달 방법 (props) 컴포넌트간 통신 뷰의 경우는 컴포넌트로 화면을 구성하기 때문에 같은 웹페이지라도 데이터를 공유할 수 없는 경우가 많으며, 각 컴포넌트들의 scope(유효범위)가 독립적이기 때문에 다른 컴포� kshman94.tistory.com 항상 정적인 데이터만 자식에게 넘겨주시는 것이 아니므로, 동적으로 변하는 data를 자식에게 넘겨줘야 할 경우..
-
Vue.js - 상위에서 하위 컴포넌트 데이터 전달 방법 (props)IT/Vue.js 2020. 7. 22. 15:03
컴포넌트간 통신 뷰의 경우는 컴포넌트로 화면을 구성하기 때문에 같은 웹페이지라도 데이터를 공유할 수 없는 경우가 많으며, 각 컴포넌트들의 scope(유효범위)가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수가 없습니다. 상/하위 컴포넌트 관계 상위(Parent) 컴포넌트에서 props라는 속성으로 전달하게 됩니다. props : 상위 컴포넌트에서 하위 컴포넌트로 데이터 전달할 때 사용하는 속성입니다. - 하위 컴포넌트의 속성에 정의 해야 합니다. - 상위 컴포넌트의 HTML 코드에 정의된 child-component 태그에 v-bind 속성을 정의 해야 합니다. 1. 하위 컴포넌트 작성 (ChildAndChild.vue) 상위 컴포넌트의 send 속성을 하위 컴포넌트에 props로 데이터를..
-
Vue.js - 전역/지역 컴포넌트 개념 및 생성IT/Vue.js 2020. 7. 20. 14:47
1. 컴포넌트(Component)의 개념 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 됩니다. 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트입니다. 경우에 따라 특별한 is 속성으로 확장된 원시 HTML 엘리먼트로 나타날 수도 있습니다. Vue 컴포넌트는 Vue 인스턴스이기도 합니다. 그러므로 모든 옵션 객체를 사용할 수 있습니다. (루트에만 사용하는 옵션은 제외) 그리고 같은 라이프사이클 훅을 사용할 수 있습니다. 위와 같이 Vue.js 공식 홈페이지에는 알려주고 있습니다. 저는 이 그림을 보면서 이해하기가 쉬웠습니다. 위 그림과 같이 하나의 화면을 적절하게 분리하여 (화면 또는 기능) 블록화 하며 여기서 하나하나의 블록이 컴포넌트..
-
데브옵스(DevOps) / CICD란?IT/AWS 2020. 7. 17. 11:56
데브옵스(DevOps)와 CICD 개념에 대해서 알아보겠습니다. 1. 데브옵스란? 데브옵스라는 단어는 누구나 한 번쯤은 들어봤을 단어인 만큼 굉장히 많이 사용되는 단어지만 명확한 정의를 아는 사람은 많지 않다고 합니다. 데브옵스가 생긴 이유는, 소프트웨어는 개발부터 고객에게 배포될 때까지 개발, 테스트, 인프라 등 다양한 과정을 거치게 됩니다. 다양한 과정을 거치는 만큼 회사가 조금만 커져도 자연스럽게 각 단계를 진행하는데 반복적이고 불필요한 작업과 오버헤드가 생기기 마련이죠. 결과적으로 배포 주기가 길어지고 배포되는 변경 사항이 커져 배포의 위험이 증가하고 고객에게 새로운 소프트웨어가 전달되기까지 오랜 시간이 걸리게 됩니다. 이러한 문제를 해결하기 위해 나온 개념이 데브옵스입니다. 데브옵스는 개발(De..
-
자작시 - 상상취미/자작시 2020. 7. 16. 16:21
안녕하세요. '상상'이라는 주제로 시를 썼는데요. 상상은 어떤 이에게는 행복을, 어떤 이에게는 슬픔을 주기도 합니다. 상상 당신에게 사랑받는 사람 당신에게 소중한 사람 당신에게 필요한 사람 이것들이 모두 나였으면, 당신에게 그런 사람이 나였으면 당신의 그림자는 언제쯤 나와 함께할까요. 오늘도 상상이란 것을 알기에 마음의 문을 닫는다. 언제쯤 당신과 함께하는 날이 상상이 아닌 현실이 될까. 오늘도 당신에게 사랑받는 사람이 되길 상상하며 하루를 보내요. . . . 상상은 나를 기대하게 만든다 :-)
-
Javascript - var, const, let 차이IT/javascript 2020. 7. 14. 13:51
var, const, let 차이 var, const, let은 javascript 코드를 보다 보면 자주 보게 되는 변수 선언 방법입니다. 이 세가지 변수 선언 방법에는 어떤 차이가 있는지 알아보도록 하겠습니다. const, let은 ES6의 문법이고, var는 ES6이전의 문법입니다. 저는 지금까지 ES5밖에 안써서 이번에 기회가되어 ES6을 사용해보았습니다. 1. var es6 이전의 변수 선언 방식이며, 'var'는 유연한 방식으로 변수를 선언할 수 있는 방법입니다. 그러나, 몇 가지 문제점을 가지고 있습니다. var test='test' function testFunc() { var test='test in function'; console.log(test); } testFunc(); //tes..