yarn 으로 시작하기

1. yarn 설치

https://pakss328.medium.com/yarn이란-b4e8edf1638b

2. yarn global add @vue/cli-init

3.  vue init webpack bootstrap-bbs

$ vue init webpack bootstrap-bbs
 
? Project name vue-board
? Project description A Vue.js project
? Author junhochoi 
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) yarn
 
   vue-cli ·· Generated "vue-board".

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'


import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)




Vue.config.productionTip = false



/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

App.vue

<template>
  <div id="app">
    <Header />
    <!-- <img src="./assets/logo.png"> -->
    <router-view/>
  </div>
</template>

<script>
import Header from '@/components/Header'

export default {
  name: 'App',
  components:{
    Header,
  }

}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Board from '@/components/Board';
import ContentDetail from '@/components/ContentDetail';
import Create from  '@/components/Create';


Vue.use(Router)

export default new Router({
  mode:"history",
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/board/free',
      name: 'Board',
      component: Board
    },
    {
      path: '/board/free/detail/:contentId',
      name: 'ContentDetail',
      component: ContentDetail
    },
    {
      path: '/board/free/create/:contentId?',
      name: 'Create',
      component: Create
    },

  ]
})

components/Header.vue

<template>
  <div>
    <b-navbar toggleable="lg" type="dark" variant="info">
      <b-navbar-brand href="#">Vue.js로 게시판 만들기</b-navbar-brand>

      <b-navbar-toggle target="nav_collapse"/>

      <b-collapse is-nav id="nav_collapse">
        <b-navbar-nav>
          <b-nav-item href="#">공지사항</b-nav-item>
          <b-nav-item to="/board/free">자유게시판</b-nav-item>
          <b-nav-item href="#">구인구직</b-nav-item>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {};
  }
};
</script>

components/Board.vue

<template>
  <div>
    <b-table striped hover :items="items"  :fields="fields" @row-clicked="rowClick"></b-table>
    <b-button  @click="writeContent">글쓰기</b-button>
  </div>
</template>

<script>
import data from  '@/data';

export default {
    data() {
      let items=data.Content.sort((a,b)=>{ return b.content_id-a.content_id})
      items=items.map(contentItem=>{ return {...contentItem, user_name:data.User.filter(userItem=>userItem.user_id===contentItem.user_id)[0].name}})
     return {
  
        fields:[
          {
            key: 'content_id',
            label: '글번호',      
          },
          {
            key: 'title',
            label: '제목',      
          },
          {
            key: 'created_at',
            label: '작성일',      
          },
          {
            key: 'user_name',
            label: '글쓴',      
          }          
        ],
        items:items
      }
    },

    methods:{

       rowClick(item, index, e){
         this.$router.push({
           path: `/board/free/detail/${item.content_id}`
         });         
       },

       writeContent(){
         this.$router.push({
           path:'/board/free/create'
         });
       }

    }



  }
</script>

components/Create.vue

<template>
	
<b-container fluid class="mt-2 p-5">
  <b-row class="mt-2">
	  <b-col sm="12" >
		<b-input v-model="subject" placeholder="제목을 입력해 주세요" ></b-input>
	  </b-col>
	  <b-col sm="12" class="mt-2">
		<b-form-textarea
			v-model="context"
			placeholder="내용을 입력해 주세요"
			rows="3"
			max-rows="10"
		></b-form-textarea>
	   </b-col>
	 

	<b-col sm="12" class="mt-2">	
		<b-button @click="updateMode?  updateContent():uploadContent() ">저장</b-button>
		<b-button @click="cancle">취소</b-button>
	 </b-col>
	</b-row>
	</b-container>
		
</template>

<script>
import data from  '@/data';

