SYDev

Fetch 형태로 받은 comment를 바로 화면에 Display comment.js 파일의 displayComment 함수를 구현 파일명: comment.js const onCreateComment = async (topic_id) => { const username = document.getElementById('comment-username').value; const content = document.getElementById('comment-content').value; const url = `/comment/create/${topic_id}`; const res = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'applicatio..

Ajax 방식으로 Create Comment Ajax(Asyncronous JavaScript ans XML): 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나로, 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다. 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시 파일명: topic.ejs Delete Update Delete Submit >> submit 버튼을 누를 시에 static 파일이 모여있는 디렉토리인 public 하위 경로에 있는 comment.js 파일에 정의된 onCreateComment 함수가 실행됨 >> main.js에 app.set("layout extractScripts", true); 을 추가하고 ind..

Post 방식으로 Delete Comment 파일명: commentRouter.js const express = require('express'); const router = express.Router(); const commentController = require('../controllers/commentController.js'); router.post('/create/:topic_id', commentController.createComment); router.post('/delete/:comment_id', commentController.deleteComment); //댓글 삭제 module.exports = router; 파일명: commentController.js const comment..

Comment를 입력받고 웹페이지에 출력 파일명: main.js const express = require('express'); const app = express(); const port = 3000; const bodyParser = require('body-parser'); app.use(bodyParser.urlencoded({ extended: false })) app.use(bodyParser.json()) app.set('view engine', 'ejs'); app.set('views', 'views'); const expressLayouts = require('express-ejs-layouts'); app.use(expressLayouts); app.set('layout', 'index..

라우터를 이용해 app. 명령어 간소화 파일명: main.js const express = require('express'); const app = express(); const port = 3000; const bodyParser = require('body-parser'); app.use(bodyParser.urlencoded({ extended: false })) app.use(bodyParser.json()) app.set('view engine', 'ejs'); app.set('views', 'views'); const expressLayouts = require('express-ejs-layouts'); app.use(expressLayouts); app.set('layout', 'index...

Update Topic GET&POST 파일명: topic.ejs Delete Update >>각 topic에 Update 버튼 추 파일명: main.js const express = require('express'); const app = express(); const port = 3000; const bodyParser = require('body-parser'); app.use(bodyParser.urlencoded({ extended: false })) app.use(bodyParser.json()) //app.set - 환경변수 설정 //app.use - 모든 리퀘스트에 대해서 괄호 안의 내용을 적용 //app.get - 경로에 대한 get 방식의 요청에 대한 뒤 함수 처리를 해줌 app.set..

Post 방식으로 Delete Topic 파일명: topic.ejs Delete >>각 topic에 post 방식의 delete 버튼 추가 파일명: main.js const express = require('express'); const app = express(); const port = 3000; const bodyParser = require('body-parser'); app.use(bodyParser.urlencoded({ extended: false })) app.use(bodyParser.json()) //app.set - 환경변수 설정 //app.use - 모든 리퀘스트에 대해서 괄호 안의 내용을 적용 //app.get - 경로에 대한 get 방식의 요청에 대한 뒤 함수 처리를 해줌 app..

Create 정보를 입력완료 -> POST 데이터 처리 파일명: main.js const express = require('express'); const app = express(); const port = 3000; const bodyParser = require('body-parser'); //body-parser 모듈 호출 //body-parser를 사용하여 'application/x-www-form-urlencoded' 형식의 POST 요청의 본문을 해석하도록 설정 //extended: false는 중첩된 객체를 지원하지 않고 단순한 객체만 해석 app.use(bodyParser.urlencoded({ extended: false })) //body-parser를 사용하여 'application/..