API로 받아온 JSON 형식의 데이터로 interface를 작성할 때가 있다. 해당 key의 자료형이 뭔지 일일이 적어주곤 했는데, 구조가 조금 복잡해지고 depth가 깊어지면 key 하나하나 복사 붙여넣기 하면서 자료형 작성하기가 번거로워진다. 이를 해결해보겠다.
1. api로 받아온 데이터를 console.log로 출력
2. 전역변수로 object에 저장
interface로 작성하려는 데이터에 우클릭을 한 뒤 전역변수로 objet에 저장을 선택하면
temp1이라는 변수에 담기게 된다.
3. Object.keys(temp1).join();
temp1의 key 값을 하나의 문자열로 만들어주고, 복사한다.
4. ctrl + d
복사한 문자열을 편집기에 붙여넣는다.
,를 선택하고 ctrl + d로 모든 쉼표를 하나씩 선택한 뒤, 백스페이스로 지워주고 enter로 줄바꿈을 해준다.
5. Object.values(temp1).map(value => typeof value).join()
map으로 value의 타입만 담은 새로운 배열을 만들고 문자열로 바꿔준 뒤 key와 똑같은 작업(4번 참조)를 거쳐준다.
위 작업을 마친 문자열을 복사해둔다.
6. alt + shift + i
key 값을 전체 드래그 한 뒤 alt + shift + i로 각 라인의 마지막 위치에 커서를 만들어주고 :를 붙이고 ctrl + v로 5번에서 복사해둔 문자열을 붙여넣어준 뒤 ;로 마무리한다.
단점
tags와 team은 object가 아니라 여러 개의 object로 이루어진 array인데 array의 자료형은 객체이기 때문에 생기는 문제이다.
이를 해결하기 위해선 tags에 대해 위의 과정을 반복해주거나 직접 작성해야 한다.
해결책
JSON 객체의 자료형을 입력하면 interface로 자동변환 해주는 사이트가 있다.
아래의 두 사이트를 이용하면 위의 과정을 안 해도 된다.
프런트엔드 개발자