wintertreey 님의 블로그
멤버 CRUD_ cors, json 파싱, 포트번호 설정. 라우팅 본문
c:\work2\node_ex>mkdir nodeserver1
>cd nodeserver1
>npm init
>npm i express
>npm i --save-dev nodemon
>npm i cors
다음은 폴더를 생성하고, 프로젝트를 생성시 설치한 모듈이다.
- express: Node.js에서 서버를 쉽게 구축할 수 있도록 도와주는 웹 프레임워크입니다. 간단한 라우팅, 미들웨어, 요청 처리 등을 지원합니다.
- nodemon: 개발 중에 파일 변경 시 자동으로 서버를 재시작해주는 도구입니다. 코드 변경 사항을 즉시 반영할 수 있어 개발이 용이합니다.
- cors: Cross-Origin Resource Sharing의 약자로, 서로 다른 출처(도메인) 간의 자원 공유를 허용하도록 서버를 설정하는 미들웨어입니다. 웹 애플리케이션이 다른 도메인에서 자원을 요청할 수 있도록 합니다.
start 스크립트를 정의하는 부분
- 자동 재시작: nodemon은 파일 시스템을 모니터링하여 파일에 변경이 생길 때마다 서버를 자동으로 재시작합니다. 개발 중에는 코드가 자주 변경되기 때문에 서버를 수동으로 재시작할 필요 없이, nodemon이 자동으로 이를 처리해 줍니다.
- 편리한 실행: npm start 명령어를 실행하면 nodemon app.mjs가 실행됩니다. 이렇게 하면 복잡한 명령어를 직접 입력할 필요 없이 간편하게 서버를 시작할 수 있습니다.
결과적으로, 이 설정은 개발 효율성을 높이고 서버 관리를 쉽게 해줍니다.
cors, json 파싱, 포트번호 설정
import express from 'express';
import path from 'path';
import { fileURLToPath } from 'url';
import cors from 'cors';
const app = express();
app.use(cors()) // cors 미들웨어 등록: cors해킹에서 벗어날 수 있다. for service.
app.use(express.json()); // express.join 미들웨어: json 파싱용
// 예: 클라이언트가 json 데이터를 요청(post)으로 보낼때
//{"name":"tom", "age":30} 를 자동으로 파싱해 req.body 객체를 만듦.
// req.body.name 또는 req.body.age로 접근이 가능해짐.
app.set('port', process.env.PORT || 3000); //포트 설정
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
//정적 파일 제공 폴더 정의
app.use(express.static(path.join(__dirname, 'public')));
app.listen(app.get('port'), () => {
console.log(app.get('port'), '번 포트로 서버서비스 중..');
});
라우팅작업
import gogekRouter from './routes/gogek.mjs';
import jikwonRouter from './routes/jikwon.mjs';
//라우팅작업. 따로 만들어서 호출.
app.use('/', jikwonRouter);
app.use('/gogek', gogekRouter);
라우팅 잘된 것 확인.
본격적으로 파일을 이동하며 정보를 받아보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>텔레토비 동산🌈 구성원</h1>
<ul id="emp-list"></ul>
<div>
get : <button id="get-emps">멤버리스트 요청 get</button>
</div>
<div>
post : <input type="text" id="emp-name" placeholder="멤버이름 입력" required>
<button id="add-emp">친구 추가</button>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const empList = document.getElementById("emp-list");
const empNameInput = document.getElementById("emp-name");
const getEmpbutton = document.getElementById("get-emps");
const addEmpbutton = document.getElementById("add-emp");
//get 요청으로 직원 정보 읽기
getEmpbutton.addEventListener('click', () => {
fetch('/employees')
.then(response => response.json())
.then(data => {
empList.innerHTML = ''; //출력장소 초기화
data.forEach(emp => {
const li = document.createElement("li"); //li태그에 담고
li.textContent = emp.name; //이름만
empList.appendChild(li); //id emplist에 li태그를 넣어줌
});
})
.catch(error => console.error('에러발생: ', error));
});
//get 요청으로 직원 정보 읽기
addEmpbutton.addEventListener('click', () => {
const newEmp = {id:Date.now(), name:empNameInput.value};
fetch('/employees', {
method:'POST',
headers:{
'Content-Type':'application/json'
},
body:JSON.stringify(newEmp) //전송시 js객체를 json문자열로 변환 후 전송
})
.then(response => response.json())
.then(emp => {
const li = document.createElement("li"); //li태그에 담고
li.textContent = emp.name; //이름만
empList.appendChild(li); //id emplist에 li태그를 넣어줌
empNameInput.value = '';// 입력필드 초기화
})
.catch(error => console.error('추가에러: ', error));
});
// let stu = {name:'tom', age:22}가정 ->stringify(stu)-> {'name':'tom','age':22}
//즉 json모양을 하지만 string으로 변환. 타입 object -> String으로 변환됨.
});
</script>
</body>
</html>
abc.html에 넘겨줄 json 정보 만들기.
import { Router } from "express";
import path from 'path';
import { fileURLToPath } from 'url';
const router = Router();
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
router.get('/', (req, res) => {
//res.send('HELLO, jikwon');
res.sendFile(path.join(__dirname, '../public/abc.html'));
});
const employees = [
{id:1, name:'보라돌이'},
{id:2, name:'뚜비'},
{id:3, name:'나나'},
{id:4, name:'뽀'}
];
router.get('/employees', (req, res) => {
res.json(employees);
});
router.post('/employees', (req, res) => {
const newEmployee = req.body;
if(!newEmployee || !newEmployee.name){
return res.status(400).json({error:'잘못된 데이터!'});
}
employees.push(newEmployee);
res.status(201).json(newEmployee); // 201:created 요청은 성공적. POST요청 후 새로운 리소스가 생성되었을때 사용.
});
export default router;
status
보통 자주 마주하는건, 경로설정 문제 404. 에러발생시 500.
404(Not Found, 찾을 수 없음): 서버가 요청한 페이지(Resource)를 찾을 수 없다. 예를 들어 서버에 존재하지 않는 페이지에 대한 요청이 있을 경우 서버는 이 코드를 제공한다.
500(내부 서버 오류): 서버에 오류가 발생하여 요청을 수행할 수 없다.
200(성공): 서버가 요청을 제대로 처리했다는 뜻이다. 이는 주로 서버가 요청한 페이지를 제공했다는 의미로 쓰인다. 201(작성됨): 성공적으로 요청되었으며 서버가 새 리소스를 작성했다.
202(허용됨): 서버가 요청을 접수했지만 아직 처리하지 않았다.
400(잘못된 요청): 서버가 요청의 구문을 인식하지 못했다.
https://ko.wikipedia.org/wiki/HTTP_%EC%83%81%ED%83%9C_%EC%BD%94%EB%93%9C
HTTP 상태 코드 - 위키백과, 우리 모두의 백과사전
위키백과, 우리 모두의 백과사전. 아래는 HTTP(하이퍼텍스트 전송 프로토콜) 응답 상태 코드의 목록이다. IANA가 현재 공식 HTTP 상태 코드 레지스트리를 관리하고 있다. 모든 HTTP 응답 코드는 5개의
ko.wikipedia.org
'Node' 카테고리의 다른 글
| nodeserver DB연동 CRUD_ postman (0) | 2024.08.16 |
|---|---|
| 로그인세션_body-parser, ejs파일 (0) | 2024.08.13 |
| 회원 CRUD, splice() (0) | 2024.08.13 |
| 경로세팅, 라우팅, cors에러 (0) | 2024.08.11 |
| 웹서버 모듈: http, figlet, express, nodemon (1) | 2024.08.11 |
'Node' Related Articles
more