export default {
	name:"Create",
	data(){

		return {
			now: "00:00:00",
			subject:"",
			context:"",
			userId:1,
			createdAt:"",
			updatedAt:null,
			updateObject:null,
			updateMode:this.$route.params.contentId>0?true:false
		}
	},

	created(){
		if(this.$route.params.contentId>0){
			const contentId=Number(this.$route.params.contentId);
			this.updateObject=data.Content.filter(item=>item.content_id===contentId)[0];
			this.subject=this.updateObject.title;
			this.context=this.updateObject.context;
			this.createdAt=this.updateObject.created_at;
		}
	},

	methods:{

		uploadContent(){

				let items=data.Content.sort((a,b)=>{return b.content_id-a.content_id});
				const content_id=items[0].content_id+1;
				data.Content.push({
					    content_id: content_id,
						user_id: this.userId,
						title: this.subject,
						context: this.context,
						created_at: this.currentTime(),
						updated_at: null
				});

				this.$router.push({
						path:'/board/free/'
				});
		},



		updateContent(){
			this.updateObject.title=this.subject;
			this.updateObject.context=this.context;
			this.updateObject.updated_at=this.currentTime();
			this.$router.push({
				 path:'/board/free/'
			});
		},


		cancle(){
			this.$router.push({
				path:'/board/free/'
			});
		},


		currentTime(){
			let today = new Date();  
			let year = today.getFullYear(); // 년도
			let month = today.getMonth() + 1;  // 월
			let date = today.getDate();  // 날짜
			let day = today.getDay();  // 요일
			
			month=this.dateFormat(month);
			date=this.dateFormat(date);		
			let currentDay=year + '-' + month + '-' + date;

			this.now = " "+this.dateFormat(today.getHours()) + ":" + this.dateFormat(today.getMinutes()) + ":" +this.dateFormat(today.getSeconds());
			console.log(currentDay+this.now);
			return 	currentDay+this.now;		
		 },

		 dateFormat(str){
			str= "00"+str;
			return str=str.slice(-2);
		 }

	}



}
</script>

<style>

</style>

components/ContentDetail.vue

<template>
<b-container fluid class="mt-5 p-5">
  <b-row class="mt-2">
    <b-col sm="2">
      <label for="textarea-small">글번호:</label>
    </b-col>
    <b-col sm="10">
       <b-form-input v-model="contentId" readonly ></b-form-input>
    </b-col>
  </b-row>

  <b-row class="mt-2">
    <b-col sm="2">
      <label for="textarea-small">글쓴이:</label>
    </b-col>
    <b-col sm="10">
       <b-form-input v-model="user" readonly ></b-form-input>
    </b-col>
  </b-row>

  <b-row class="mt-2">
    <b-col sm="2">
      <label for="textarea-default">등록일:</label>
    </b-col>
    <b-col sm="10">
      <b-form-input v-model="created" readonly ></b-form-input>
    </b-col>
  </b-row>


 <b-row class="mt-2">
    <b-col sm="2">
      <label for="textarea-default">수정일:</label>
    </b-col>
    <b-col sm="10">
       <b-form-input v-model="updatedAt" readonly ></b-form-input>
    </b-col>
  </b-row>
   

  <b-row class="mt-2">
    <b-col sm="2">
      <label for="textarea-large">내용:</label>
    </b-col>
    <b-col sm="10">
      <b-form-textarea      
        size="lg"
        rows="10"
        v-model="context"
      ></b-form-textarea>
    </b-col>
  </b-row>


  <b-row class="mt-2">
      <b-col sm="12" class="text-center">
         <b-button variant="primary" @click="updateData">수정</b-button>
         <b-button variant="success" @click="deleteData">삭제</b-button>
      </b-col>
  </b-row> 

<b-row class="mt-5">
<b-col sm="12 text-left"><span>댓글</span></b-col>
</b-row>
<b-row class="mb-5 comment">
    <b-col sm="12">      
      <CommentList :contentId="contentId"/>
    </b-col>   
  </b-row>

</b-container>
</template>



<script>
import data from '@/data';
import CommentList from '@/components/CommentList';

