Atelier BiCute

언제나 그렇듯 개발자들 문서를 읽어보면 무진장 불친절하다. 뭔가 찾아보면 이것은 반응형(reactive) 종속성에 기반하여 캐시 된다던가, 종속성 관계를 선언적으로 만들었다 같은 그래서 종속성이 뭔데? 그래서 선언적으로 만들었다는 게 뭔데? 같은 처음 접하는 사람들을 전혀 배려하지 않는 글들이 싫어서 정리해보는 글. 1. data 값 담아놓는곳. 아래 예는 count라는 이름으로 4라는 값이 들어있음. data(){ return{ count: 4, } } 2. method 함수 담아놓는 곳. 함수 이름을 호출하면 내부에 적힌 명령어들이 실행됨. 아래 예는 plus()를 실행하면 count의 숫자가 1씩 증가. data(){ return{ count: 4, } }, methods: { plus() { th..

1. slot이 필요한 경우 아래의 샘플은 App.js 내부에 Box 컴포넌트가 하나 삽입되어 있는 형태입니다. 만일 Box 컴포넌트는 여기저기서 앞으로도 계속 써야 하는데, 지금 내가 필요한 건 Contents 1번 밑에 안내글 한 줄만 더 추가하고 싶은 경우. 다시 말하자면 데이터를 추가하고 싶은데 이전 모습 그대로의 컴포넌트를 계속 사용하고 싶다면, 원하는 위치에 구멍 을 뚫어 필요한 데이터를 전달할 수 있습니다 이 형태를 기본으로 slot을 사용해 보겠습니다. (app.js) === APP.JS START === === APP.JS END === (box.vue) Box Component Contents 1 Contents 2 Contents 3 2. slot의 기본적인 사용 방법 (1) 자식 컴..

이번엔 이전에 만든 모달창 형식을 실제 블로그처럼 하나하나의 주소를 가진 게시물로 만들어 볼 것입니다. 라우터 사용방법 복습 겸 추가 기능 익히기라고 보면 되겠습니다. 모달창은 잠시 주석으로 제거해놓고 라우터 방식으로 변경합니다. 1. 세팅하기 라우터를 사용할수 있도록 세팅을 할 것인데, 라우터를 전혀 모른다면 이전 게시물을 우선 참고해 보는것이 좋습니다. Vue 페이지 전환하기 (라우터 설치부터 사용까지) > 세팅 순서 : router설치 > main.js에 등록 > router경로 설정 (main.js) import router from './router' createApp(App).use(router).mount('#app') (/router/index.js) import { createRouter..

이번엔 모달창의 [닫기]버튼을 작동하게 만들것입니다. 모달창(자식 컴포넌트)에서아래와 같이 입력하면 동작을 하지 않습니다. 닫기 애초에 ModalPopup은 부모 컴포넌트에 있고, props로 내려받은 값이라도 자식이 부모의 것을 함부로 바꾸는것은 허용되지 않습니다. 자식 컴포넌트에서 부모 컴포넌트의 데이터를 수정하기 위해선 자식은 부모에게 "***를 어떻게 해주세요" 라고 부탁들 해야합니다. (현실이 반영되어있네요....) 1. 커스텀 이벤트 Vue에서는 부모 컴포넌트의 데이터를 수정하고 싶을때 ~~ 주세요 라고 요청하는것을 커스텀 이벤트라고 부릅니다. 커스텀 이벤트는 다음과 같은 순서로 작성합니다. (1) 자식 컴포넌트는 $emit('작명', 부모에게전달해줄값) 형태로 부모에게 요청합니다. (2) 부..

이제 게시물의 제목을 클릭하면 해당 게시물의 내용을 볼 수 있는 모달창을 띄워보겠습니다. 우선 각자 취향에 맞게 모달창하나 만들고 시작합시다. 지금까지의 내용을 이용하면 이제 쉽게 만들 수 있습니다. 1. 모달창 만드는 방법 (1) 처음부터 뭔가 눌렀을때, 어떻게 해야 모달창이 나타나는것인지 어렵게 생각하지말고 최종적으로 나와있을때의 모습을 기준으로 구현하세요. (2) 그리고 그 창을 끄고 켤수 있는 버튼 (v-if)만 만들어주면 모달창 완성입니다. (이런 방식은 모달창 뿐만 아니라 애니메이션 효과도 동일합니다) 저는 아래와 같이 대충 만들어 봤습니다 (스타일은 코드가 너무 길어지니 생략) // ModalPopup.vue 제목 작성일 내용 닫기 아래는 현재 app.vue의 전체적인 내용입니다. // ap..

Vue에서는 조건에 따라 랜더링을 시킬수가 있는데 v-if와 v-show를 사용할 수 있습니다. HTML 태그 안에 v-if="조건식"형태로 작성하며, 조건식이 참이라면 해당 블록이 랜더링되어 보여지는 형식으로 사용합니다. 1. v-if 사용하는 방법(1) (1) 우선 data에 원하는 이름으로 불리언 형태의 값을 하나 지정해 줍니다. (2) 영역에 조건을 설정해줄 부분에 v-if='데이타명'형식으로 작성을 해주면 끝입니다. 제목 날짜 어쩌구 저쩌구 컨텐츠 v-if="popup"이라고 해놓은것은 popup == true와 같습니다. true라면 해당 컴포넌트를 보여주고 false 일 경우엔 보여주지 않습니다. 아래쪽 data에 지정해 놓은 값을 true로 바꿔서 확인해보시면 됩니다. 이런식으로 꺼졌다 켜..

제1장 • 1-1 개발 환경 세팅하기 • 1-2 프로젝트와 파일의 구조와 형식 • 1-3 새로운 컴포넌트를 생성하고 추가하는 방법 • 1-4 컴포넌트 단위로 스타일 적용하기 • 1-5 페이지 전환하기 (라우터 설치부터 사용까지) • 1-6 데이터 바인딩하는 방법 제2장 • 2-1 반복문(v-for) 사용하는 방법 • 2-2 이밴트 핸들링(v-on) • 2-3 조건식 v-if, v-show • 2-4 데이터를 전달할 때는 props • 2-5 사용자 지정 이벤트(Custom Event) 비슷한 내용의 관련글: 자식이 부모의 데이터를 수정하고 싶으면... (커스텀 이벤트) • 2-6 게시물마다 번호를 달아주자 (라우터 파라미터) • 2-7 데이터를 전달하는 또 다른 방법 Slot 제3장 • 3-1 compu..

Vue에서 다양한 이벤트를 처리하는 방법들입니다. JavaScript의 addEventListener처럼 무언가를 클릭할 때, 혹은 무언가가 변화할 때, 특정 키를 눌렀을 때 등의 상황에 따라 특정 명령을 실행하도록 지정할 수 있습니다. 1. 클릭 이벤트(v-on:click) 이벤트는 v-on:click="실행할코드" 과 같이 사용할 수 있으나, v-on을 줄여서 @click="실행할 코드"로 사용할 수 있습니다. data에 있는 숫자를 증가시키는거 같은 간단한 내용은 바로 지정해줘도 되지만, 많은 이벤트 명령들은 실행할 내용을 script의 아래쪽에 methods로 정의한 후, 그 method를 호출하는 형태로 사용합니다. 제목: {{ item.title }} //

1. 앞으로 만들어 볼 것들 그러고 보니 기능 설명만 하다 보니 어떤 것을 만들지 정하질 않은 것 같습니다. 기왕이면 뭐라도 만들면서 진행하는것이 재밌으니 앞으로의 대략적인 방향은 블로그 메인 화면에선 게시물의 제목과 작성 날짜가 보이게 하고, 제목을 클릭하면 내부 내용을 표시해주는것을 목표로 진행할 예정입니다. 이전 글(Vue 데이터 바인딩하는 방법)을 기준으로 하여 여러 개의 글의 제목과 작성일을 표시해주도록 만들어 보았습니다. {{ title[0] }} {{ date[0] }} {{ title[1] }} {{ date[1] }} {{ title[2] }} {{ date[2] }} 원하는 느낌대로 표시는 잘 되고 있지만, 뭔가 이상합니다. (1) 게시물이 100개, 1000개가 된다면 저렇게 하나하나..

1. Vue의 데이터 바인딩 Vue는 양방향 데이터 바인딩(Two-way data binding)을 지원합니다. (*React는 단방향 데이터 바인딩만 지원) 양방향 데이터 바인딩은 모델과 뷰 중 어느 한쪽이 변경이 일어나면 다른 한쪽에 자동으로 반영되는 것을 의미합니다. 2. 시작하기 전에... 최근 Vue관련 게시물을 계속해서 순차적으로 작성하고 있습니다. 여기서부터는 이제 블로그를 만들어보며 시리즈물로 작성해볼까 합니다. 우선 헤더는 임의의 디자인으로 완성해서 헤더 컴포넌트로 삽입해 놓고 시작합니다. 컴포넌트 만들고 삽입하는거, 또는 이 코드 봐도 전혀 모르겠다 싶으면 컴포넌트 만들고 삽입하는 방법을 작성한 지난 글부터 참고하여 시작하도록 합시다. Vue 새로운 컴포넌트를 생성하고 추가하는 방법 >..