SYDev

쿠다 4기 활동을 마무리하면서 진행한 마지막 프로젝트&컨퍼런스 summary 프로젝트 github 주소: https://github.com/cho-jang-hyun/Prediction_of_Location_based_RoadView 주도적으로 참여한 파트 네이버맵 api를 받아와서 학교 내부의 중복되지 않는 좌표(대략 900개)에서 각도를 달리하여 18장의 스크린샷을 캡쳐하는 매크로 코드 작성 (+ 아이디어 제공) 파일명: capture.js const puppeteer = require('puppeteer'); const fs = require('fs'); async function capturePanorama(lat, lng, pan) { // Puppeteer 브라우저 실행 const browser..

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