내가 한 노력들

Modal popup을 이용해서, 새로운 그룹 추가를 합니다. 우선 모달창을 사용하기 위한, 기본 CSS가 필요합니다. modal창 부분의 흰색과 너비, 패딩등을 설정, 배경부분은 어두워지도록 CSS한 것 입니다. ToDoList.vue > 모달을 사용하기 위한 기본 원리는 토글로 클릭 될 때마다, 해당 요소가 보이게 했다가 안보이게 했다가 그래서 모달부분을 감싸는 div태그에 v-if문을 사용해서 modal_is_state가 true면 보이도록 false면 안보이도록 Modal창 켜기 모달창은 Nav에있는 그룹생성을 클릭하면 보여지게 됩니다 . Navbar.vue グループ作り 그룹생성 div를 @Click이벤트를 이용해서 clickModal함수를 실행시킵니다. clickModal() { this.$em..

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으로 보냅니다..

To Do를 보여주는 부분에 대한 기능 구현에 대한 부분 설명 저번글에서는 DB에서 Data를 받아서 title이름을 보여주는 것 까지 했었다. D-Day 계산 우측 하단에 D-Day를 보여주는 란이 있다. Deadline이 설정되었을 때, 현재 날짜에서 Deadline까지 남은 날짜를 계산해서 보여주는 것, 만약에 Deadline을 설정하지 않았을 경우에는 Deadline을 설정해달라는 문구가 나오도록 했다. 우선 들어가기전에 JS에서 날짜를 받아오는 방법 import dayjs from 'dayjs' const today = dayjs().format("YYYY-MM-DD"); //오늘 날짜를 출력 날짜를 초로 변경하는 법 const todaySec = new Date(today[0], today[1..

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() ..

Vue 설치 Laravel 에서 Vue를 사용하기 위해서는 우선 npm을 이용해 설치를 해야합니다. npm install --save vue@next && npm install --save-dev vue-loader@next webpack.mix.js mix.js('resources/js/app.js', 'public/js') .vue() .postCss('resources/css/app.css', 'public/css', [ // ]); resources/js/components/ToDoList.vue // app.js import { createApp } from 'vue' import ToDoList from './components/ToDoList.vue'; const app = createApp..