나아가기

+추가를 통해 원하는 메모를 추가하는 기능 만들기 1. frontend 의 MemoView.vue 페이지의 2. backend의 index.js 페이지의 코드 추가 및 수정 app.put("/api/memos/:idx", (req, res) => { //console.log(req.idx); //console.log(req.body); memos[req.params.idx] = req.body.content; res.send(memos); });

1. front / views에 vue 파일 만들기 GroundView.vue 파일을 기본으로 안에 다른 vue 파일들을 import 할 예정!! GrandView.vue 파일 작성하기 HeaderView.vue 파일 작성하기 Memo app FooterView.vue 파일 작성하기 © Memo App. All rights reserved. MemoView.vue 파일 작성하기 + 추가 메모 내용 1 메모 내용 2 메모 내용 3 다음과 같은 화면이 완성되게 됩니다. MemoView.vue 파일 수정하기(1) + 추가 {{ d }} 버튼이 먹히도록, MemoView.vue 파일 수정하기(2) + 추가 {{ d }} 다음과 같은 결과창이 나온다면, 아주 잘따라온 것 입니다!!

1.화면단 구성하기 TodoList.vue TodoList는 추가한 값들이 저장되고, 저장된 것들을 가져와서 차례대로 보여줄 컴포넌트입니다. 간단하게 로컬스토리지에 저장해서 보여지도록 하겠습니다. {{todoItem}} 1) transition-group태그는 trasition의 뷰 애니메이션을 구현하기 위한 태그로 데이터 추가, 변경, 삭제에 대해서 페이드 인이나 페이드 아웃 등의 여러가지 애니메이션 효과를 줄 수 있습니다. 2) v-for은 지정된 갯수만큼 반복해서 html을 표시하는 반복문 디렉티브 입니다. 여기서 반복시킬 propsdata는 상위 컴포넌트로부터 전달받은 데이터를 이용할 예정입니다. 상위 컴포넌트인 App.vue에서 보내주지 않은 지금 상태에서는 prosdata가 로컬스토리지에서 가..