웹에디터 WEB Editor "Brackets" 사용해보기 (설치/확장기능/단축키)

 

📌 빠른 바로가기 

• Brackets 설치
• 확장 기능
• 단축키

 

Brackets Image

첫 웹 프로젝트는 아톰(Atom)으로, 생활코딩 실습용으론 Sublime Text를 를 썼었는데

내부 기능을 깊게 사용해본 건 아니라 명확한 장단점은 못 느꼈습니다. 다만 Sublime이 Atom에 비해 좀 더 가벼운(?) 느낌이 들었던 것 같아요. 

이번에 자바스크립트 공부를 시작했는데 새 에디터도 사용해볼 겸 브래킷즈(Brackets)를 설치해봤습니다! 

 

 

 

 

1. Brackets 설치

Brackets을 설치해보자

다운로드 링크: https://brackets.softonic.kr/download

Brackets

 

위 링크 들어가면 다음과 같은 창이 뜨는데요

초록색 박스 '무료 다운로드 PC용'를 클릭해주세요. 광고가 뜨면 꼭 닫아주세요. 

 

 

자동으로 다운로드가 시작됩니다.

 

 

Next

 

 

Install

 

 

간단히 설치 완료 됐습니다!

 

 

---

 

 

2. 확장 기능

Brackets을 더 편리하게

설치 이후에도 Brackets에는 많은 확장 기능이 존재합니다.

리눅스의 vim을 꾸밀 때처럼 하이라이트 기능도 있고, 자동완성 기능, 테마도 바꿀 수 있습니다! :-) 

왼쪽 하단에 보시면 번개 아이콘과 블록 아이콘이 있습니다. 번개 아이콘은 '실시간 미리 보기'인데, 코드 변경 사항을 바로바로 적용해 보여주는 유용한 기능이에요!

지금 우리가 볼 건 블록 아이콘입니다.

 

 

눌러주시면 다음과 같은 창이 뜹니다. 가장 먼저 자동완성 기능을 추가해봅시다!

자동완성 기능인 "Emmet"를 검색해주세요.

 

 

아래 "Emmet"를 설치해줍니다! 저는 이미 설치가 된 상태라 완료로 뜨네요.

 

 

 

 

위 방법과 마찬가지로 기능 이름을 검색해 간단히 설치할 수 있습니다. 다음은 제가 현재 쓰고 있는 기능들입니다! 더 많은 기능이 있으니 찾아보셔도 좋을 것 같아요. 🥰

 

● color Highlighter

입력한 색상 코드가 글씨 배경으로 깔려 색 확인이 편리해집니다.

 

● Custom Work

인터페이스 상단에 탭이 생깁니다. 

 

● Indent Guides

들여 쓰기 시 시작과 끝을 맞추기 위해 가이드 선을 그어줍니다.

 

● Beautify

자바스크립트나 HTML 등등 여러 언어 코드를 예쁘게 정리해줍니다.

 

● Brackets Icons

폴더 밑 문서 앞에 확장자 별 아이콘이 표시되어 구분하기 좋습니다.

 

 

 

---

 

 

3. 단축키

Brackets을 더 더 편리하게

이제 본격적으로 개발을 할 때 유용한 단축키들입니다. 사실 처음엔 몰랐는데 계속 쓰다 보니 Brackets에 유용한 기능이 꽤 많이 있었습니다...

 

 

 

● CSS : Ctrl + E

정말 정말 유용한 기능입니다. 기능에 대해서 검색해보니 어디에서나 빠지지 않고 등장하는 기능이더라고요.

 

해당 줄 클릭하고 "Ctrl + E"를 누르면 

 

뿅! 하고 창이 등장합니다. 여기서 "새 규칙"을 누르면 

 

자동으로 CSS 형식을 등록해줍니다. 실제로 style.css 파일에 가보면 자동으로 써져있는 게.. 너무 신기했어요. 물론 새 규칙을 생성하는 것 외에 수정도 가능합니다!

 

 

 

또 css 파일에서 해당 줄을 클릭하고 "Ctrl + E"를 누르시면 

 

색상표가 뜹니다! 매번 색상 코드 찾아보며 헤맸는데 정말 유용한 기능 같아요.

 

 

 

 

● 실시간 미리 보기 : Ctrl + Alt + P

실시간 미리보기 - 확장 기능 관리자 - Beautify(확장 기능)

위에서 말씀드렸던 실시간 미리보기 기능 단축키입니다. 좌측 하단의 ⚡번개 아이콘을 누르셔도 됩니다!

 

 

● 한 단어 드래그 : Ctrl + B

뿅

커서가 있는 위치의 단어를 드래그 처리해줍니다. delete와 함께 사용하기 좋아요. :)

 

 

● 찾고 바꾸기 : Ctrl + H

 

Atom의 검색 기능과 비슷합니다! 일괄 변경은 항상 조심.. 또 조심..

만약 잘못했을 경우 어느 에디터나 Ctrl+Z 하면 됩니다. 복구는 Ctrl+Y!

 

 

● 한 줄 전체 주석 : Ctrl + ?

현재 줄 전체를 주석 처리합니다. 

 

 

● 추가 중..

 

 

 

 

 

---

 

사실 플러그인은 Atom도 너무 많아서 Brackets가 딱히 뛰어난 것 같지는 않았어요.

그러나 코드 변경 시 실시간으로 확인할 수 있는 미리보기가 제공된다는 점이 너무 좋았습니다. :-0 

JS 공부할 때는 유용하게 쓸 것 같아요!