브라켓의 실시간 미리 보기 처럼, atom에서 live server 설치 및 사용 방법

어도비사의 bracket에서 장점 중 한가지가 html 코딩할때 실시간 미리보기가 가능하다는 점이다.

물론 가끔 팅기는 경우도 있지만, 버그 없는 프로그램이 어디 있겠는가,

매번 open in browser할 필요 없이 변경 즉시 효과가 적용되니, 그 처럼 편한 것이 아니였다.

 

atom에도 라이브 미리보기가 가능하다. 바로 atom-live-server 라는 패키지를 설치하면 된다.

 

1. atom-live-server 패키지 설치하기

- ⌘, 하여 Settings 창을 열고 Install을 클릭해서 live만 검색해도 상단에 atom-live-server가 표시된다.

install을 클릭하여 설치한다.

- 설치가 완료 되었으면 atom-live-server의 빈 공간을 클릭해서 패키지 상세 정보를 확인한다.

- 단축키가 ctrl-alt-3 과 같이 되어있다. 변경하고 싶다면, 화면 중앙의 View Code > Keymaps > atom-live-server.json 을 클릭해서 단축키를 변경할 수도 있다.

- atom 재시동 없이 ctrl-alt-3 을 클릭해 보았다. 다음처럼 브라우저로 열린다.

파일을 하나 열어 수정하고 저장하면 내용이 바로 바로 변경된다.

- 만약 ctrl-alt-3 과 같이 클릭해도 아무 변화가 없거나 경고창이 뜬다면, 프로젝트 폴더로 문서를 열지 않아서다.

프로젝트 폴더를 서버 루트로 하기 때문에 문서를 폴더에서 열어서 시작해야 한다.

파일을 열때 파일이 아닌 폴더를 선택해서 열고, 프로젝트 창(⌘ + \  단축키)에서 ctrl-alt-3 클릭하면 된다. 기본 브라우저에 열리게 된다.

 

어도비 브라켓(bracket) 처럼 실시간 미리보기 하는 방법을 atom에서도 atom-live-server 패키지를 설치하여 적용하는 방법을 적었다.