[FE/JS] JavaScript로 Json 생성하기

    728x90
    반응형

    2021.04.11

    18일차

     

    입사 35일차.

    내가 주말마다 시간을 쏟는 Football Manager시리즈는 작년에 매치엔진 문제로 크고 작은 이슈들이 있었다.FM개발자들은 선수들의 방향전환속도, 태클속도, 태클범위 등의 매치엔진을 구성하는 요소들을 .json파일로 생성했었고, json파일의 key와 value를 그대로 노출시켰기 때문이었다.

     

    지금은 2021시리즈로 넘어오면서 json파일을 암호화해서 접근을 막아버렸지만,어제 공부한 fs.writeFile()로 FM의 매치엔진파일인 physical_constraints.json만들어보려고 한다.

     

     

     

    1. writeFile()을 이용한 json생성

      ① JSON.stringify()는 Json으로 변환해준다.

    // fs모듈을 사용하기 위한 선언
    const fs = require('fs');

    // json파일을 List로 생성

    let version_array = [
        {
            speed_scaler : "10000",
            very_slow_walk_speed : "4470",
            slow_walk_speed : "8940",
            walk_speed : "13410",
            fast_walk_speed : "17880",

        },
        {
            speed_scaler : "5000",
            very_slow_walk_speed : "1234",
            slow_walk_speed : "6666",
            walk_speed : "7777",
            fast_walk_speed : "23000",

        },
    ];

    // 비동기처리방식 + json형식으로 저장
    fs.writeFile( 'physical_constraints.json', Json.stringify(version_array), function(err) {
        console.log( 'FM 매치엔진 json파일 생성완료' );
    };

     

      ④ 생성된 json파일을 확인할 수 있다.

     

     

    2. readFile()을 이용한 json읽어오기

      ① JSON.parse()를 사용하면 json파일을 원하는 타입으로 변환해준다.

      ② ES6의 arrow function에서는 if (err) throw err;로 에러처리를 한다.

      ③ 매치엔진을 구성하는 key와 value를 List형식으로 만들어준다.

    // fs모듈을 사용하기 위한 선언
    const fs = require('fs');

    // 비동기처리방식 (ES6 방식)
    fs.readFile( 'physical_constraints.json', ( data, err ) => {
        // ES6방식에서의 에러처리
        if (err) throw err;

        // JSON.parse()로 json을 타입변환
        const readFMjson = JSON.parse( data.toString() );
        console.log( readFMjson );

    };
    [console]
    if (err) throw err;
             ^
    [{"speed_scaler":"10000","very_slow_walk_speed":"4470","slow_walk_speed":"8940","walk_speed":"13410","fast_walk_speed":"17880"},{"speed_scaler":"5000","very_slow_walk_speed":"1234","slow_walk_speed":"6666","walk_speed":"7777","fast_walk_speed":"23000"}]

     

    지금까지 공부해온 React나 FE, JS ES6 등 프론트엔드 관련 내용 중, 나중에 정말 많이 쓸 것이라고 생각한다.

    DB없이도 간단한 내용들을 저장하고 읽어올 수 있기때문에 추후 만들 React TodoList는 DB를 사용하지 않고 json으로 생성해보는 것도 좋을 것 같다.

     

    그게 아니면, Header, Footer의 style 속성과 값들을 json으로 저장해서 관리하는 것도 쉽고 좋을 것 같다.

    728x90
    반응형

    댓글