vue

블로그나 웹사이트에는 사진을 클릭하게 되면, 해당 사진이 확대되고 회전시킬 수 있다는 등 다양한 조작이 가능한 경우를 볼 수 있습니다. js에 다양한 사진 확대 라이브러리가 존재하는데, 그 중에서 lightbox을 설치 및 적용해보겠습니다. 위의 이미지 처럼, 이미지를 클릭하게 되면 확대된 이미지와 그 밑에는 툴바가 있어서 다양한 조작을 할 수 있습니다. npm 설치 npm i vue-easy-lightbox main.js 설정 import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import VueEasyLightbox from 'vue-easy-..

loading overlay란, 비동기 작업이나 실행완료까지 시간이 걸리는 작업을 하는 경우에 로딩중이라는 것을 표현해주는 것을 의미합니다. 위의 이미지와 같이 loading overlayd에는 동그란 이미지, 막대 이미지, 프로그레스 바 등등 다양한 종류가 있습니다. 또한 loading overlay의 중요한 역할중 하나는 어떠한 작업이 진행중에 유저가 다른 작업을 하는 것을 방지합니다. 예를 들어, 사진을 업데이트 하고 사진을 수정하는 웹사이트가 있는 경우에 사진 업데이트가 완료된 후에 수정할 수 있는건데 업데이트가 완료되기도 전에 수정을 하는 것은 문제가 발생할 수 있습니다. 그러한 경우를 막기위해서 업데이트 중에는 loading overlay를 통해서 다른 요소의 클릭등의 작업을 방지할 수 있습니..

Vuex를 사용하여, 컴포넌트간의 통신을 쉽게 할 수 있습니다 vuex는 컴포넌트간 공통적인 상태관리 라이브러리입니다. 컴포넌트간에 데이터를 주고 받고, 통신하기 위해서는 props와 emit등을 사용하는데 컴포넌트의 관계가 복잡하게 되면 의미없는 props가 반복되거나 구현하기 힘든 경우가 있습니다. 그런 경우에 vuex를 이용하면, 쉽게 컴포넌트간 공통 데이터 관리를 할 수 있습니다. vuex파일 설정 import { createStore } from 'vuex' export default createStore({ state: { is_clicked: false, }, mutations: { changeClickedState(state) { state.is_clicked = true; }, }, ac..

Navbar는 화면의 좌측에 위치하여, 간편하게 카테고리를 선택할 수 있도록 도와줍니다. 카테고리에는 전체, 중요, 그룹별, 패턴별이 존재합니다. 그리고 그룹을 생성할 수 있는 버튼도 존재합니다. 그룹 / 패턴 DropBox 그룹 {{ Group.group_name }} Group with selects 그룹은 메인 컴포넌트에서 그룹명을 받아온 것을 이용해 v-for를 이용해 select dropbox form을 사용합니다. 패턴 {{ value }} Pattern 패턴은 매일, 요일별을 array로 만들어 v-for과 select dropbox form을 이용했습니다. 카테고리 변경 함수 全体 重要 전체과 중요카테고리는 div박스에 @Click 이벤트를 이용해서 changeCategory라는 함수를 실..

작성한 To Do에 더욱 상세한 설명을 추가하거나, 패턴 / 마감일등을 추가할 수 있는 기능이다. 해당 To Do 불러오기 우선 상세설정을 하기 위해서는 이전글에서 만들어둔 Detail 화면에서 상세설정이라는 버튼을 누르면 됩니다. ToDoDetail.vue 詳細設定 위의 코드가 상세설정 부분의 코드인데, @Click 이벤트로 redirectToDataSet이라는 함수를 실행시킨다. 파라미터로 toDo 데이터를 같이 보내는 것을 확인 가능 redirectToDateSet(data) { this.$emit('ShowSetDetail', data) }, redirectToDataSet함수에서는 $emit을 통해서 ShowSetDetail이라는 함수이름으로 파라미터로 받아온 toDo데이터를 다시 파라미터로 부..

To Do 목록을 클릭했을 때, 해당 To Do의 Title과 상세내용 및 생성날짜, 마감일등을 확인할 수 있다. 그리고, 완료/복구 처리, 상세내용 수정이 가능하다. ToDoView.vue {{ toDo.title }} ToDo를 보여주던 ToDoView.vue의 div를보면 @Click 이벤트로 onClickToDetail()함수를 볼 수 있다. 이 함수가 목록을 클릭했을 때, Detail화면을 보여주도록 해주는 기반의 함수가 된다. onClickToDetail(data) { this.$emit('onClickToDetail', data); }, onClickToDetail함수는 해당 To Do 데이터를 파라미터로 받아서 부모 컴포넌트로 onClickToDetail이라는 함수로 $emit으로 보냅니다..