온라인 JavaScript 코드 정렬
압축된 .js 파일, webpack 번들, 한 줄짜리 코드를 붙여 넣으면 오른쪽 패널에 들여쓰기가 적용된 JavaScript가 나타납니다. Prettier가 브라우저 안에서 정렬하며 코드는 어디에도 업로드되지 않습니다.
JavaScript가 읽기 어려워지는 이유
많은 운영 환경용 빌드 파이프라인은 JavaScript를 배포하기 전에 압축합니다. 압축 도구는 불필요한 공백과 주석을 제거하고 이름을 줄이거나 표현식을 바꾸기도 합니다. 별도의 번들링 단계에서는 모듈을 큰 파일로 합칠 수 있으므로 배포된 스크립트가 프로젝트 소스와 상당히 달라질 수 있습니다. 이 과정은 동작을 유지하면서 배포용 코드를 준비하는 것이 목적이지만 사람이 검토하기는 어려워집니다. 읽기 쉬운 여러 모듈로 구성된 프로젝트도 배포될 때는 몇 개의 빽빽한 번들이 될 수 있습니다. 정렬은 빌드 변환을 되돌리지 않고 번들에 남은 구조를 드러냅니다.
코드 정렬로 실제로 얻는 것
번들에 줄바꿈, 공백, 들여쓰기를 적용하면 남아 있는 프로그램을 살펴보기 쉬워집니다. 중첩 함수와 조건 분기가 드러나고 문자열이나 엔드포인트 이름도 찾기 편해집니다. 새 줄 번호는 정렬된 사본의 위치입니다. 압축 파일에서 나온 스택 추적은 여전히 원래 파일을 가리킵니다. LFUnminify는 그 위치를 변환하거나 소스 맵에 연결하지 않습니다. 정렬된 화면으로 주변 논리를 이해하고 정확한 실행 위치는 브라우저 디버거로 조사하세요. 오류 메시지나 네트워크 요청에 있는 특징적인 문자열에서 시작하면 좋습니다. 정렬된 사본에서 이를 찾은 뒤 가장 가까운 함수가 원인이라고 단정하지 말고 주변 조건을 읽어 보세요. 번들에 생성된 보조 함수나 런타임 래퍼가 있다면 정렬 후에도 그대로 남습니다. 원본 소스를 구할 수 있다면 함께 비교하는 편이 들여쓰기만 보고 판단하는 것보다 신뢰할 만한 설명을 얻는 데 도움이 됩니다.
최신 JavaScript 문법 지원
포매터는 오래된 일부 문법에 한정되지 않고 최신 JavaScript를 분석합니다. 화살표 함수, 클래스, async와 await, 제너레이터, 옵셔널 체이닝, 널 병합 연산자, 템플릿 리터럴, 구조 분해, 전개 구문, 동적 가져오기, ES 모듈을 지원합니다. JSX도 지원하므로 컴파일 과정에서 JSX가 그대로 남은 React 컴포넌트를 살펴볼 때 유용합니다. Prettier를 사용하기 때문에 일관된 규칙이 적용되지만, 이 도구의 설정은 평소 사용하는 편집기의 설정과 다를 수 있습니다.
코드 정렬의 한계
정렬은 빌드 과정의 변환을 되돌리지 않습니다. 원래 이름이 remainingRetries였더라도 n으로 바뀐 변수는 그대로 n입니다. 번들로 묶인 모듈은 입력한 번들 안에 남고 삭제된 주석은 신뢰할 수 있게 추론할 수 없습니다. 원본 저장소나 소스 맵을 활용하면 이 도구 밖에서 맥락을 더 얻을 수 있습니다. 의도적으로 난독화한 코드는 정렬해도 난독화된 상태입니다. 인코딩된 문자열, 인위적인 분기, 오해를 유도하는 이름은 여전히 의미를 가릴 수 있습니다. 결과를 검토용으로 활용하고 수정 사항은 실제 프로젝트에서 테스트하세요.
자주 묻는 질문
webpack이나 Vite 번들도 정렬할 수 있나요?
네. 지원되는 JavaScript 번들은 내용을 붙여 넣거나 로컬 파일을 열어 정렬할 수 있습니다. 결과는 번들 코드를 유지하며 개별 소스 모듈을 다시 만들지 않습니다. 큰 번들은 브라우저를 느리게 하거나 응답하지 않게 만들 수 있으므로 가능하면 작고 완결된 부분을 살펴보세요.
JavaScript 난독화를 해제하나요?
난독화된 파일 안에서도 지원되는 JavaScript 문법을 정렬할 수 있지만 난독화 자체를 되돌리지는 않습니다. 인코딩된 문자열, 인위적인 제어 흐름, 의도적으로 혼동을 주는 이름은 그대로 남습니다. 들여쓰기는 구조를 조사하는 데 도움이 되지만, 읽기 쉬운 서식만으로 스크립트의 동작이나 신뢰성을 판단할 수는 없습니다.
정렬하면 코드가 망가질 수 있나요?
포매터는 JavaScript 동작을 유지하면서 일관된 서식을 적용하는 것을 목표로 합니다. 문장 부호, 따옴표, 배치가 바뀔 수 있으므로 바이트 단위로 동일한 사본은 아닙니다. 원본을 보관하고 결과를 검토한 뒤, 수정하거나 정렬한 번들을 운영 환경에 사용하기 전에 프로젝트 테스트를 실행하세요.