vue create frontend 로 프론트앤드 만들기
# 1 app.vue 세팅
<script>
import Ground from "./components/Ground.vue";
export default {
components: {
Ground,
}
}
</script>
그라운드라는 컴포넌트로 세팅.
# 2 component/ground.vue 세팅
<template>
<div class="ground">
<Header></Header>
<Memo></Memo>
<Footer></Footer>
</div>
</template>
<script>
import Header from './Header.vue'
import Footer from './Footer.vue'
import Memo from './Memo.vue'
export default {
name: "Ground",
components: { Header, Footer, Memo }
}
</script>
헤더, 푸터, 그리고 메인인 memo로 나눔.
# component/header세팅
<template>
<div class="header">I am header</div>
</template>
<script>
export default {
}
</script>
<style scoped>
.header {
text-align: center;
padding: 25px;
border-bottom: 1px solid #eee;
background: #f7f7f7;
}
</style>
이건 안쓰려했는데 scoped가 특이해서..
이템플릿안에있는 header에만 스타일을 적용시키겠다 라는 뜻.
footer에도 똑같음.
# 부트스트랩 설정
public/index.html에 넣는거임..
# 사스sass 설정
<style lang="scss" scoped>
.memo {
.act {
text-align: right;
padding: 10px 5px 5px 5px;
}
ul {
list-style: none;
padding: 15px;
margin: 0;
li {
padding: 15px;
margin: 5px;
border: 1px solid #eee;
}
}
}
</style>
frontend 폴더로 가서
npm i node-sass@6.0.1 -D
으로 설치
npm i sass-loader@10.2.0 -D
으로 설치
# script
<script>
import { reactive } from 'vue';
import axios from "axios";
export default {
setup() {
///여기가 데이터
const state = reactive({
data: [],
});
///여기가 데이터
///여기가 메서드
const add = () => {
const content = prompt('write');
axios.post('/api/memos', {content : content}).then((res)=>{
state.data = res.data
})
}
const edit = (idx)=>{
const content = prompt('edit', state.data[idx]);
axios.put('/api/memos/'+idx, {content}).then((res)=>{
state.data = res.data;
})
}
const test = ()=>{
axios.get('/api/memos')
.then((res)=>{
console.log(res.data)
})
}
///여기가 메서드
axios.get('/api/memos')
.then((res) => {
state.data = res.data
})
return {
state,
add,
edit,
test,
}
},
// 여기에 컴포넌트 넣으면 될듯
}
</script>
스크립트가 좀 특이하게 setup()으로 해서 걍 데이터 다 여기에 넣는듯.
return한것들을 데이터,메서드처럼 갖다 쓸수 있음.
# 템플릿과 데이터,메서드 연결
<template>
<div class="memo">
<div class="act">
<button class="btn btn-primary" v-on:click="add()">+ 추가</button>
</div>
<ul>
<li v-for="(a,idx) in state.data" :key="idx" v-on:click="edit(idx)">{{ a }}</li>
</ul>
<button v-on:click="test()">클릭</button>
</div>
</template>
특이한건 edit(idx)로 함수 파라미터도 넣을 수 있음.
# 타입에러
f1에서 preference open setting json으로 가서 vetur에서 false로 바꾸샘
# backend
const express = require('express');
const app = express();
const port = 3000;
const bodyParser = require('body-parser');
const memos = []
app.use(bodyParser.json())
app.get('/api/memos',(req,res)=>{
res.send(memos);
})
app.post('/api/memos',(req,res)=>{
memos.push(req.body.content)
res.send(memos)
})
app.put("/api/memos/:idx",(req,res)=>{
memos[req.params.idx] = req.body.content;
res.send(memos)
})
app.listen(port,()=>{
console.log('서버시작')
})
여기가 중요하다.
프론트앤드는 localhost 8080에서 됨
백엔드는 3000번 포트에서 됨
따라서 백엔드요청을 api형식으로 해서 프론트에서 데이터를 받아서 사용하는걸로 함.
그래서 axios로 데이터를 가져오는거임.
const test = ()=>{
axios.get('/api/memos')
.then((res)=>{
console.log(res.data)
})
}
이런식으로..
여기서 api설정을 해야함. CORS이슈 해결하기위해서.
# CORS해결(프록시)
프론트앤드폴더에 vue.config.js 파일 만들고
// const { defineConfig } = require('@vue/cli-service')
module.exports = {
devServer :{
proxy : {
"/api": {
target : "http://localhost:3000/"
}
}
}
}
이렇게 3000번포트가 api로 된다고 설정해야함.
이거 설정후 다시 서버 껐다고 해야함. 프론트 백 둘다.