[Atom] 아톰 에디터 설치 및 웹 개발 설정 (feat 패키지, 플러그인)

 

[ Contents ]

 

 

1. Atom

 Atom은 VS code와 비슷한 '소스 코드 편집기', 즉 에디터입니다. IDE가 아니기 때문에, 개발 분야에 따라 설정과 플러그인 설치가 필요합니다. 이 글에서는 웹 개발에 필요한 설정과 플러그인 설치를 해보겠습니다.

 

 

A hackable text editor for the 21st Century

 아톰은 깃허브에서 제작한 오픈소스 프로그램으로, 무료로 이용할 수 있습니다. 위 사이트에서 다운로드 후 설치해주세요.

 

 

 

2. Atom 패키지(플러그인) 설치

 아톰 설치가 성공적으로 완료되면, 위와 같은 초기 가이드라인이 뜹니다. 이 중 'Install a Package'를 눌러주세요. 아톰은 '패키지' 없인 시체입니다. 특히 웹 개발할 때에는, '필수'입니다. 아래와 같은 패키지가 있어야, 태그 노가다 없이 편하게 웹페이지를 작성할 수 있습니다.

 

 

 1) Emmet

 Emmet은 자동 태그 완성 패키지입니다. 

 

 !html 후 엔터를 치면, 기본 html 구조가 자동 완성됩니다.

 또, 태그 이름만 쓰고 Tab을 누르면 자동으로 태그가 완성됩니다. 예를 들어 p를 쓰고 Tab을 누르면 <p></p>가 완성됩니다.

 

 html에 없는 태그라도, tab을 누르면 알아서 태깅이 됩니다.

 

 class와 id도 쉽게 지정할 수 있습니다. 저는 웹 개발을 메모장으로 맨 처음 배웠는데, 아톰은 거의 혁명이었습니다. (교수님... 왜 저에게 그런 시련을....)

 

 

 

 2) atom-beautify

 Atom-beautify는 자동으로 줄 바꿈 및 들여 쓰기를 해주는 패키지입니다. 솔직히 표나 리스트 태그를 쓰다 보면, 코드가 좀 더러워지는데... 이 패키지를 이용하면 한 방에 정리됩니다.

 

 

극한의 한 줄 코딩러도 [Ctrl + Alt + B] 면 처리 가능합니다.

 

 

  다시 깔끔하게 정리된 코드를 볼 수 있죠. 디버깅할 때도 좋습니다. HTML 오류는 대부분 태그 철자를 틀리거나, 태그를 미처 닫지 못한 경우입니다. Atom-beautify를 써서 태그를 재정렬하면, 올바르지 않은 태그를 쉽게 찾아낼 수 있습니다.

 

 

 

 3) atom-html-preview

 preview 패키지는 미리 어떤 식으로 HTML이 나올지 보여줍니다.

 

 

 [Ctrl + shift + H]를 하면, html Preview가 옆에 듀얼 창으로 뜹니다. 태그를 작성하면 바로 표시되며, 일종의 콘솔창이라고 생각하시면 됩니다. html도 컴파일이 가능해진 거죠!

 

 

 

3. Atom 세부 설정

 [crtl + ,]를 하면 Atom 설정창을 열 수 있습니다. 이곳에서 에디터 설정, 단축키, 테마 등을 바꿀 수 있습니다. 저는 따로 바꿀 게 없는 거 같아요.

 

 

 예전에는 Atom-light가 기본이었는데, 지금은 Dark가 기본입니다. 혹시 Light버전을 선호하신다면 테마에서 바꾸실 수 있습니다.