요즘 코드 작성에서 AI는 정말 점점 더 강력해지고 있다. "디바운스 함수 좀 만들어줘"라고 하면 3초 만에 주석과 테스트 케이스까지 붙여서 내놓는다. "이 컴포넌트를 hooks로 리팩토링해줘"라고 하면 그것도 깔끔하게 해준다. 때로는 자신이 키보드를 두드리는 속도가 AI가 생성하는 속도를 따라가지 못한다고 느낄 정도다.
그런데 정말 흥미로운 점이 하나 있다——AI가 생성한 코드가 아무리 아름다워도, 사람이 작성하든 기계가 작성하든, 혹은 사람과 기계가 함께 뒤섞어 만들든, JS 코드는 결국 한 가지 단계를 피할 수 없다: 포맷팅이다.
이게 뭐 대단한 일이냐고 생각할 수 있다. 에디터에 포맷팅 기능이 내장되어 있지 않나? VS Code에서 Shift+Alt+F 한 번 누르고 Prettier를 돌리면 끝 아닌가? 맞다, 일상적인 개발에서는 확실히 충분하다. 그런데 문제가 생긴다——인터넷에서 난독화된 것처럼 압축된 코드를 긁어왔을 때, 혹은 전임 동료가 남긴 "조상 대대로 내려온 거대한 스파게티 코드"를 인수받았을 때, 또는 어떤 CDN에서 min.js를 가져와서 도대체 뭘 하는 건지 보고 싶을 때, 그제서야 일반적인 포맷팅으로는 도저히 감당이 안 된다는 걸 깨닫게 된다.
나도 얼마 전에 이런 일을 겪었다. 오래된 프로젝트에서 긴급 버그를 수정해야 했는데 소스 코드는 이미 찾을 수 없고 서버에는 압축된 JS 파일 하나만 남아 있었다. 어떻게 했을까? 이를 악물고 읽는 수밖에. 그 코드는 이렇게 생겼다: function a(b,c){return b+c}var d=function(e){return e2}——변수명은 전부 abcdefg이고, 함수는 러시아 인형처럼 겹겹이 중첩되어 있고, 줄바꿈? 존재하지 않는다. 코드 전체가 한 줄이라 오른쪽으로 스크롤바를 끌면 손이 쥐날 지경이다.
이럴 때 필요한 것이 바로 전용 JS 포맷팅 및 압축 도구다.
먼저 포맷팅부터 말하자면, 좋은 포맷팅 도구는 단순히 줄바꿈과 들여쓰기를 추가해주는 게 아니라 코드 구조를 지능적으로 인식할 수 있어야 한다. 예를 들어 if(a){b()}else{c()}를 만나면 어떻게 여러 줄로 나눠야 읽기 좋은 관습에 맞는지 알아야 한다. 삼항 연산자가 중첩된 경우 언제 줄바꿈을 하고 언제 한 줄로 유지하는 게 더 명확한지 판단해야 한다. 또한 객체 리터럴, 배열, 함수 매개변수——이런 곳의 포맷팅 규칙은 모두 다르며, 조금만 어긋나도 보기 불편하다.
나는 꽤 많은 온라인 도구를 써봤는데, 어떤 것들은 단순 무식하게 세미콜론마다 줄바꿈을 해서 `for(var i=0;i