롤 전적 사이트 구현 - 게시판 글 쓰기(front)

음 ... 글쓰기 프론트 부분은 안 어려웠다...
그래서 그냥 코드를 다 넣겠다..

<template>
  <div class="write">
    <form name="write_form" @submit.prevent="handleWrite">
      <div class="input-group">
        <input
          id="title"
          v-model="title"
          type="text"
          placeholder="제목을 입력해주세요"
        />
      </div>
      <div class="input-group">
        <input id="org_file" type="file" multiple @change="onChangeFile" />
      </div>
      <div class="input-group">
        <textarea
          id="content"
          v-model="content"
          placeholder="내용을 입력해주세요"
        ></textarea>
      </div>
      <button type="submit">확인</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "",
      content: "",
      file: [],
    };
  },

  methods: {
    handleWrite() {
      this.$store.commit("setPosts", {
        title: this.title,
        content: this.content,
        org_file: this.file,
      });
      this.$store.dispatch("writePost");
      this.$router.push("/board/list");
    },
    onChangeFile(event) {
      this.file = event.target.files;
    },
  },
};
</script>

vue 에는 양방향 바인딩을 해주는 v-model 이라는 게 있는데 input 과 value 를 합친 거라고 생각하면 된다. input 에 값을 입력하면 value 가 바뀐다...
근데 어차피 엄청 번거롭게 써야해서 왜 쓰는 건지 모르겠다.

boardStore

import axios from "axios";

const state = {
  lists: [],
  details: {
    bno: "",
    created_date: "",
    updated_date: "",
    content: "",
    fno: "",
    id: "",
    org_file: "",
    stored_file: "",
    title: "",
    viewcount: "",
  },
  posts: {
    title: "",
    content: "",
    org_file: [],
  },
};

const getters = {
  getDetail: (state) => state.details,
  getPost: (state) => state.posts,
};

const mutations = {
  setLists(state, data) {
    state.lists = data;
  },
  setDetails(state, data) {
    state.details = data;
  },
  setPosts(state, data) {
    state.posts = data;
  },
};

const actions = {
  writePost(context) {
    const formData = new FormData();

    formData.append("id", context.rootState.user.login.loginId);
    formData.append("title", context.state.posts.title);
    formData.append("content", context.state.posts.content);

    for (let i = 0; i < context.state.posts.org_file.length; i++) {
      formData.append("uploadfiles", context.state.posts.org_file[i]);
    }
    axios
      .post("/api/board/write", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })
      .then((res) => {
        context.commit("setPosts", res.data);
      })
      .catch((e) => {
        console.error("API 호출 실패", e);
      });
  },

vuex를 모듈화해서 기능별로 나눴다 보니까 actions, mutation 이런 식으로 나눌 수도 있던데 그건 도저히 ... 하고 싶지가 않아서... 난 기능별로만 나눴다.

근데 진짜 vuex 는... 쓴 사람도 별로 없고 뭐 찾아볼데도 별로 없고 검색하면 중국어 나와서 어이없고 내가 원하는 뭔가가 있는데 그걸 해준 사람이 별로 없다. props 로 하는 게 편하긴 해...

뭐 여튼 formData 도 store에서 다 만들었다ㅋㅋ 보기 싫은 건 여기에 다 넣어버림 사실 컴포넌트에서 만들고 store로 보내면 되지만 그럼 해야할 일이 두 번이라 하기 싫었다!

파일은... 배열에 있는 파일을 for 문 돌려서 꺼내서 다시 formdata 에 넣었다 파일 배열은 어디에서 꺼내왔냐면
state 에 있는걸 꺼내오면 된다.

cotext.commit 이건 vuex의 저장 방식..? 뭐 그런 건데 vuex 에 있는 data를 저장하려고 하면 저렇게 써줘야 한다.

컴포넌트 내에서는

this.$store.commit("setPosts")

store 에 하는 거니까 이렇게~

vue 는 정말 재밌고 정말 짜증난다! 리액트랑 비교해서 자유도가 떨어진다는 게 뭔 말인지 좀 이해가 간다 근데 좀 딱.. 정해진 형식이 있어서 좋은 점도 있고 코드를 이해하기가 편하다.