#한 권으로 배우는 Vuejs3 #Vue #뷰 #Vuejs #Vuejs3
안녕하세요. 한 권으로 배우는 Vue.js 3편에 Vue.js3와 Javascript로 만든 Todo Application 예제가 나옵니다. local Storage를 이용해서 Vue.js3를 친숙하게 하려고 만든 예제인데, 이 예제에 온라인 기능을 추가해보겠습니다.
먼저 main.js 파일을 보면 today라는 오늘 날짜를 provide를 이용해서 공유를 하는데, 이 시간을 한국 시간대인 UTC+90로 변경해 보겠습니다.
위와 같이 브라우저의 offset을 요구하여 today에 오프셋만큼 적용시켜 주었습니다. get Timezone Offset은 분 단위로 오프셋을 반환하지만 자세한 내용은 아래 링크에 있습니다.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffsetThe getTimezoneOffset()method returns the difference, in minutes, between a date as evaluated in the UTC time zone, and the same date as evaluated in the local time zone.developer.mozilla.org이제 본격적으로 온라인 지원을 허브로 만들기 위한 코딩을 해야 합니다. 서버는 책에 있는, express를 이용하여 구축한다그리고 관련해서는 Mongodb를 이용할 생각입니다만, Backend 부분은 다음에 기회가 되면 설명하도록 하겠습니다. 다만, 현재로서는 다음과 같은 API를 위해 서버를 준비해 두었다는 것만 알아 주십시오.
/api/todo/:user_idgetuser_id를 가지고 계신 고객의 TODO 데이터를 가져옵니다./api/todopost Payload에 있는 데이터를 저장합니다./api/todo/:todo_idput에 해당하는 id를 가진 todo를 업데이트합니다./api/todo/:todo_iddelete 에 해당하는 id를 가진 todo를 삭제합니다.이제 이들 api를 지원하는 composition 함수를 준비해 가겠습니다. 사실 상태 관리를 하지 않기 때문에 composition이라고 하기에는 좀 그렇고, ES Module입니다. 단, 폴더를 따로 추가하지 않기 때문에 compositions 폴더에 추가를 하도록 하겠습니다.
생성 : / src / compositions / useDatabase . js
작성 후에는 다음과 같이 코드를 작성하거나 응용해 주세요. 기존 코드를 최대한 활용하기 위해 기존에 생성된 모듈도 이용했습니다. 이와 같이 use Domain을 이용하면 local host에서 테스트를 쉽게 진행할 수 있고 서버의 빌드가 되면 자동으로 서버의 도메인을 활용할 수 있어 개발 시 매우 유용합니다.먼저 load DB Todos 함수입니다. userid와 콜백함수를 입력받고 해당 userid의 데이터를 받아 콜백함수를 호출합니다. 콜백함수를 호출하는 부분은 storage.js 파일에 있던 load Todos 와 같은 기능입니다.
save DB Todos는 저장할 todos 및 콜백 함수를 취득합니다. 단, 기존 save Todos 와는 달리 전체 todos 가 아닌, 저장하는 todos 항목만을 파라미터로 받을 수 있습니다. 이유는 기존에 로컬 스토리지의 데이터를 덮는 것이기 때문에 전체를 업데이트하고 네트워크에 저장할 때는 트래픽 효율화를 위해 새로 추가된 부분만 저장하기 때문입니다.
complete DB Todo 함수는 단순히 completed 속성이 true로 변경된 todo를 DB에 Update합니다.
remove DB Todo는 해당 id를 DB에서 삭제합니다.
손쉽게 네트워크를 이용하여 DB에 저장하는 기능이 모두 완료되었습니다. 다음 포스팅에서는 이를 이용하여 실제 Todo App의 코드를 변경해 보겠습니다.
실제로 구현된 TODO 앱은 다음과 같습니다.https://www.doptsw.com/todo 세계 모든 사람들의 디지털 라이프의 질을 높이기 위해 다양한 애플리케이션과 주요 정보 제공 www.doptsw.com