나아가기

로그아웃 기능 추가하기 1. 먼저 frontend/Vue.vue 파일을 수정합니다. 안녕하세요? {{ state.account.name }}님! 로그아웃 # 로그아웃 버튼을 누르면 logout이라는 메서드가 실행되도록 하겠습니다. 그리고 안에 logout 메서드를 정의합니다. const logout = () =>{ axios.delete("/api/account").then(() => { alert("로그아웃 되었습니다."); state.account.id = null; state.account.name = ""; }); }; ... return { state, submit, logout}; 2. backend/api-server.js 파일을 수정합니다. app.delete('/api/account', ..

로그인이 완료됐지만, F5번을 누르면 다시 로그인 창으로 돌아가는 상태.. 따라서 로그인 정보를 담아 둘 곳이 있어야 합니다. 1. backend/api-server에서 cookie를 생성해서 값을 넣어두기 1) 먼저 cookie-parser에 대한 모듈 설치 후 import 해주기 npm i cookie-parser const cookieParser = require('cookie-parser') app.use(cookieParser()); 2) member에 값이 있다면, member정보 값을 보내주는 if문에 cookie 생성하고, 옵션 값도 지정해줍니다. app.post('/api/account', (req, res) => { const loginId = req.body.loginId; const..

지금은 backend / api-server.js 에서 db를 보내주고 있으므로 계속 해당 페이지가 뜰 것입니다. 이번엔 로그인 창에서 로그인에 성공하면, 위의 페이지가 뜨도록 하는 것을 하겠습니다. 1. 로그인 정보 보내주기 # state 상태 값에 form이라는 객체를 추가해줍니다. 각각 모두 빈칸을 부여하고, const state = reactive({ account:{ mid:null, MemberName: "", }, form:{ loginId: "", loginPw: "" } }); 사용자에게 보여지는 템플렛 안에는 다음과 같이 수정합니다. 안녕하세요? {{ state.account.name }}님! 아이디 Password 로그인 # 로그인 버튼을 누르면 ..

https://www.youtube.com/channel/UCfm6gDYNrEW2hXCcIrVvj0w 아프리카도서관 africalibrary21@gmail.com www.youtube.com 해당 영상을 보며 공부한 것을 정리한 내용입니다. 추천!! 1. 프로젝트 생성 1) Test 폴더를 하나 만들어줍니다. 2) 폴더 안으로 들어가서 개발환경을 셋팅합니다. // frontend 폴더 생성 vue create frontend //생성 후, fontend 실행 cd fontend npm run serve npm run serve를 했을때, 다음과 같은 화면이 뜬다면 지금까지 아주 잘하고 있는 것!!! 3) 최상위 폴더로 가서 backend 폴더 만들어주기 mkdir backend //backend 환경 설..

express + mysql 연동하기 1. Mysql 설치 및 스키마 만들기 - Memo 스키마에 memos 테이블 만들어주기. - 테이블에 id와 content 컬럼 만들어주기. 2. backend에 mysql 모듈 설치하기 및 코드 작성하기 1) backend에 mysql모듈 설치하기. npm install mysql 2) backend에 database.js 파일을 만들고, 코드 작성하기 const mysql = require('mysql'); const con = mysql.createConnection({ host: "localhost", user: "root", password: "1234", database: "memo" }); module.exports = { async run(query)..

+추가를 통해 원하는 메모를 추가하는 기능 만들기 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); });

backend 파일 생성하기 1. 최상위 파일로 이동해서 mkdir backend 파일 생성하기 mkdir backend //bakend 파일로 이동한 후, node 모듈 생성 cd backend npm init //express 설치 npm install express --save 2. backend/index.js 파일을 만들고, 다음의 코드를 작성하기 const express = require('express') const app = express() const port = 3000 app.get('/', (req, res) => { res.send('Hello World!') }) app.listen(port, () => { console.log(`Example app listening at ht..

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 }} 다음과 같은 결과창이 나온다면, 아주 잘따라온 것 입니다!!