form데이터를 파일에 저장 / 리다이렉트

form 데이터를 파일에 저장하기

출처 - 【한글자막】 100일 코딩 챌린지 - 2022 Web Development 부트캠프

이러한 웹페이지의 form에서 데이터를 받았을 때 이를 저장하려면 어떻게 해야 할까?
-> POST라우트를 추가하여 POST요청을 받으면 된다(form에서 받은 데이터는 data폴더에 있는 restaurants.json파일에 저장한다고 친다.)

const express = require('express');
const path = require('path');
const fs = require('fs');
const app = express();
app.use(express.urlencoded({extended: false}));


app.post('/recommend', function(req, res){
    const restaurant = req.body;
    const filePath = path.join(__dirname, 'data', 'restaurants.json');
    const fileData = fs.readFileSync(filePath);
    const storedData = JSON.parse(fileData);

    storedData.push(restaurant);

    fs.writeFileSync(filePath, JSON.stringify(storedData));
})

페이지의 url을 보면 경로부분이 '/recommend'라고 되어있으므로 이 경로의 POST요청을 받아야 한다. 그러므로 post메서드의 첫 번째 파라미터로 ‘/recommend’를 준다. 다음으로 path와 fs패키지를 사용하여 파일의 경로를 파악하여 파일을 읽고, JSON 내장 객체의 parse메서드로 원시 텍스트를 자바스크립트 객체로 변환한 뒤 이를 storedData상수로 저장한다. 그 후 fs의 writeFileSync를 사용하여 덮어써주면 끝.

+app.use(express.urlencoded({extended: false}));로 form의 데이터를 파싱하는 작업도 필요하다.

리다이렉트

+추가사항: 리다이렉트 추가하기

만약 form에 데이터를 저장한 뒤 페이지를 새로고침하거나 다른 url로 이동하려고 하면 이미 POST요청이 보내졌기 때문에 form데이터를 다시 제출하라는 경고창이 뜬다. 페이지가 깨끗하지 않기도 하고, 만약 사용자가 또 form데이터를 제출해버리면 중복되는 데이터가 생성되므로 이때는 리다이렉트 명령을 추가해줘야 한다.

 res.redirect('/confirm');

이때는 응답 객체 res에 redirect메서드를 사용하면 된다. 파라미터로는 리다이렉트할 경로를 넣어준다.

또한 form 태그의 method와 action의 속성값도 바꿔줘야 한다.

<form action="/recommend" method="post">

action엔 form data를 서버로 보낼 때 해당 데이터가 도착할 URL인 /recommend를, method는 post로 지정한다.

이제 form에다 데이터를 넣고 보내면

성공적으로 데이터를 저장할 수 있다.

또한 ‘/confirm’경로로 리다이렉트된 것을 볼 수 있다.