export default{

  name:"ContentDetail",
  components:{
    CommentList
  },

  data(){
    const contentId=Number(this.$route.params.contentId);
    const contentData=data.Content.filter(item=>item.content_id===contentId)[0]
    return{
      contentId:contentId,
      title:contentData.title,
      context:contentData.context,
      user:data.User.filter(item=>item.user_id===contentData.user_id)[0].name,
      created:contentData.created_at,
      updatedAt:contentData.updated_at
    }
  },

  methods:{
      updateData(){
          this.$router.push({
             path: `/board/free/create/${this.contentId}`
          })
      },

      deleteData(){
         const content_index = data.Content.findIndex(item => item.content_id === this.contentId);
          data.Content.splice(content_index, 1)
          this.$router.push({
            path: '/board/free'
          });
      }


  }

}
</script>
<style scoped>
.comment{
  border: 1px solid black;
  margin-top: 1rem;
  padding: 2rem;
}
</style>

components/CommentList.vue

<template>
  <div>		
	  <div  v-for="(item, index)  in comments" :key="item.comment_id"> 
	  	<div>
			  this index : {{index}}
			  <CommentListItem  :commentObject="item"  :reloadComment="reloadComment"  :commentIndex="index" />
		</div>
	  </div>

	

	<div class="mb-5">
		<CommentCreate :contentId="contentId" :reloadComment="reloadComment" />
	 </div>	  




 

 
	</div>  
</template>

<script>
import data from  '@/data';
import CommentListItem from "@/components/CommentListItem";
import CommentCreate from "@/components/CommentCreate";


export default {
	name:"CommentList",
	props:{
		contentId:Number,
	},

	components:{
		CommentListItem,
		CommentCreate,

	},
	data(){
		return {
			comments:data.Comment.filter(item => item.content_id === this.contentId)
		}		
	},


	methods:{
		reloadComment(){
			this.comments=data.Comment.filter(item => item.content_id === this.contentId)
		}
	}


}
</script>

<style>

</style>

components/CommentCreate.vue

<template>
  <div>
	<b-input-group :prepend="name" class="mt-3">
    <b-form-textarea
      v-model="context"
      placeholder="코멘트를 달아 주세"
      rows="3"
      max-rows="6"
    ></b-form-textarea>
	
	<b-input-group-append>
		<b-button variant="info" @click="isSubComment ?   createSubComment():createComment()">작성하기</b-button>	
	</b-input-group-append>
	
	</b-input-group>
  </div>	  
</template>

<script>
import data from  "@/data";

export default {
  name:"CommentCreate",
  props:{
    contentId:Number,
    reloadComment:Function,
    commentId:Number,
    isSubComment:Boolean,
    reloadSubComments:Function,
    subCommentToggle:Function
  },

	data(){
		return {
			name:"르라나",   
      context:''
		}
  },
  
  methods:{
    createComment(){
       data.Comment.push(
        {
          comment_id:data.Comment[data.Comment.length-1].comment_id+1,
          user_id:1,
          content_id:this.contentId,
          context:this.context,
          created_at:this.currentTime(),
          updated_at:null
        });
        this.reloadComment();
        this.context="";
    },

    createSubComment(){
       
        let subCommentobj={
          subcomment_id:data.SubComment[data.SubComment.length-1].subcomment_id+1,
          user_id:1,
          comment_id:this.commentId,
          context:this.context,
          created_at:this.currentTime(),
          updated_at:null
        }

        data.SubComment.push(
          subCommentobj
        );
        this.reloadSubComments();
        this.context="";
        this.subCommentToggle();
    },

    currentTime(){
        let today = new Date();  
        let year = today.getFullYear(); // 년도
        let month = today.getMonth() + 1;  // 월
        let date = today.getDate();  // 날짜
        let day = today.getDay();  // 요일
        
        month=this.dateFormat(month);
        date=this.dateFormat(date);		
        let currentDay=year + '-' + month + '-' + date;

        this.now = " "+this.dateFormat(today.getHours()) + ":" + this.dateFormat(today.getMinutes()) + ":" +this.dateFormat(today.getSeconds());
        console.log(currentDay+this.now);
        return 	currentDay+this.now;		
    },

    dateFormat(str){
      str= "00"+str;
      return str=str.slice(-2);
    }

  }
	

}


