🤔 코드 포매터(Formatter)란?

코드 포매터는 코드의 스타일을 자동으로 정리하고 정렬해 주는 도구입니다. 가독성을 향상시키고, 팀 내 코드 스타일을 통일하며, 코드 리뷰 효율을 높이는 등 많은 이점을 제공합니다. 들여쓰기, 줄바꿈, 공백, 따옴표 스타일 등을 일관되게 유지할 수 있어 협업 시 필수적인 도구입니다.

📚 언어별 특징

HTML: 들여쓰기와 줄바꿈을 통해 DOM 구조를 명확하게 보여줍니다. 중첩된 태그의 계층 구조를 시각적으로 파악하기 쉽습니다.

CSS: 속성을 줄바꿈하고 정렬하여 유지 보수성을 향상시킵니다. 선택자와 속성 블록을 읽기 쉽게 배치합니다.

JavaScript: 일관된 세미콜론, 들여쓰기, 따옴표 스타일로 버그를 예방하고 코드 품질을 높입니다.

JSON: 들여쓰기를 맞춰 로그나 설정 파일을 읽기 쉽게 만듭니다. API 응답을 확인할 때 매우 유용합니다.

⚙️ 옵션 사용 팁

• 탭 vs 스페이스: 팀 컨벤션에 따라 선택하세요. 일반적으로 스페이스 2~4칸이 많이 사용됩니다.
• 들여쓰기 크기: 2칸은 간결하고, 4칸은 구조가 더 명확합니다. 프로젝트 표준에 맞게 선택하세요.
• 최대 줄 길이: 80~120 사이가 적당합니다. 너무 긴 줄은 가독성을 떨어뜨립니다.
• 세미콜론: JavaScript에서 세미콜론 사용 여부는 팀마다 다릅니다. 일관성이 중요합니다.
• 따옴표 스타일: 작은따옴표(')나 큰따옴표(") 중 하나로 통일하면 코드가 깔끔해 보입니다.

💼 실무 활용 예시

• Git 커밋 전: 코드를 포매팅하면 diff가 간결해지고 리뷰가 쉬워집니다.
• 블로그/문서 작성: 코드 블록을 삽입할 때 보기 좋게 정리할 수 있습니다.
• API 응답 확인: JSON 응답을 포매팅하면 구조를 한눈에 파악할 수 있습니다.
• 레거시 코드 정리: 오래된 코드를 현대적인 스타일로 정리할 때 유용합니다.
• 코드 학습: 압축된 코드를 풀어서 구조를 이해하는 데 도움이 됩니다.
• 협업 준비: 팀에 합류하기 전에 기존 코드 스타일을 맞춰볼 수 있습니다.

⚠️ 주의사항

• 문법 오류: 포매터는 문법 오류를 수정하지 못합니다. 문법이 올바른 코드만 정렬할 수 있습니다.
• 코드 의미: 포매팅은 코드의 동작을 바꾸지 않지만, 잘못된 코드는 예상치 못한 결과가 나올 수 있습니다.
• 팀 설정: 팀에서 사용하는 공식 포매터 설정(Prettier, ESLint 등)과 100% 동일하지 않을 수 있습니다.
• 대용량 코드: 매우 큰 파일은 브라우저 성능에 영향을 줄 수 있으니 주의하세요.
• 주석 위치: 일부 주석의 위치가 변경될 수 있으니 중요한 주석은 확인하세요.

🎯 효율적인 사용법

• 먼저 언어를 선택하고, 해당 언어에 맞는 옵션을 설정하세요.
• '샘플 불러오기'로 예제를 확인하고 동작 방식을 익혀보세요.
• 포매팅 결과가 마음에 들지 않으면 옵션을 조정해 다시 시도하세요.
• '결과 → 입력으로' 버튼으로 결과를 다시 수정할 수 있습니다.
• 자주 사용하는 옵션 조합을 기억해두면 작업 속도가 빨라집니다.
• 압축된 코드(minified)도 포매팅하면 읽을 수 있는 형태로 복원됩니다.