아톰(ATOM) 무료 웹에디터 환경설정 + FTP사용법!

깃허브(Github)에서 오픈소스로 제작한 무료웹에디터가 있어요.
그거슨 바로 아톰(ATOM)에디터!

환경설정이랑 몇가지 유용한 패키지(+ FTP사용)들을 알아봤어욤

아톰(ATOM)에디터 다운로드

아톰 사이트 https://atom.io/ 에 접속하셔요

노란색 Download 버튼을 클릭해서 아톰에디터 설치파일을 받아주세요~
Setup파일 실행시켜서 자동설치 진행하시면 되겠어욤 (설치 끝나면 재부팅 한번 해주세요^^)

아톰(ATOM)에디터 환경설정

아톰을 실행하면 기본적으로 이런 화면 구조에 나오게 돼요
기본적인 환경설정을 해볼게욤

상단메뉴에서 File > Settings 선택하심 환경설정창이 나옵니다.
* 상단에 메뉴가 없다면 Alt키를 눌러주셔요

왼쪽에서 Editor 선택해서 에디터 셋팅화면을 열어주면 여러 가지 옵션들을 체크할 수가 있어요

Auto Indent : 자동-들여쓰기
Auto Indent On Paste : 복사해서 붙여 넣을 때 자동-들여쓰기
Font Family : 폰트설정
Font Size : 폰트크기설정
* 개인적으로 아톰에디터의 기본 폰트가 한글/영문 둘 다 가독성이 좋더라구요. 고로 기본폰트 사용을 추천드려요 :D

​Line Height : 폰트행간 간격
Preferred Line Length : 워드랩(코드 줄바꿈 될 범위) 설정

워드랩 표시된 상태

* 에디터화면에서 우측에 가는 실선이 워드랩이에요. 불필요하다면 안 보이게 할 수가 있습니다.


File > Styles.less를 클릭!

atom-text-editor::shadow {
.wrap-guide {
visibility: hidden;
}
}
코드를 넣어주심 워드랩이 안 보이게 돼요~

Scroll Past End : 화면에서 코드가 끝나도 아래로 스크롤 되게 끔
Show Indent Guide : 태그의 시작점에 실선표시
Soft Wrap : 화면에 맞춰서 자동으로 줄바꿈 시켜줌
Tab Length : 들여쓰기의 간격 설정

* 빨간박스로 표시한 부분은 사용하시길 권장합니당^^

아톰(ATOM)에디터 패키지 추가

아톰에디터에서는 다양한 패키지(플러그인)들을 설치할 수가 있어요
확장기능을 제공하는 패키지들 덕분에 무료웹에디터라기엔 매우 고퀄?의 에디터가 되는 거 같아욤 ㅎ

메뉴바에서 Setting > Install을 클릭하고 인스톨패키지를 열어주세요
패키지검색에서 검색하여 설치할 수가 있어욤

아톰에디터에서 많이 쓰이는 패키지 몇 개를 추천드리겠어요~

Emmet : 탭키를 통해 코드의 자동완성을 해주는 패키지
Minimap : 오른쪽에 현재화면의 코드들을 미니맵으로 보여줌
Minimap-cursorline : 미니맵에서 현재 커서가 있는 코드의 위치 확인

* 오른쪽의 빨간박스로 표시한 부분이 미니맵. 코드가 길수록 유용한 패키지에요!

atom-beautify : 못 알아볼 만큼 정리가 안된 코드들을 깔끔하게 정리해줌
highlight-selected : 코드를 선택하면 이와 같은 코드들을 모두 표시
pigmens : 소스코드 안에 컬러값이 들어있으면 색상으로 표시
color-picker : 에디터화면 내에서 색상팔레트 사용하게끔 해줌
Linter : 자동으로 문법검사 해줌
(설치하고 linter-html/linter-css/linter-js 등 추가적으로 설치해줘야 함)

---

아톰(ATOM)에디터 FTP사용법

* Installed Packages에서 Remote-FTP를 설치해야 사용가능

Packages > Remote-FTP > Create FTP config file을 클릭.

.ftpconfig파일을 열어주세요

"host" : "FTP호스트"
"user" : "FTP사용자"
"pass" : "FTP비밀번호"
"remote" : "FTP시작경로"

FTP정보를 넣은뒤에 ftpconfig파일을 저장해주세요

설정이 끝나면 Remote-FTP > Connect를 해주세요
그럼 화면 왼쪽패널에 FTP경로가 보이게 됩니다

아톰에디터는 html/css, js로 인터페이스가 만들어졌다고해요.
그래서 웹페이지를 수정하듯이 UI화면을 바꿀 수가 있겠어요