[아톰(Atom)/패키지] atom-live-server (실시간 미리보기)

아톰의 실시간 미리보기 입니다.

브라켓에서 같은 확장 기능을 포스팅 했었던 적이 있었죠.

아톰도 똑같은 기능을 사용하실 수 있습니다.

바로 이렇게요.

설치

1. 패키지 설치의 기본이죠.

윈도우 : 컨트롤 + 쉬프트 + P 입력 후 install 입력하면 나오는 창에서 Install Packges And Themes 선택

맥 : 커맨드 + 쉬프트 + P 입력 후 install 입력하면 나오는 창에서 Install Packges And Themes 선택

2. 그렇게 입력해서 나오는 창에서 live server 를 검색하면 두번째에 atom-live-server 라고 뜹니다. install 합니다.

3. 설치가 완료되면 단축키 확인을 위해 다음과 같이 빈 공간을 클릭해 봅니다.

4. 다음과 같은 창이 나오면 View Code 를 눌러 패키지 내부를 확인할 수 있습니다.

5. 좌측에 keymaps -> atom-live-server.cson 을 눌러서 파일을 열어봅니다.

그러면 다음과 같은 창이 뜨는데 단축키를 확인하고 사용할 수 있습니다. (현재는 겹치는 패키지가 없어서 저는 그냥 그대로 사용하려 합니다.)

6. 그리고 나서 html 페이지로 돌아가서 위 단축키를 눌러서 작업한 페이지를 확인하면 인터넷 브라우저가 뜨는데요.

보안경고 기능차단 메시지가 뜨는데 액세스 허용을 눌러주면 바로 맨 위의 사진처럼 사용하실 수 있습니다.

사용 방법은.

1. HTML 파일에서 컨트롤 + 3

2. 이 후 HTML 파일에서 수정 후 저장 -> 저장하는 순간 열린 브라우저도 리로드 됩니다. (개인마다 딜레이가 있을 수 있습니다.)

3. 서브 페이지(다른 폴더일 경우) 에서 단축키를 눌러도 열리는건 index.html 이 열립니다. 열린 브라우저에서 경로를 잘 작성해 주시면 됩니다.

4. 반드시 좌측 폴더 리스트에 열려고 하는 페이지의 폴더가 등록되어 있어야 합니다. 제일 중요한 부분입니다.

/* ------------------------------------------------------------------------------- */

// 180831 오류 문의에 대한 답변입니다.

우선 이런 질문 하나가 올라왔었습니다.

우선 제 글을 보시면 HTML 기준으로 작성이 되어있다는걸 확인하실 수 있습니다.

그래서 우선 확인시 되어야 할게 문서의 종류 입니다.

질문자님의 메일을 확인해 본 결과 PHP 로 작성된 문서였다는걸 알 수 있었습니다.

대략 이런 내용의 오류죠.

우선 PHP 를 사용중이시거나 사용해보셨더라면 어떤게 필요한지 대략 아실거예요.

바로 아파치 웹서버 입니다.

아파치 웹서버는 어떠한 설정 파일이 있습니다. 매우 중요한 설정 파일 이죠.

바로 httpd.conf 이죠. 그리고 php 를 설치하셨다면 또다른 설정 파일중 하나인 php.ini 가 있습니다.

이 글에서 소개되어 있는 라이브 웹서버는 저런 설정 파일이 존재하지 않습니다.

고로 php 를 돌린다면 에러가 날 수 밖에 없는 환경과 상황이 만들어 집니다.

해결방법이 있을까요?)

라이브 서버로는 해결방법이 없습니다. 차선택 같은것도 없습니다.

원래 하셨던 방법 뿐이 없습니다.

아파치 웹서버를 돌리고 PHP 를 설치하셔야 합니다.

PHP 파일을 에러 없이 잘 돌릴려면 이 글에 소개되어 있는 라이브 서버는 사용하시면 안됩니다.

해당 글에 제시되어 있는 라이브 서버는 웹프론트엔드 개발용 입니다.

PHP개발용으로 사용되는 웹서버가 아닙니다.