처리
로컬 실행 · 업로드 없음

JSON 경로 추출

JSONPath · 전체 경로 목록 · 노드 추출

경로 추출

준비됨

원본 입력

                                
                            
파싱 출력

                                
고정 높이, 긴 코드는 영역 내 스크롤

ABOUT

JSON 경로 추출 소개

복잡한 JSON의 모든 경로 탐색, 또는 JSONPath($..price 등)로 목표 필드 정확 추출.

GraphQL 외에도 JSONPath는 REST API 반환 구조 탐색에 가장 효율적. 전체 경로 나열로 인덱스 구축 후 표현식으로 정밀 추출 — 새 API 파악 시간을 시간→분 단위로 단축.

DEEP DIVE

JSON 경로 추출 자세히 알아보기

JSONPath는 XPath의 JSON 대응, 표현식으로 중첩 데이터 노드 위치. 예: $..price는 모든 price 재귀 검색, $.store.book[*]는 배열 전 요소. JSONSort는 전체 JSONPath 구문·빈 입력 전체 경로 나열 지원.

낯선 API·대형 제3자 JSON 분석 시 전체 경로 나열이 최고 효율 — 수백 줄 육안 스캔보다 훨씬 빠름.

JSONPath 규격은 구현마다 차이(필터·재귀 descent). JSONSort는 $..field, 배열 슬라이스, 조건 필터 등 90% 일상 시나리오. 복잡 표현식은 소규모 샘플 검증 후 전체 데이터 적용.

FEATURES

핵심 기능

01

전체 경로 열거

JSONPath 입력 비우면 모든 leaf 경로 자동 나열.

02

JSONPath 쿼리

$, .., [], *, ?() 등 표준 JSONPath 표현식 지원.

03

필터 표현식

?(@.field > 10) 등 조건으로 배열 요소 필터.

04

결과 포맷

추출 결과 JSON 형식 출력, 바로 복사 사용.

05

구문 검증

JSON 입력 불법 시 오류 줄 알림, 오염 데이터 쿼리 방지.

06

로컬 실행

쿼리 로직 브라우저 내, 데이터 업로드 없음.

07

경로 복사

열거 결과 경로 문자열 복사, 코드·문서에 활용.

08

다중 결과 출력

여러 노드 매칭 시 JSON 배열 반환, 후속 처리 편리.

HOW TO USE

사용 방법

  1. 1

    JSON 데이터 붙여넣기

  2. 2

    비워 전체 경로 나열, 또는 JSONPath 입력

  3. 3

    추출 결과 확인 및 복사

  4. 4

    상단 옵션에서 들여쓰기, JSON5, 정렬 등 고급 설정 조정

  5. 5

    결과 원클릭 복사, 또는 Diff / 경로 추출 등으로 추가 분석

WORKFLOW

일반적인 워크플로

데이터 가져오기부터 결과 내보내기까지의 전체 흐름. 팀에서 JSON 경로 추출 사용법 통일.

1

JSON 가져오기

API 응답 붙여넣기 또는 설정 업로드, 구문 유효 확인.

2

전체 경로 탐색

JSONPath 비우고 모든 leaf 경로로 구조 인지.

3

표현식 작성

$..target 또는 필터 표현식 입력, 추출 결과 확인.

4

코드에 반영

경로를 lodash get, JMESPath 또는 문서 필드 설명에 복사.

USE CASES

적용 시나리오

프론트엔드

프론트엔드 개발

미지 API 응답 구조 탐색, data.user.list 등 값을 가져올 경로 확정.

백엔드

백엔드 개발

직렬화 JSON에 예상 필드 경로 포함 여부 검증.

데이터

데이터 분석가

복잡 중첩 JSON에서 특정 지표 필드 추출.

테스트

테스트 엔지니어

인터페이스 반환에 JSONPath 경로 존재/부재 확인.

QA

QA 자동화

회귀 API에서 핵심 JSONPath 경로·타입 불변 확인.

크롤러

크롤러 / 수집

제3자 API 응답 분석, 데이터 추출 경로로 크롤 규칙 작성.

TIPS