</script>

<style>

</style>

components/CommentListItem.vue

<template>
 <div>
    <div class="comment-list-item">
      <div class="comment-list-item-name">
        <div>{{name}}</div>
        <div>댓글 번호: {{commentId}}</div>
        <div>{{commentObject.created_at}}</div>
      </div>
      <div class="comment-list-item-context">{{commentObject.context}}</div>
      <div class="comment-list-item-button">
        <b-button variant="info"  @click="modalCommentBtn(commentObject)">수정</b-button>
        <b-button variant="info" @click="commentDelete">삭제</b-button>
        <b-button variant="info" @click="subCommentToggle">덧글 달기</b-button>
      </div>
      
	</div>




  <template v-if="subCommentCreateToggle" >
    <SubCommentCreate class="mb-3" :commentId="commentId" :isSubComment="true"  :reloadSubComments="reloadSubComments"  :subCommentToggle="subCommentToggle"  />
  </template>  

  <template v-if="subCommentList.length >0">
      <div v-for="item in subCommentList" :key="item.subcomment_id" class="comment-list-item-subcomment-list ">                
          <div class="comment-list-item">
            <div class="comment-list-item-name">
              <div>{{item.user_name}}</div>
              <div>댓글 번호: {{item.comment_id}}</div>
              <div>서브 댓글 번호: {{item.subcomment_id}}</div>
              <div>{{item.created_at}}</div>
            </div>
            <div class="comment-list-item-context">{{item.context}}</div>
            <div class="comment-list-item-button">
              <b-button variant="info" @click="modalSubCommentBtn(item)" >수정</b-button>
              <b-button variant="info"  @click="commentSubDelete(item.subcomment_id)">삭제</b-button>            
            </div>
          </div>
      </div>
  </template>


  <div>
    <CommentUpdateModal  ref="commentUpdateModal"  :reloadComment="reloadComment" :commentObject="commentObject"  :commentIndex="commentIndex" />   
  </div>

 </div>	
</template>



<script>
import data from "@/data";
import SubCommentCreate from "@/components/CommentCreate";
import CommentUpdateModal from "@/Components/CommentUpdateModal";


export default {
	name:"CommentListItem",
	props:{
    commentObject:Object,
    reloadComment:Function,
    commentIndex:Number,
	},

  components:{
    SubCommentCreate,
    CommentUpdateModal
  },

	data(){

		return{
       commentId:this.commentObject.comment_id,
       modalCommentObject:this.commentObject,
			// userId:this.commentObject.user_id,
			// contentId:this.commentObject.content_id,
      // updatedAt:this.commentObject.updated_at,
      
      name:data.User.filter(item=> item.user_id===this.commentObject.user_id)[0].name,
      
      subCommentList:data.SubComment.filter(
        item=>item.comment_id===this.commentObject.comment_id
      ).map(subCommentItem =>{return {
        ...subCommentItem, user_name:data.User.filter(item=> item.user_id===subCommentItem.user_id)[0].name,
      }}),

     subCommentCreateToggle:false,

		}

  },
  
  methods:{
    subCommentToggle(){
      this.subCommentCreateToggle=!this.subCommentCreateToggle;
    },

    reloadSubComments(){
      this.subCommentList=data.SubComment.filter(
        item=>item.comment_id===this.commentObject.comment_id
      ).map(subCommentItem =>{return {
        ...subCommentItem, user_name:data.User.filter(item=> item.user_id===subCommentItem.user_id)[0].name,
      }})
    },

    commentDelete(){
      if(confirm("정말 삭제 하시겠습니까?")){
        
        let commentId=this.commentObject.comment_id;
        let findItem=data.Comment.find(function(item){ return item.comment_id===commentId});
        let idx=data.Comment.indexOf(findItem);
        
        console.log("findItem:");
        console.dir(findItem);       
        console.log("idx:"+idx);

        data.Comment.splice(idx, 1);               
        this.reloadComment();
      }
    },

    commentSubDelete(subcommentId){
       if(confirm("정말 삭제 하시겠습니까?")){ 
         let findItem=data.SubComment.find(function(item){ return item.subcomment_id==subcommentId});
         let idx=data.SubComment.indexOf(findItem);

         data.SubComment.splice(idx, 1);
         this.reloadSubComments();
      }
    },

    modalCommentBtn(commentObject){
      this.$refs.commentUpdateModal.$refs['my-modal'].hide();
      this.$refs.commentUpdateModal.$refs['my-modal'].show();
    },



  }



}
</script>

