CSV 파일을 JSON 파일로 만들기

다국어 파일을 만들 때 유용하다. 구글 시트를 사용하기에도 좋다.

4 min readMay 10, 2020

자바스크립트를 사용할 때 다국어 지원을 위해서 언어 별로 JSON 파일을 사용하는 경우가 있다.

const en = {
  popup: {
    title: 'Login'
  }
}
const ko = {
  popup: {
    title: '로그인'
  }
}

이런 파일을 직접 수정하는 일은 네 가지 이유로 불편하다.

전달받은 문서에서 변경된 부분만 복사하여 코드에 넣는 것이 불편하다.
잘못된 코드가 적용될까 봐 확인하는 과정이 필요하다.
새로운 텍스트를 추가할 때 언어별 파일을 각각 열어서 추가하는 것이 불편하다.
여러 프로젝트에서 사용하는 언어별 파일을 교차 확인하기가 불편하다.

CSV 파일을 사용하고 스크립트로 다국어 JSON 파일로 변환하는 방법을 사용하여 이문제를 해결할 수 있다. 다국어 JSON은 마지막 항목이 문자열이라는 특징을 가진다. 속성 경로도 문자열로 표현 가능함으로 위의 코드는 이렇게 표현할 수 있다.

'popup, title, Login'
'popup, title, 로그인'

언어별 문자열을 변경하고 싶을 경우 이런 CSV 파일을 수정하고 개발자는 이 파일을 JSON으로 만들어 커밋하면 편하다. 아래 모듈 을 사용하여 JSON으로 만들 수 있다.

https://github.com/afrontend/csv-property

const {
    toObject
} = require('csv-property')toObject([
  'popup, title, Login',
  'popup, message, Input name?'
])/* 
{ popup: 
  { 
    title: 'Login',
    message: 'Input name?'
  }
}
*/

만약에 기존 JSON 파일이 있다면 아래 명령을 사용하여 거꾸로 JSON 파일을 CSV 파일로 변경할 수도 있다.

const {
  toCSVString
} = require('csv-property')toCSVString({
  popup: {
    title: 'Login',
    message: 'Input name?',
  },
})/* 
[
  'popup, title, Login',
  'popup, message, Input name?'
]
*/

이렇게 생성된 CSV 파일을 다른 문서에 붙여 넣어서 사용해도 된다. 예를 들어 CSV 문서를 구글 시트에 저장하고 터미널에서 Node.js를 사용하여 CSV 형식으로 읽을 수 있다. 그다음 간단한 스크립트 몇 줄 사용하여 JSON으로 변환한 다음 커밋하면 된다. 콤마 대신 다른 구분 문자를 사용하고 싶다면 toObject, toCSVString 함수의 두 번째 인자로 ‘;’와 같은 구분자를 전달하면 된다. 위의 csv-property 모듈을 사용하여 여러 언어를 하나의 파일로 관리할 수 있는 예제를 준비했다.

https://github.com/afrontend/ary2json

const {
  textPathsAryToObj,
  toJSONString
} = require('ary2json')const obj = textPathsAryToObj([
  ['로그인', 'login', 'path1', 'path2', 'path3']
], {
  numberOfLanguageColumn: 2
})
console.log(toJSONString(obj)) /* 
[ 
  { path1: 
    { path2: 
      { path3: '로그인' }
    }
  }, 
  { path1:
    { path2:
      { path3: 'login' }
    }
  }
]
*/

처음 객체가 한글용이고 다음 객체가 영문용이다. textPathsAryToObj 함수의 두 번째 인자 numberOfLanguageColumn이 2인 것은 입력 배열의 처음 두 칼럼이 서로 다른 언어라는 뜻이다. 언어를 4개 사용하려 한다면 CSV 칼럼을 4로 만들고 numberOfLanguageColumn 값에 4를 지정하면 된다. JSON.stringify 함수가 있음에도 toJSONString를 사용한 이유는 터미널로 출력했을 경우 JSON의 항목 경로가 길어지면 [object Object] 이렇게 표현되는 것을 막기 위해서다. 아래 링크에서 간단하게 확인할 수 있다.

https://afrontend.github.io/localtext/

Originally published at http://agvim.wordpress.com on May 10, 2020.

CSV 파일을 JSON 파일로 만들기

다국어 파일을 만들 때 유용하다. 구글 시트를 사용하기에도 좋다.

Written by Bob Hwang