내가 한 노력들

블로그나 웹사이트에는 사진을 클릭하게 되면, 해당 사진이 확대되고 회전시킬 수 있다는 등 다양한 조작이 가능한 경우를 볼 수 있습니다. 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으로 보냅니다..

DB에서 Data 받아와서 화면에 뿌려주기 created 훅을 이용해서 DB값을 받고 data에 저장을 합니다. 여기서 created 훅이 무엇인지 더욱 알기 위해서는 구글에 Vue 라이프싸이클을 검색해서 좀 더 자세히 알아보시길 추천 created는 쉽게말하면 vue 인스턴스가 생성이되고 DOM에 부착되기전으로 vue의 data에 접근이 가능하기 때문에 외부로부터 데이터를 받아와서 vue의 data에 넣어주는 경우에 많이 사용이 된다. created() { axios.get('api/todo').then(res => { this.ToDoList = res.data.ToDoList; }); }, 이번에는 데이터를 가져오기 때문에 axios.get을 이요합니다. api.php Route::get('/tod..

To Do 생성 가장 중요한 핵심 기능인 To Do를 생성하는 기능 Text Form 사용자의 Text를 받아서, To Do를 제작해야하니 Text Form을 이용한다. input태그안에 사용된 Vue 문법 정리 v-model v-model은 input태그에서 사용하며, 실시간으로 양방향 바인딩이 가능하도록 해준다. 이게 무슨말이냐면, data()에서는 template에서 사용될 변수를 선언해주는 부분인데, 여기서 title이라는 변수를 v-model로 바인딩하게 되면, text form에서 글을 작성하는 동시에 그 내용을 title에 넣어주는 것이다. text form에 "안녕"이라고 적으면, title은 ''로 초기화되어있지만 양방향 바인딩으로 "안녕"이라는 값이 title에 들어간다. data() ..