VUE 3 간단한 메모앱 실습

 

뷰 명령어

npm install -g @vue/cli

 

뷰 프로젝트 생성

vue create frontend

 

 

실행

cd .\frontend\
npm run serve

 

 

실행 화면

초기화면

 

메모 입력

 

메모 추가 완료

코드

App.vue

<template>
  <div class="app">
    <Ground/>
  </div>
</template>

<script>
import Ground from "./components/Ground.vue"
export default {
  components:{Ground}
}; 
</script>

 

Ground 컴포넌트 하나로 만들었다.

 

Ground.vue

<template>
  <div class="ground">
    <Header/>
    <Memo/>
    <Footer/>
  </div>  

</template>

<script>
import Header from "./Header.vue";
import Footer from "./Footer.vue";
import Memo from "./Memo.vue";
export default {
  components:{Header,Footer,Memo}
}
</script>

Ground 뷰는 헤더, 메모, 푸터 컴포넌트들로 이루어져 있다.

 

 

* 부트스트랩을 적용시키기 위해 index.html에 cdn을 작성했다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css">

 

Memo.vue

<template>
  <div class="memo">
    <button class="btn btn-primary btn-block" @click="add()">+ 추가</button>
    <ul>
      <li v-for="(d,idx) in state.data" @click="edit(idx)" :key="idx">{{ d }}</li>
    </ul>

  </div>
</template>

<script>
import {reactive} from "vue";
import axios from "axios";


export default {
  setup() {
    const state = reactive({
        data: []
    })

    const add = ()=>{
      const content = prompt("내용을 입력해주세요")
      axios.post("/api/memos",{content}).then((res)=>{
        state.data = res.data;
      })
    };

    axios.get("/api/memos").then((res)=>{
      state.data = res.data;
    });

    const edit = (idx) =>{
      const content = prompt("내용을 입력하세요",state.data[idx])

      axios.put("/api/memos/"+idx,{content}).then((res=>{
        state.data = res.data;
      }))
    }

    return { state, add, edit };
  },
}
</script>

<style lang="scss" scoped>
  .memo {
    .act{
      padding: 10px 10px 5px 5px;
      text-align: right;  
    }
    ul{
      border-top: solid #eee;
      list-style: none;
      padding: 15px 0;
      margin: 0;

      li{
        padding: 5px 10px;
        margin: 5px;
      }
    }
  }
  
</style>

template 태그 내에는 화면을 구성할 코드를 보통 작성한다.

 

<template>

  <div class="memo">

    <button class="btn btn-primary btn-block" @click="add()">+ 추가</button>

    <ul>

      <li v-for="(d,idx) in state.data" @click="edit(idx)" :key="idx">{{ d }}</li>

    </ul>

  </div>

</template>

v-for을 통해서 반복을 처리한다.

액션 처리는 @를 붙인다.

표시할 데이터는 중괄호 2개를 붙여 표현한다. {{ d }}

 

js 코드는 script 태그내에 작성

<script>

import {reactive} from "vue";

import axios from "axios";

export default {

  setup() {

    const state = reactive({

        data: []

    })

    const add = ()=>{

      const content = prompt("내용을 입력해주세요")

      axios.post("/api/memos",{content}).then((res)=>{

        state.data = res.data;

      })

    };

    axios.get("/api/memos").then((res)=>{

      state.data = res.data;

    });

    const edit = (idx) =>{

      const content = prompt("내용을 입력하세요",state.data[idx])

      axios.put("/api/memos/"+idx,{content}).then((res=>{

        state.data = res.data;

      }))

    }

    return { state, add, edit };

  },

}

</script>

서버와 통신을 위해 axios를 npm을 통해 설치해야한다.

@click="add()" 와 같이 액션에 대한 함수를 작성했다.

 

예제에의 css는 "scss"를 활용했다.

<style lang="scss" scoped>
  .memo {
    .act{
      padding: 10px 10px 5px 5px;
      text-align: right;  
    }
    ul{
      border-top: solid #eee;
      list-style: none;
      padding: 15px 0;
      margin: 0;

      li{
        padding: 5px 10px;
        margin: 5px;
      }
    }
  }
  
</style>

 

CORS 처리

vue.config.js 에서 처리했다.

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:3000",
      },
    },
  },

  transpileDependencies: true,
  lintOnSave: false,
});

 

 

 

간단한 익스프레스 서버

const express = require('express')
const app = express()
const port = 3000
const bodyParser = require("body-parser")

app.use(bodyParser.json());

const memos = []

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(`start:${port}`)
})