서버 측 파일에 텍스트로 데이터 저장하기

json파일은 컴퓨터가 읽고 쓰기 매우 편한 파일이라고 한다. 그래서 특별한 분석이 없이도 사용자 이름 목록과 같은 복잡한 데이터를 쉽게 저장할 수 있다.

data 폴더에 users.json파일을 생성하고 빈 배열만 놔둔 뒤 저장했다.

전체 코드

const fs = require('fs');
const path = require('path');

const express = require("express");

const app = express();

app.use(express.urlencoded({extended: false}));

app.get('/currenttime', function(req, res){
  res.send("<h1>" + new Date().toISOString() + "</h1>");
});

app.get('/', function(req, res){
  res.send('<form action="/store-data" method="POST"><label>Your Name</label><input type="text" name="username"><button>submit</button></form>');
});

app.post('/store-data', function(req, res){
  const userName = req.body.username;

  const filePath = path.join(__dirname, 'data', 'users.json');

  const fileData = fs.readFileSync(filePath);
  const names = JSON.parse(fileData);

  names.push(userName);

  fs.writeFileSync(filePath, JSON.stringify(names));

  res.send('<h1>Username saved</h1>');
});

app.listen(3000);

---

const fs = require('fs');

큰 틀을 보자면 파일에 있는 배열을 읽어옴 -> 사용자가 폼에 입력한 데이터를 가져옴 -> 데이터를 그 배열에 집어넣고 파일에 덮어써서 업데이트
이다.

users.json 파일을 열고 해당 배열에 데이터를 추가하려면 fs(file system)라는 패키지를 사용한다.
(패키지를 추가할 때는 순서는 큰 상관없으나 third party패키지보다 위에 노드 js 내장 패키지를 불러오는게 낫다.)

1. 파일 경로 설정

const path = require('path');
.
.
.
fs.writeFileSync(filePath, JSON.stringify(names));

fs패키지의 writeFileSync라는 메서드를 사용하면 파일에 내용을 쓸 수 있다. 이것의 매개변수로는 파일의 경로와 업데이트 할 파일을 줘야 하는데, 모든 운영체제에서 작동하는 경로를 손쉽게 뽑아내려면 path패키지를 사용하면 된다.

const filePath = path.join(__dirname, 'data', 'users.json');

Path의 join메서드는 파일의 경로를 설명하는 여러 부분을 결합해준다. 이때 경로는 절대경로여야 한다. 그러므로 처음에는 ‘__dirname’이라는 자바스크립트 변수를 사용한다. 이는 프로젝트 경로에 대한 절대 경로를 보유하는 내장 변수이다. 현재 data폴더에 user.json파일이 있기 때문에 이 둘을 나머지 파라미터로 전달한다.

이제 파일에서 해당 데이터를 추출하려면 먼저 그 파일을 읽은 뒤에 데이터를 저장하고 업데이트 한 뒤, 이 업데이트된 기존 데이터를 파일에 덮어써야 한다.

2. 파일 읽어오기

const fileData = fs.readFileSync(filePath);

파일을 읽으려면 fs패키지의 readFileSync메서드를 사용한다.

파라미터로는 파일 경로를 준다. 이렇게 읽은 것은 자바스크립트 객체가 아니라 원시 텍스트 데이터이다. users.json에 있는 배열이 텍스트로 읽히는 것이다. 그러므로 텍스트로 읽힌 배열을 js객체로 변환해야 데이터를 집어넣을 수 있다.

3. 파일에 데이터 집어넣기

const names = JSON.parse(fileData);

자바스크립트 객체로 변환하려면 node js의 JSON 객체를 사용한다. 이 객체에는 parse와 stringify 메서드가 있는데, 여기선 parse를 사용한다. parse는 json파일 포맷에 담긴 텍스트를 raw 자바스크립트 객체나 배열로 변환해준다(그냥 js객체랑 raw 객체랑 뭐가 다른건지는 모르겠다).

names.push(userName);

이제 이렇게 변환한 배열에 push메서드로 입력된 데이터인 userName상수를 넣어준다. 이렇게 변환한 배열을 writeFileSync메서드에 파라미터로 전달하면 되는데… 이 또한 원시 텍스트를 받기 때문에 자바스크립트 객체를 원시 텍스트로 변환해야 한다. 이때 JSON객체의 stringify메서드를 사용한다.

fs.writeFileSync(filePath, JSON.stringify(names));

이제 서버를 열고 폼에 아무거나 입력한 뒤 users.json파일의 배열을 보면

어이가 없게도 입력한 데이터가 저장되어 있다 ㄷㄷ