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

에 대해 배워보겠습니다. 저는 강의를 들으면서 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..

*선생님코드아님 주의, 틀릴 수 있음 주의, 들으면서 적은거 아님주의, 복습하면서 적은거임, 기능개발하기 1. 리스트 팝업 토글 2. 50만원 미만 3. 고가순 정렬 4. 저가순 정렬 5.리스트 원래대로 1.리스트 팝업 토글 -내부에 버튼과 팝업의 html을 생성해주세요. 버튼 팝업 위의 List는 컴포넌트화 해서 가져왔는데, 이렇게 해도 되고 html에 그냥 태그를 사용해서 작성해도 상관 없습니다. (원룸들오리지널을 넣어야 변형이 없습니다.) -data에 배열 데이터, if문에 들어갈 데이터가 있어야합니다. 여기서 리스트보여줄까로 show, hide하고 원룸들 데이터로 v-for를 사용해서 출력해줍니다. 여기서 원룸들의 [...Data]는 원룸 데이터를 import해와서(Data)를 deep 카피하여 ..

*선생님코드아님 주의, 틀릴 수 있음 주의, 들으면서 적은거 아님주의, 복습하면서 적은거임, 기초 셋팅 Node.js 설치 (10버전 이상) VSCode 에디터 설치 Yarn 설치 설치 여부 상관없이 진행가능하나 속도면에서 yarn이 유리하다고 합니다. vscode 에디터 프로젝트 여는 법 프로젝트를 진행 할 폴더를 바탕화면에서 생성하세요. 이 폴더는 Root 폴더가 됩니다. 하위에 vue 프로젝트 폴더가 생성될 것입니다. 이하 Root 폴더라고 하겠습니다. vscode 에디터를 통해 Root 폴더를 오픈합니다. 메뉴 File > Open Folder > Root 폴더 yarn 설치 vscode 에디터로 Root 폴더를 열어 준 후에 터미널을 열어줍니다. 단축키(crtl + `) 또는 메뉴 Termina..