뷰 탭기능이랑 라우터 차이 질문입니다

[김한결]

회원이 20~30명 정도인 커뮤니티 사이트(글보기 글쓰기 글수정 글삭제)를 

만들려고합니다만,  탭기능을 써야할지 라우터를 써야할지 모르겠습니다.

라우터를 쓰면 뒤로가기 앞으로가기가 사용이 가능하다고 하셧는데

탭기능으로 만들때의 강점 한가지랑 라우터로 만들때의 또다른 강점 한가지 있을까요...?

그리고 추가적인 질문입니다만. ..
Node.js 강의에선 몽고DB로 로그인, 회원가입 기능을 만들었는데, 
뷰에서는 vuex 만으로도 로그인 회원가입 기능 그리고 회원이 쓴 글 저장 
등등을 구현할 수 있는건가요?

[김한결]

선생님... 리액트도 구매했습니다..ㅎㅎ

질문 몇가지만 더 해도 될까요...

일단 제 의문점입니다. 

fire로 인풋의 내용을 전송했더니 라우터사이에선 안되는건지? 먹통입니다.

라우터로 write 페이지를 만들었는데 

제출 버튼을 누르면 유저가 입력한

글 제목, 작성 날짜, 사진, 글 내용   이렇게 4가지 종류를 

js 파일에 저장하고 싶을땐 어떻게 하는게 좋을까요?

 리스트가 다시 불러오는곳은 postdata.js 인데 여기에 fire로 unshift 해도 계속 안되네요..

1. 혹시 이런건 Vuex 문법으로 해야하나요?

하루종일 밤새면서 만져봐도 모르겠습니다.. 

(노드 js 몽고db 강의때는 데이터 베이스가 있어서 좀 편한거같은데...)
 

2. Vue는 몽고db를 이용해서 어떻게 못하나요? 


오류 발견은 

App.vue에 fire 해서 var = 내게시물 { 가져온내용 } 
this.게시물.unshift(내게시물) 이런식으로 강의처럼 했는데 unshift 가 도통 작동하질 않네요...
(탭이 아니고 현재 라우터 사용중입니다)

핵심 질문입니다.

제출하기 버튼을 눌렀을때 해당 라우터(write.vue)의 input에 있는 정보를
 Array 나 Object 로 다른 라우터 or 데이터 파일(postdata.js or store.js)로 
어떤식으로 해야 보낼 수 있는지?


제가 짠 코드입니다..

<template>
  <div class="container mt-4">
    <h4>게시물 작성하기</h4>
    <hr />
    <div class="container mt-3">
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-default"
            >글 제목</span
          >
        </div>
        <input v-model="작성한제목"
          type="text"
          class="form-control"
          aria-label="Sizing example input"
          aria-describedby="inputGroup-sizing-default"
        />
      </div>
    </div>

        <div class="container mt-3">
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-default"
            >날짜</span
          >
        </div>
        <input v-model="작성한날짜"
          type="text"
          class="form-control"
          aria-label="Sizing example input"
          aria-describedby="inputGroup-sizing-default"
          placeholder="예시 : 2027-07-07"
        />
      </div>
    </div>

    <div class="container mt-4">
      <div class="card">
        <div class="post-body" :style="{ backgroundImage: `url(${이미지})` }">
          <span><br /><br /><br /><br /><br /><br /><br />사진 미리보기</span>
        </div>
      </div>
    </div>

        <div class="fileselect">
          <input
            @change="upload"
            multiple
            accept="image/*"
            type="file"
            id="file"
            class="inputfile"
          />
          <label for="file"></label>
        </div>

    <div class="container">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text">내용</span>
        </div>
        <textarea v-model="작성한글"
          class="form-control bigform"
          aria-label="With textarea"
        ></textarea>
      </div>
    </div>
  </div>
 <div class="footer">
 <button @click="fire" class="btn btn-outline-primary mt-3">제출하기</button>
 </div>

</template>

<script>
export default {

    name: 'Wirte',

    data(){
    return {
      이미지 : '',
      작성한글 : '',
      작성한제목 : '',
      작성한날짜 : '',
    }},

    methods: {
    upload(e) {
      let 파일 = e.target.files;
      console.log(파일[0].type);
      let url = URL.createObjectURL(파일[0]);
      console.log(url);
      this.이미지 = url;
    },

    fire(){
      this.emitter.emit('데이터', { 
        title : this.작성한제목, content : this.작성한글, postImage : this.이미지, date : this.작성한날짜})
    },

}
}
</script>

[codingapple]

큰페이지들은 라우터쓰는게 낫습니다 회원기능은 서버가 있어야합니다 
자바스크립트만으로 파일열어서 작성하는건 어려운데 state에 저장하거나 따로찾아봅시다

[김한결]

감사합니다

[글쓴이]

글