[Node.js/JS] 게시판 만들기

구현 기능들

• 글쓰기
• 게시글 검색
• 게시글 수정, 게시글 삭제
• 댓글 쓰기, 댓글 삭제
• 페이지네이션

 

 

 

 

템플릿 엔진 handlbars 설정

템플릿 엔진 : 템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 결합하여 원하는 결과 문서를 브라우저로 출력하는 소프트웨어

 

app.engine("hbs", handlebars.create({
    helpers: require("./configs/helpers"),
    extname: "hbs",
}).engine);
app.set("view engine", "hbs");
app.set("views", "./views");

 

헬퍼함수 : 템플릿에서 제공하는 함수가 있고 사용자지정 함수도 있다.

helpers: require("헬퍼함수 경로")

module.exports = {
    newDate : (curDate) =>{
        return new Date(curDate).toLocaleDateString();
    },
    eq: (item1, item2) =>{
        return item1 === item2;
    },
    lengthOfList : (list = []) =>{
        return list.length;
    }
}

 

• newDate : 날짜를 매개변수로 받아 "yyyy-mm-dd" 형식으로 변환해준다.
• eq : 페이지네이션시 현재 페이지와 렌더링된 배열의 해당 숫자가 같으면 <a> 태그에 주솟값을 주지않는다.
• lenghtOfList : 댓글을 적으면 배열로 저장시키는데 전제 댓글 수를 알려준다. 

 

fetch

fetch : JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드

 

fetch(url, 요청옵션) : 파라미터로 요청을 보낼 url을 입력해 주고 응답을 받아서 추가적인 작업 또한 해줄 수 있다.

 

const postOption = {
    method: "post",
    headers: {
        "Content-Type" : "application/json",
    },
}

 

 

 

• method : post 형식으로 보낸다.
• Content-Type : "application/json" : Message Body 에 들어갈 타입을 HTTP Header에서 정해주는데 데이터의 형식을 json형태로 보내준다는 의미이다.

 

const result = await fetch("/ck-password", {
    ...postOption,
    body: JSON.stringify({id : "{{post._id}}", password, pwd:"{{post.textPwd}}"})
   });
   const data = await result.json();
   .
   .
   .
   }

 

 

비밀번호가 맞는지 확인해주는 fetch 코드이다 해당 주소로 가서 결과를 반환해준다.

body : JSON.stringify (): 입력된 body의 값을 넘겨준다.

 

 

app.use(express.json());
app.use(express.urlencoded({extended:true}));

 

 

app.use(express.json()) : express 애플리캐이션에서 요청(request) body를 파싱하기위한 미들웨어

app.use(express.urlencoded({extended: true})) : HTTP의 요청이 POST일 경우 body에 인코딩된 데이터를 해석하고 req.body 객체에 데이터를 넣어준다.