주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

에 대해 배워보겠습니다. 저는 강의를 들으면서 slot에 대해 처음알게되었습니다. slots는 하위컴포넌트에게 HTML, Component를 전달 할 수 있다고합니다. 그리고 을 사용하는 이유는 props 정의안하고 parent에서 child로 데이터를 간단히 표현할 때 사용한다고 합니다. 컴포넌트를 사용할때 로 사용하고는 했는데, 가끔 강의를 보면 로 사용하고는 하는 사람들을 봤습니다. 은 여닫는 함수가 모두 존재할 때에만 사용할 수 있다고 합니다. 문법 child parent 여기에 HTML을 넣으면 slot 안에 표현된다 을 vue파일에 추가합니다. App.vue App.vue 파일에서 태그 사이에 타이틀을 삽입해보겠습니다. Editor.vue 을 사용해줍니다. 아래와 같이 확인이 됩니다. 정상적으..

EventBus에 대해 알아보겠습니다. EventBus는 컴포넌트간의 통신을 쉽게해준다고 합니다. 물론 child-parent 까지의 간단한 컴포넌트라면 사용안해도 props를 통해 통신을 할 수 있습니다. 하지만 복잡해진 트리 체계를 갖게된다면? EventBus를 사용해서 처리하는 방식을 알아보겠습니다. EventBus.js 파일을 생성해줍니다. 그리고 EventBus.js에 내용을 작성해 줍니다. import Vue from 'vue'; export default new Vue() 이것으로 EventBus.js 내부 작성은 끝입니다. 이것을 기존 프로젝트에서 import해서 사용하면됩니다. 예제를 하기위해서 기존 프로젝트에 parent-child 구조의 컴포넌트 하나를 추가하겠습니다. 아래 영역을 C..

기존의 3차에서 썼던 소스를 활용해서 계속 수업을 진행했습니다. 잘 있나 npm run serve를 한 번 해보고 시작합니다. 잘있으면 일단 첫번째로는 인스타에 올릴 때 필터효과를 사용해보도록 하겠습니다. cssgram 을 사용할 것인데요, 전 처음 알았어요 https://una.im/CSSgram/ CSSGram What is This? For more background on CSS Image Effects, you can check out my blog series here, or watch my video from CSS Conf EU, which gives a baseline on blend modes and filters. Simply put, CSSgram is a library for ed..

디자인 패턴은 개발 도중 발생한 문제에 대해 정리하여 각 상황에 맞게 쉽고 간편하게 적용해서 사용할 수 있도록 돕기위한 패턴으로, 수단 중에 하나입니다. MVC 패턴 (Model View Controller) 구성요소를 세가지 역할로 구분한 패턴입니다. 페이지, 데이터 처리, 컨트롤 영역의 3가지 파트를 나누어 담당하게 되면 유지보수성, 확장성, 유연성이 증가합니다. 또한 각 역할의 파트가 정해져있기 때문에 중복코딩이 줄어드므로 효율적입니다. 조작은 Controller로 하며 Model을 통해 데이터를 가져옵니다. 그리고 이것을 바탕으로 View를 제어하여 시각적인 것을 사용자에게 노출합니다. Model 애플리케이션의 정보들을 나타내며 이러한 데이터들의 가공을 책임지는 컴포넌트입니다. 즉, 내부 비즈니스..