게시판 만들기 시작

게임 웹페이지 개발 중에 게시판 만들기 기능을 담당하게 되어서 앞으로 몇일간 차례차례 게시판 기능을 만들어보려고한다.

내가 구현할 게시판은 총 세개이다!

1. 자유게시판 2. 공략게시판 3.아이디어게시판

근데 세개의 게시판이 주제만 다르지 거의 같은 기능을 수행하기때문에 하나만 제대로 완성하면 나머진 복붙해서 금방 완성하면 될 것 같다.

목표

https://www.redmoononline.co.kr/bbs/board.php?bo_table=plan&top=3&sub=2

이 게임사이트의 게시판 기능을 똑같이 구현해보는것이 목표이다!

개발환경

• Frontend Server : React
  - react-bootstrap
  • react-router-dom
  • axios
  • jquery
  • jquery cookie

• Backend Server : Node.js
  - express
  • express-session
  • cors

• Database : mongoDB
  - mongoose

테이블 구성

Boards

• id(PK) : 게시글번호
• writer(FK) : 작성자
• title : 제목
• content : 내용
• createdAt : 만들어진 날

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const boardSchema = mongoose.Schema({
   wrieter : { 
       type : Schema.Types.ObjectId,
       required : true,
       ref: 'User'
   },
   id: {
       type : String,
       required : true
   },
   title: {
       type : String,
       required : true
   },
   content : {
       type : String,
       required : true
   },
   createdAt:{ // 글을 생성한 날짜 
       type : Date,
       default : Date.now
   }
},{timestamps:true})



const Board = mongoose.model('Board', boardSchema);

module.exports = { Board }

사용할 기술

React-bootstrap

https://react-bootstrap.github.io/

: 웹사이트를 쉽게 만들 수 있도록 도와주는 HTML,CSS,JS 프레임워크
-> 상대적으로 디자인이 고급진 UI 이용

React-router-dom

:클라이언트 사이드에서 이뤄지는 라우팅을 간단하게 해주는 라이브러리 (공식은 아니다.)

axios

: node.js 와 브라우저를 위한 http통신 javascript 라이브러리

jquery

: HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리 -> 소스코드 간결화에 도움을 준다.

ckeditor4-react

https://www.npmjs.com/package/ckeditor4-react

: 콘텐츠를 웹페이지나 온라인 애플리케이션에 직접 작성할 수 있게 하는 위지위그 리치 텍스트 에디터

express

: nodeJS의 사실상의 표준 서버 프레임워크.

mongoose

: 문서를 DB에서 조회할때 자바스크립트 객체로 바꿔주는 역할