JSON 트리 뷰어

접기/펼치기 및 검색이 가능한 트리 형태로 JSON을 탐색하고 유형별 색상으로 구분하며, 키를 클릭하여 점 표기법 경로를 복사하세요.

JSON 입력

이용 방법

이 도구는 JSON을 파싱하여 문자열, 숫자, 불리언, null 등 유형별로 색상이 지정된 접기/펼치기 가능한 트리로 렌더링합니다. 일치하는 키와 값만 표시하는 검색 상자를 제공하며, 각 키에 있는 클릭 복사 버튼으로 address.city 또는 tags[0]과 같은 전체 점 표기법 경로를 복사할 수 있습니다.

JSON 붙여넣기
유효한 모든 JSON 객체, 배열 또는 값을 사용할 수 있습니다.
펼치기, 접기 또는 검색
화살표를 클릭하여 분기를 접거나 텍스트를 입력하여 필터링하세요.
키를 클릭하여 경로 복사
경로를 코드에 바로 붙여넣으세요.

트리 읽기

각 행은 키 또는 배열 항목의 경우 대괄호 안의 인덱스를 표시하며 그 뒤에 값이 이어집니다. 객체와 배열은 하위 요소 개수를 보여주며 한 줄로 접을 수 있습니다. 키를 복사할 때 표시되는 경로는 일반적인 JavaScript 속성 접근 방식을 따릅니다. 중첩된 객체 필드는 점으로 연결(address.city)되고 배열 인덱스는 대괄호로 연결(tags[0])됩니다.

브라우저에서 실행되며 크기 제한이 없습니다

파싱 및 렌더링은 이 페이지의 JavaScript에서 전적으로 처리됩니다. 개인정보, API 키 또는 내부 구조가 포함될 수 있는 JSON 데이터는 어디에도 업로드되지 않습니다. 하드코딩된 깊이 또는 크기 제한은 없으나, 모든 노드가 DOM 요소로 변환되므로 수천 개의 노드를 가진 JSON 문서는 페이지 렌더링 속도를 저하시킬 수 있습니다. 매우 큰 파일의 경우 필요 없는 최상위 분기를 접거나 검색 상자를 사용하여 원하는 키로 바로 이동하세요.

자주 묻는 질문

복잡하게 중첩된 JSON 객체를 시각적으로 탐색하려면 어떻게 해야 하나요?

입력 영역에 JSON을 붙여넣고 트리 파싱을 클릭하세요. 이 도구는 각 분기를 개별적으로 펼치거나 접을 수 있는 트리를 렌더링합니다. 문자열은 녹색, 숫자는 파란색, 불리언은 호박색, null 값은 회색 기울임꼴로 표시됩니다. 전체 펼침 또는 전체 접힘을 사용하여 대규모 구조를 빠르게 탐색하거나, 검색 상자에 입력하여 일치하는 키와 값만 필터링할 수 있습니다.

중첩된 JSON 키의 경로를 복사하려면 어떻게 해야 하나요?

렌더링된 트리 보기에서 아무 키나 배열 인덱스를 클릭하세요. 이 도구가 address.city 또는 tags[0]와 같은 전체 점 표기법 경로를 클립보드에 복사합니다. 이는 깊게 중첩된 값에 접근하는 코드를 작성할 때 배열 인덱스를 직접 세거나 속성 이름을 연결하지 않고도 정확한 경로가 필요할 때 특히 유용합니다.

JSON 트리 뷰어를 사용할 때 JSON 데이터가 서버로 전송되나요?

아닙니다. 파싱 및 렌더링은 JavaScript를 사용하여 브라우저에서 전적으로 처리됩니다. 개인정보, API 키 또는 내부 데이터 구조가 포함될 수 있는 JSON 데이터는 어디에도 업로드되거나 전송되지 않습니다. 이 도구는 모든 JSON 페이로드와 함께 안전하게 사용할 수 있습니다.

이 트리 뷰어가 처리할 수 있는 JSON의 최대 깊이 또는 크기는 얼마나 되나요?

트리 렌더러에는 하드코딩된 깊이 제한이 없지만, 수백 단계의 깊이나 수천 개의 노드를 가진 매우 크거나 깊게 중첩된 JSON은 모든 노드가 DOM 요소를 생성하므로 페이지 렌더링 속도가 느려질 수 있습니다. 매우 큰 JSON 파일의 경우 최상위 수준에서 노드를 접고 필요한 섹션만 펼치거나, 검색 상자를 사용하여 원하는 키로 바로 필터링하세요.

JSON 트리 뷰어는 어떤 유형을 인식하고 색상으로 구분하나요?

이 도구는 네 가지 기본 유형을 인식하고 색상으로 구분합니다: 문자열(녹색), 숫자(파란색), 부울(호박색), null(회색 이탤릭체). 배열과 객체는 하위 요소 수와 함께 접을 수 있는 분기로 표시됩니다. 이를 통해 유형 불일치를 쉽게 발견할 수 있으며, 예를 들어 숫자로 예상되는 필드가 실제로는 따옴표로 묶인 문자열임을 알아차릴 수 있습니다.