<style scoped>
.comment-list-item {
  display: flex;
  justify-content: space-between;
  padding-bottom: 1em;
}
.comment-list-item-name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 0.5px solid black;
  padding: 1em;
}
.comment-list-item-context {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50em;
  border: 0.5px solid black;
}
.comment-list-item-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 0.5px solid black;
  padding: 1em;
}
.btn {
  margin-bottom: 1em;
}
.comment-list-item-subcomment-list {
  display: flex;
  justify-content: space-between;
  padding-bottom: 1em;
  margin-left: 10em;
} 
</style>

components/CommentUpdateModal.vue

<template>
  <div>
    <b-modal
      id="commentUpdate-modal"
      ref="my-modal"
      title="수정 하기"
      @show="resetModal"
      @hidden="resetModal"
      @ok="handleOk"
    >
      <form ref="form" @submit.stop.prevent="handleSubmit">
        <b-form-input
            ref="modalCommentId"
            v-model="commentId"
            :state="commentIdState"
            required
            hidden
          ></b-form-input>

          <b-form-textarea
            ref="modalContext"
            v-model="context"
            :state="contextState"
            required
          ></b-form-textarea>

      </form>
    </b-modal>


    <b-modal
      id="commentSubUpdate-modal"
      ref="my-sub-modal"
      title="서브 댓글 수정 하기"
      @show="resetModal"
      @hidden="resetModal"
      @ok="handleOk"
    >
      <form ref="form" @submit.stop.prevent="handleSubSubmit">     
          <b-form-textarea
            ref="subContext"
            id="sub_context"
            v-model="context"          
            required
          ></b-form-textarea>
      </form>
    </b-modal> 

  </div>
</template>


<script>
import data from "@/data";


 export default {
    name:"CommentUpdateModal",

    props:{
       reloadComment:Function,     
       commentObject:Object, 
       commentIndex:Number  ,
       reloadSubComments:Function 
    },


    data() {
      return {
        context: this.commentObject.context,
        commentId:this.commentObject.comment_id,
        contextState: null,
        commentIdState:null,
      }

    },

  
     methods: {
      checkFormValidity() {
        const valid = this.$refs.form.checkValidity()
        this.contextState = valid
        return valid
      },
      resetModal() {
       
      },
      handleOk(bvModalEvt) {
        // Prevent modal from closing
        bvModalEvt.preventDefault()
        // Trigger submit handler
        this.handleSubmit()
      },

      handleSubmit() {
        // Exit when the form isn't valid
        if (!this.checkFormValidity()) {
          alert("댓글을 작성해 주세요.");          
          this.$refs.modalContext.focus;
          return
        }

        //데이타 업데이트                
        let commentId=this.commentId;
        data.Comment.filter(item=>item.comment_id===commentId)[0].context=this.context;
        this.reloadComment();


        //모달 닫
        this.$nextTick(() => {
          this.$bvModal.hide('commentUpdate-modal');
        });    
      },


      handleSubSubmit() {
        // Exit when the form isn't valid
        if (!this.checkFormValidity()) {
          alert("댓글을 작성해 주세요.");          
          this.$refs.modalContext.focus;
          return
        }


      },


    }
  }
</script>