코딩을 처음 시작했을 때 가장 힘들었던 게 뭔지 아세요? 복잡한 문법? 아닙니다.
바로 ‘단순 노동’이었습니다. 코드 한 줄 고치고 크롬 창 띄워서 새로고침(F5) 누르고, 다시 에디터로 돌아오고… 이 짓을 하루에 500번쯤 하다 보면 “내가 지금 코딩을 하는 건지 막노동을 하는 건지” 현타가 오곤 했죠. 오늘 소개해 드릴 5가지 확장 프로그램(Extension)은 여러분의 손목 건강과 정신 건강을 지켜줄 구세주들입니다.
1. 생존을 위한 필수템 (안 깔면 손해)
이 두 가지는 선택이 아니라 필수입니다. VS Code를 설치하자마자 무조건 검색해서 까세요.
- 1. Live Server (라이브 서버)
저장(Ctrl+S)을 누르는 순간, 브라우저가 자동으로 새로고침 됩니다. 듀얼 모니터를 쓰고 계신다면 신세계를 맛보게 됩니다. F5 키를 뽑아버려도 될 정도로 편리합니다. - 2. Prettier (프리티어)
코드를 개판으로 짜도 저장만 하면 알아서 줄 맞춤, 들여쓰기를 완벽하게 해줍니다. 협업할 때 욕먹기 싫다면 필수입니다.
“2012년, 첫 회사 사수에게 코드를 검사받던 날이 기억납니다. 기능은 완벽했는데, 들여쓰기가 삐뚤빼뚤하다며 30분 동안 혼났었죠. ‘코드는 가독성이 생명이다’라는 말을 그때 뼈저리게 느꼈습니다. 그때 Prettier가 있었다면 칭찬받았을 텐데 말이죠. 여러분은 저 같은 실수를 하지 마세요.”
2. 퍼블리싱 속도 2배 올리기
HTML/CSS 작업을 할 때 ‘오타’와 ‘태그 찾기’ 시간을 획기적으로 줄여주는 녀석들입니다.
3. Auto Rename Tag<h2> 태그를 <h3>로 바꾸고 싶을 때, 앞부분만 고치면 뒷부분 닫는 태그(</h2>)도 자동으로 </h3>로 바꿔줍니다. 짝이 안 맞는 태그 에러를 99% 방지해 줍니다.
4. Material Icon Theme
파일 이름 옆에 예쁜 아이콘을 붙여줍니다. HTML, CSS, JS, 이미지 파일이 시각적으로 확 구분되어서, 파일이 수십 개 쌓여있어도 내가 찾는 파일을 1초 만에 찍을 수 있습니다.
5. Indent-rainbow
들여쓰기 된 공간에 무지개 색상을 칠해줍니다. <div>가 10개씩 중첩되어 있어도, 지금 내가 닫는 괄호가 어느 짝인지 색깔로 직관적으로 보여줍니다.
💡 코드캠의 실전 TIP
“확장 프로그램을 너무 많이 깔면 VS Code 구동 속도가 느려집니다. 딱 필요한 것만 설치하시고, 사용하지 않는 기능은 ‘사용 안 함(Disable)’ 처리해 두는 게 좋습니다. 오늘 추천드린 5개 정도는 켜둬도 전혀 무겁지 않으니 안심하세요.”
마치며
좋은 목수는 연장을 탓하지 않는다고 하지만, 스마트한 목수는 좋은 연장을 씁니다. 이 5가지 도구들은 여러분이 ‘코드’ 그 자체에만 집중할 수 있도록 도와줄 겁니다. 잡일은 도구에게 맡기고, 여러분은 창의적인 구조를 짜는 데 집중하세요.
혹시 설치하다가 설정이 꼬이거나 작동이 안 되나요?
댓글로 오류 내용을 남겨주시면, 해결 방법을 딱 정해드리겠습니다!
