Atom 에디터 기본 사용법(by 생활코딩 선생님_인프런 무료 강의)

Atom - hackable text editor (커스터마이징 하기 쉬운 에디터라 생각!)

역슬래시 - 윈도우 : '원화' 표시 
★ alt - 아톰의 메뉴바 감추거나 보이게 하는 기능.

메뉴바에서 view -> developer -> toggle developer tools로 가서 커서 형태로 생긴 아이콘을
눌러 원하는 파일이나 섹터를 클릭하면 웹사이트에서 흔히 F12를 누른 것처럼 코드 소스가 나타난다!
컬러도 바꿀 수 있다. (toggle : 껐다 켰다 하겠다. 란 의미)
--

가장 기초적이며 중요한 기능
0. (강의에는 없는 내가 생각한 거.)
: 파일을 새로 생성할 시 ex) .html 이란 확장자의 파일을 생성하고 싶을 때
파일의 확장자 명을 .html이라 선언하지 않으면 당연히 HTML의 문법이 적용되지 않는다!
어떻게 보면 당연한 소린데 혼자 공부할 때 왜 문법이 적용되지 않는지 몇분동안 헤맸던 기억이 있으니..
(실생활에서 쓰는 컨트롤 + Z, F, S 기능이 똑같이 적용되니 당황하지 말고 이것저것 눌러보자.)

 

1. 에디터 파일과 창 관리하는 법
- 창을 동시에 여러개를 켜놓고 싶은 경우 : split 기능 활용

2. 검색(거대한 프로젝트에서 자신이 원하는 것을 찾는 법)
buffer : 커서가 위치한 윈도우의 내용을 버퍼라고 한다. (= 마법)

코드 찾을 때
- 컨트롤 + F (굳이 에디터 아니더라도 흔히 아는 단축키..였네)
- 만약 프로젝트 전체에서 찾고 싶으면 : 컨트롤 + 쉬프트 + F (find in project) 
원하는 내용을 찾은 후 그걸 바꾸고 싶으면 Replace 기능 사용

파일 찾을 때
- find file : 컨트롤 + P (요건 다르네.. 원래 복사할 때 단축킨데)
파일 이름이 정확히 기억 안나더라도 순서 상관없이 일치하는 문자나 확장자명을 쓰면 뜨니까 걱정말고

 

3. 자동완성기능
: 코드의 속성 등을 모르는 경우 도와주는 기능
아톰 맨 하단 오른쪽에 깃허브 utf-8 사이에 있는 부분이 지금 이 파일에 어떤 언어를 적용하고 있는 지를
나타낸다. 확장자를 생성할 때 .html 이라고 생성했다 하더라도 밑에 그 부분을 만약 php로 변경했다면
php에 해당하는 코드와 관련하여 아톰이 도움을 준다고 보믄 된다.
★ 코드를 꼭 꺽쇠 안에 넣을 수고를 덜어준다. html이면 html만 쓰고 Tap 키를 누르면 (닫는 태그와 같이) 뜬다.

파일 이름 찾을 때와 마찬가지로 찾는 속성의 이름이 기억나지 않아도 ex) text-align을 쓰려고 한다면,
t-a 까지만 쳐도 추천에 뜬다!

// (기본적인 설명 끝)

 

4. 설정
alt - file - settings
settings : 일반적인 세팅
keybindings : 단축키 세팅
packages : 이미 설치되어 있는 패키지들 리스트
themes : 디자인 세팅
install : 에서는 코드를 치는 데 도움을 줄 수 있는 개인이 만든 DLC 느낌이라 보면 된다. (구글 웹스토어 같은)
ex) html에서 도움을 받고 싶다면 'emmet'을 검색해서 설치.

<hr>

★★★

- 패키지 제어 방법
alt - file - settings
ex) minimap 패키지 install 
(.. 영어 공부 화이팅)
- core package는 기본적으로 포함된 패키지들(현재 개발 중인 프로젝트와 관련 없는 건 disable : 과부화 방지)
+ settings가 있는 패키지는 본인 입맛에 맞게 변경 가능
- community는 미니맵 패키지처럼 고마운 분들이 만들어주는 작품들 찾고 인스톨

 

※ 패키지 Emmet 이란?
.html에서 느낌표 - 탭 누르면 자동으로 HTML 기본 골격(문법)이 나타난다.
예를 들어, 부모자식 태그에서 li 태그를 20개 이상 만든다고 가정하면, 복붙을 하거나 컨트롤 키를 활용해서
적어줄 수도 있지만 그냥 li*20 탭 키를 누르면 20줄이 완성된다! // li 태그 밑에 a 태그를 20개 하고 싶으면
li>a*20 탭. 등을 도와주는 천사.

요런 것들을 하는 방법 : 먼저 에밋을 깔자. alt - file - settings - install, emmet 검색 - install
(* 6년 전 강의의 emmet은 21만 건의 다운로드 수인데, 현재는 4백만이 넘었다..)

emmet.io 에서 Documentation -> Abbrevilations -> Syntax에서 에밋의 문법에 관한 걸 찾을 수 있다.

★ 관련 기본 문법 : docs.emmet.io/abbreviations/syntax/ 참조하기.

 

※ 패키지 Script 란?
alt - file - settings - install, script 검색 - install

아톰 내에서 결과 값을 바로 알려준다! (특정 값을 계산하는 경우)
(오..대박이다. 이 강의 듣기 전까진 일일이 바뀐 변화를 만든 웹사이트를 찾아갔는데,
컨트롤 + 쉬프트 + b 를 누르니 알아서 켜진다..! 대박)

★ Ctrl + Shift + b : Run

아톰 패키지_Script 사용법. (직접 캡처)

 

§ 불가능이란 노력하지 않는 자의 변명이다.