아톰 프리뷰 기능 설치(atom-html-preview)

출처

이번 포스팅은 아톰에서 매번 저장하고 웹브라우저에서 파일열어서 매번 새로고침해야되는게 필자는 너무너무 귀찮았다.

그래서 youtube 생활코딩 CSS에서 코딩하는 장면 도중에 connected  to BrowserSync 라는 글씨가 나오면서

자동으로 싱크되고 웹 브라우저에서는 자동으로 아톰에서 수정한 파일을 바로바로 화면에 보여준다.

아래 영상을 보면서 어떤 기능인지 알아보자.

패키지 이름

atom-html-preview

패키지 설치 방법은 패키지 이름 검색해서 install 하면 끝이므로 따로 언급하지 않는다.

사용방법

아톰에서 ctrl + shift + p 버튼을 누른다.

출처:필자

패키지 특징

패키지를 설치하면 위와 같이 코딩화면을 미리미리 볼 수 있다.

그 외로 web browser sync기능을 이용해서 아톰에서 파일 수정하면 바로바로 볼 수 있는 기능이 있는데

패키지 이름은 atom-live와 remote-sync가 있다.

1. atom-alive

2. remote-sync 

위 기능도 있으니 궁금하면 클릭해서 해당 링크에서 참조하면되겠다.

브라켓것과 웹스톰을 사용하면 위 기능을 기본으로 제공해준다 라는 정보가 있다.

참고 영상을 보고 편한거 사용하면된다.