사용 팁

  • 새 API 인수 시 첫 단계: 경로 비우고 전체 경로로 mental model.
  • $..fieldName은 모든 계층 fieldName 재귀 검색, 매우 유용.
  • 배열 필터 ?(@.price < 10), 조건 요소 빠르게 선별.
  • 추출 결과를 「코드 생성」에 붙여 TypeScript 타입 역생성.
  • 경로 과다 시 포맷+트리 뷰, 순수 경로 목록보다 직관.
  • JSONPath 표현식 대소문자 구분, 필드명 JSON과 완전 일치.
  • $.store.book[*].author는 고전 예시, 표현식 구문 빠른 검증.
  • 필터에서 숫자 비교 시 따옴표 없음: ?(@.price < 10).
  • 경로 목록 내보내기를 API 문서 「필드 인덱스」 부록으로.
  • 깊은 경로 과장 시 백엔드 flatten 또는 GraphQL로 프론트 추출 복잡도 감소.

LOCAL VS ONLINE

로컬 vs 온라인 도구

JSONSort는 순수 프론트엔드 아키텍처를 고수합니다. 아래 비교가 개발 데이터 처리에 로컬 도구가 적합한 이유를 보여줍니다.

비교 항목
JSONSort 로컬
기존 온라인 도구
데이터 프라이버시
완전 로컬, 업로드 없음
대부분 서버 업로드 필요
응답 속도
밀리초 단위, 네트워크 지연 없음
네트워크 및 서버 부하 영향
오프라인 사용
PWA 오프라인 지원
보통 인터넷 필수
민감 데이터
JWT/설정/로그 안심 처리
유출 위험 있음
광고 및 추적
광고 없음, 데이터 추적 없음
대부분 광고 또는 Analytics 포함
파일 드래그 앤 드롭
로컬 파일 직접 가져오기 지원
일부 도구는 업로드 크기 제한
도구 연동
19가지 도구를 한 페이지에서 전환
보통 도구마다 독립 사이트
오픈소스 투명성
순수 정적 페이지, 소스 코드 감사 가능
폐쇄형 서버, 감사 불가

TROUBLESHOOTING

흔한 오해 및 문제 해결

실제 사용에서 자주 발생하는 문제와 권장 대처법. 시행착오 시간을 줄입니다.

경로 과다로 파악 어려움

권장:포맷 트리 뷰로 상위 구조 파악 후 서브트리 targeted 쿼리.

필터 표현식 오류

권장:표현식 단순화 후 조건 점진 추가. @ 현재 노드 참조 구문 확인.

배열 vs 객체 혼동

권장:[0] vs .field 구분. 전체 경로 목록으로 노드 타입 확인.

특수 문자 키 이름

권장:공백·기호 키는 ["key name"] bracket 표기.

FAQ

자주 묻는 질문

어떤 JSONPath 구문 지원?

$, .., [], *, ?(), @ 등 자주 쓰이는 JSONPath 표현식 지원.

경로 목록과 쿼리 결과 차이?

비우면 모든 경로. 표현식 입력 시 매칭 노드 값.

JSON 배열 루트 처리?

가능. 루트가 배열이면 $[0], $[1] 형태.

표현식이 빈 결과를 반환하는 이유?

필드명 대소문자, 배열 인덱스 범위, .. 재귀 계층 확인.

JSON 값 수정 가능?

현재 읽기 전용 추출. 값 수정은 JSON 편집 후 재쿼리.

데이터가 서버에 업로드되나?

아니요. JSONSort 모든 도구는 브라우저 로컬에서 동작하며 입력 내용은 백엔드 서버로 전송되지 않습니다.

가입이나 설치가 필요한가?

필요 없습니다. 페이지를 열면 바로 사용 가능, 계정·클라이언트 다운로드 불필요, PWA 오프라인 캐시 지원.

얼마나 큰 파일을 지원하나?

브라우저 메모리에 따라 다르지만 보통 수 MB급 데이터를 원활히 처리합니다. 초대형 파일은 먼저 분할하거나 병합·정리 도구를 사용하세요.

클립보드에 복사됨