[포스코x코딩온] 웹 풀스택 과정 7기 4주차 금요일 회고
포스코 코딩온 웹 풀스택 과정 7기 4주차 금요일 회고
HTTP Method
HTTP Metho에는 다음과 같은 것들이 있다. | Method | request body | response body | safe | idempotent | cache | |:—:|:—:|:—:|:—:|:—:|:—:| | GET | X | O | O | O | O | | POST | O | O | X | X | O | | PUT | O | O | X | O | X | | PATCH | O | O | X | X | O | | DELETE | X | O | X | O | X | | HEAD | X | X | O | O | O | | OPTIONS | 선택 | O | O | O | X | | TRACE | X | O | O | O | X | | CONNECT | O | O | X | X | X |
- safe: 서버의 상태를 변경하지 않는다.
- idempotent: 여러 번 호출해도 결과가 같다.
- cache: 응답을 캐시할 수 있다.
GET
일반적으로 서버에서 클라이언트로 데이터를 가져올 때 사용한다.
요청에 데이터를 담을 수 없기 때문에 URL에 쿼리 형태로 데이터를 담아서 보낸다.
POST
보통 서버의 상태를 변경할 때 사용한다.
요청에 데이터를 담아서 보낼 수 있기 때문에 GET보다 보안적으로 안전하다.
파일 업로드
multer
파일 업로드에는 복잡한 과정이 필요하기에 multer 라는 미들 웨어를 이용했다.
// BackEnd
import path from 'path';
import multer from 'multer';
const upload = multer({
storage: multer.diskStorage({
destination(req, file, done) {
done(null, "uploads/");
},
filename(req, file, done) {
const fn = file.originalname;
const ext = path.extname(fn);
done(null, `${path.basename(fn, ext)}_${Date.now()}${ext}`);
},
}),
limits: {
fileSize: 1024 * 1024 * 5,
},
});
// FrontEnd
async function upload() {
const formData = new FormData();
const file = document.getElementById("dynamic").files[0];
formData.append("file", file);
const res = await fetch("/upload/dynamic", {
method: "POST",
body: formData,
});
window.open(await res.text());
}