[Typescript] JSON 파일 수정 불가 해결방법 - fs.writeFileSync

JSON 파일 내의 값이 변동이 안 됩니다. 어떻게 해결해야하죠?

Typescript로 자판기를 구현하는 과제가 주어졌고, 상태관리라는 문제에 마주쳤다. React를 사용했더라면 React-Hooks의 useState를 이용하여 컴포넌트의 상태 관리를 하면 된다고 떠올렸지만 이 과제는 only Typescript로 구현해야하기 때문에 다른 방법을 생각해야했다. 

 

전반적으로 관리해야할 것들은 가격, 재료 등의 존재 여부를 알고 있어야하기 때문에 

machine.json이라는 "데이터베이스" 역할을 하는 객체를 하나 만들었다. 

machine.json 파일 내에 각 key 값은 재료, value 값은 재료의 남은 양을 뜻한다. 

// machine.json
{
    "resource": {
        "cup": 17,
        "water": 9424,
        "coffeePowder": 980,
        "milkPowder": 980,
        "sugar": 475,
        "lemonSyrup": 480,
        "citronSyrup": 500
    },
    "leftChange": 10000
}

객체를 만들어 수정된 값은 다시 machine.json에 써줘야 로직이 맞기에 수정된 값을 대입하였지만, machine.json 데이터가 변경되지 않았다. machine.json 파일에 있는 값들이 변동이 되지 않는 이유는,

현재 코드에서 파일을 읽어오고 값을 수정한 뒤, 수정된 값을 파일에 다시 쓰지 않기 때문이다.

 

따라서 값을 수정한 후, 이를 파일에 다시 써주어야 한다. 

예를 들어, machine.json 파일에서 leftChange 값을 수정하고자 할 때는 다음과 같이 writeFileSync를 활용할 수 있다. 

import machine from "./machine.json"

...
// (기존에는 machine이 import 되어있기 때문에 대입된다고 생각함)
machine.leftChange = machine.leftChange - change;

// 값이 변경된 후, 파일에 다시 쓰기 ! 까지 필요하다.
fs.writeFileSync("./machine.json", JSON.stringify(machine))

결론:

JSON 파일 내의 값이 변동이 안 됩니다. 어떻게 해결해야하죠?

값이 변경된 후, 파일에 다시 써야합니다. => fs.writeFileSync(file, data)

file: 저장할 파일의 경로/data: 파일에 기록될 데이터 양식

 

Reference

fs.writeFile, fs.writeFileSync 사용법과 간단예시 자세히 : https://webruden.tistory.com/937