SYDev

Server & Client 구조 Server 서버는 클라이언트에게 네트워크를 통해 정보나 서비스를 제공하는 컴퓨터 시스템 Node.js로 서버 개발을 한다면, 기본적으로 routing(어떤 네트워크 안에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정)을 하게 된다. 이전 게시물에서 구현한 모든 파일을 server에 넣고 client와 분리하여 Server&Client 구조를 형성할 것이다. React 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용됨 facebook에서 제공하는 프론트엔드 라이브러리 component 구조 React는 UI(view)를 여러 component로 쪼개서 구현 한 페이지 내에서도 각각의 부분을 독립된 component로 만들고..

Fetch 형식으로 comment delete 파일명: commentController.js const commentModel = require('../models/commentModel.js'); module.exports = { createComment: async (req, res) => { const topicId = req.params.topic_id; const newCommentData = req.body; const newComment = await commentModel.createComment(topicId, newCommentData); //res.redirect(`/topic/read/${topicId}`); res.json({ commentId: newComment.insertId..

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..