나아가기

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 환경 설..

+추가를 통해 원하는 메모를 추가하는 기능 만들기 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 }} 다음과 같은 결과창이 나온다면, 아주 잘따라온 것 입니다!!

1. git에 커밋할 준비를 합니다. git init git add . git commit -m "message" 2. 커밋과 메세지를 넣으면 git의 이름과 이메일을 입력하라는 창이 뜹니다. git config user.name "이름 git config user.email "이메일" git remote add orgin "rep 주소" git push -u origin master 순서대로 잘 따라하시면, 커밋이 잘되었다는 다음과 같은 창이 뜹니다!! 3. 새로운 내용이 추가되거나, 수정되었을 때의 커밋 순서 git add . (또는 특정 파일이나 폴더) git commit -m "message" git push -u origin master

1. 프로젝트 생성 1) Test 폴더를 하나 만들어줍니다. 2) 폴더 안으로 들어가서 개발환경을 셋팅합니다. //Vue 개발 환경 셋팅 npm install -g@vue/cli // frontend 폴더 생성 vue create frontend //생성 후, fontend 실행 cd fontend npm run serve npm run serve를 했을때, 다음과 같은 화면이 뜬다면 지금까지 아주 잘하고 있는 것!!!