type 생성하기
API 데이터를 패치하다보면 중첩된 많은 양의 json 데이터들의 일일히 type을 지정하는 것은 매우 번거로운 일이다. 찾아보니 "quicktype"이라는 좋은 타입 제너레이터 앱이 있었다. vscode 확장(Paste JSON as Code)도 지원한다.
quicktype
json 데이터를 왼쪽에 붙이면 에디터 우측에서 자동으로 type을 생성해 준다. 속성명을 좀 더 자바스크립트스럽게(?) 카멜케이스로 바꿔지기도 하고 일괄 옵셔널?하게 변경하는 등 여러 옵션을 제공한다.
Paste JSON as Code
quicktype에서 제공하는 vscode 확장(Paste JSON as Code)이다. 임시로 만든 json 파일에서 cmd+shift+P에서 Open quicktype for JSON 명령을 선택하면 우측처럼 생성할 수 있다. (웹과 동일)
Object.keys & values
노마드코더에서 배워서 이전에 사용했던 방법으로 quicktype을 알기 전까지 유용하게 썼다. 크롬 콘솔을 이용해서 약간의 수작업이 필요한 방법이다.
우선 console.log로 찍은 json 데이터를 Store object as global variable 오브젝트를 글로벌 변수로 만들어 둔다. (temp)
// 속성명(key)만 한꺼번에 가져온다.
Object.keys(temp).join()// 값(value)을 타입으로 변환하여 한꺼번에 가져온다.
Object.values(temp).map(v => typeof v).join()물론 이렇게 변경해도 에디터에 잘 붙여넣고 'object' 타입으로 나온 것은 일일히 변경해주어야 하는 번거로움이 있다.
사실 따로 메모해 두는 이유는 위 콘솔에서 Store object as global variable라는 좋은 기능을 알아서이다. 디버깅할 때 도움이 될 것 같다.
출처
XD