[아톰(Atom)/패키지] atom-live-server (실시간 미리보기) - 회복맨 블로그

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

에디터/아톰(Atom) 2016. 12. 10. 22:02

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

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

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

바로 이렇게요.






설치



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개발용으로 사용되는 웹서버가 아닙니다.

댓글 13

  • boky (2016.12.16 10:25)

    단축키 컨트롤 + 쉬프트 + 3 눌렀는데 창은 뜨는데 실시간으로 적용되지가 않네요 ㅠㅠ
    삭제 후 다시한번 해봐야 될거같아요

    • 회복맨 (2016.12.16 10:48 신고)

      파일을 수정후 저장을 하셔야해요.
      오류 같은걸 아직 보진 못했는데 동영상 찍어서 mahan89@daum.net 으로 보내주시면 제가 확인 후 회신 드릴께요.

  • 걱정하지않는자 (2017.04.01 12:24)

    이 세계에 입문한 초보입니다. 웹퍼블리셔+웹디자인쪽 입니다.. 에디터 결정장애 걸렸는데... 가장 추천해주실 에디터 부탁 드립니다...

    • 회복맨 (2017.04.01 12:36 신고)

      방문해 주셔서 감사합니다 :)
      에디터는 이것저것 써보시는걸 추천드립니다. 본인의 상황에 따라 사용하게 되는 에디터도 달라질 수 있기 때문에.. ㅠㅠ

      저는 그래도 추천한다면 서브라임을 쓰는걸 추천합니다만, 회사에서 직장에서 서브라임을 써도 된다 고는 말씀 못드립니다.
      에디터를 정해주는 회사도 있어서 여러가지 에디터를 다 사용할줄 안다면 어떤 회사에 가서든 유연하게 대처할 수 있을꺼예요.

    • 걱정안하는자 (2017.04.02 12:00)

      아 그렇군요 답변 정말 감사합니다.

  • 지지요맨 (2017.11.29 15:49)

    단축키가 여러개인 이유는 뭐죠??

    • 회복맨 (2017.11.29 15:53 신고)

      뒤에 숫자 3000 4000 이런식으로 올라가시는게 보이실 꺼예요.
      뒤에있는건 포트번호 라고 하는건데
      그 포트번호를 바꿔서 웹서버를 동작시켜야 하는 상황도 있습니다.

      방문해 주셔서 감사합니다~

  • (2018.08.31 01:03)

    비밀댓글입니다

    • 회복맨 (2018.08.31 09:42 신고)

      안녕하세요. 방문해 주셔서 감사합니다. ^^

      에러 문의에 대한 글은 전체공개로 설정해 주시기 바랍니다.
      질문해 주신 분과 같은 고민을 다른 사람들도 할 수 있고 이런 문제를 해결해 나가다 보면 코딩을 업으로하는 직군의 퀄리티가 향상되기 때문입니다.

      또한 답변의 내용은 개인 또는 단체에 메일을 보내지 않고
      http://recoveryman.tistory.com/302
      해당하는 게시물의 본문에 남기는걸 원칙으로 합니다. 따라서 저는 해당 답변을 개인적으로 메일 보내지 않습니다.

      현재 어떤식으로 키를 눌렀기에 오류가 발생했는지 정확하게 파악하려면 kaich 님의 현재 에디터의 상태를 스크린샷 직어서
      mahan89@daum.net
      으로 보내주세요.
      제가 해결이 가능한 부분이면 도와드리겠습니다.

      See Console for more info.
      이 말의 뜻은 자세한 내용은 콘솔을 확인해 보라는 뜻입니다.
      이거 가지곤 무슨 문제가 있는지 저는 알지 못하기 때문입니다.

  • Roid (2018.12.14 16:47)

    위의 플러그인을 사용해봤는데.. 브라켓과 다른 점은.. 브라켓은 지금 편집중인 html 파일을 기준으로 내장된 nodejs(?)를 이용해서 보여주는데..
    아톰은 그냥 서버 root 기준의 index.html을 기준으로 말 그대로 일반적으로 아파치 설치하고 돌리는 기준으로 보여주더군여.
    라이브 반영 자체가 아파치 올려두고 보는 것 안하고 폴더 구조 깨지 않으면서 기존 리소스들 사용하면서 할려고 하는 것이라서
    뭔가 아톰의 해당 플러그인만으로는 부족하다는 느낌이 들었네요.

  • 우지 (2019.11.21 15:41)

    좌측 폴더 리스트에 열려고 하는 페이지의 폴더가 등록되어 있어야 합니다.

    이게 무슨 뜻인가요? 현재 지정된 서버 폴더를 바꿀수도있나요??

    • 회복맨 (2019.11.22 01:55 신고)

      좌측 폴더 리스트에 열려고 하는 페이지의 폴더가 등록 되어 있어야 한다는 뜻은 예를들어,

      A 라는 폴더가 있다고 가정합니다.
      그 A 라는 폴더에는 작업중인 Main.html 이 있습니다.
      가시적으로는 이런 느낌이겠네요.

      A (폴더)
      └ Main.html

      여기서 Main.html 을 해당 글에 나와있는 아톰라이브서버 패키지로 열려고 할때 Main.html 이 들어있는 A라는 폴더를 드래그 또는 아톰에서 open 을 활용해서 에디터에 등록시켜 주어야 합니다.

      스샷 찍어논 부분에는 이 부분이 어디에 있냐면 1,2,3,4번 의 스샷에 있습니다.
      자세히 보시면 좌측에
      test03 이라는 게 보일꺼예요.
      저 test03 은 폴더 입니다.
      저런식으로 폴더를 에디터에 등록시켜 주는 작업을 말합니다.

      ---------------------------------------

      현재 지정된 서버 폴더를 바꿀 수 있나요??

      이 질문에 대한 답변으로는 바꿀 수 있습니다. 라고 답변 드리겠습니다.
      다만, 조건이 있습니다.

      좌측에 등록된 폴더 기준이라는 조건입니다. 에디터에서 맨 처음 눈으로 보여지는 폴더 입니다.

      가시적으로 예를 들어 보겠습니다.

      A (폴더)
      └ Main.html
      └ B (폴더) <- 바꾸고 싶은 서버 폴더
       └ RealMain.html

      로 가정을 한다고 칩시다.
      그럼 맨위 답변 기준으로 B 폴더를 아톰 에디터에 드래그 또는 open 을 이용해서 좌측에 등록 시켜 줍니다.

      경우를 바꿔 볼까요? 저 경우는 A 폴더안에 B가 있다는 가정이였습니다. 이번엔 A와 B 폴더가 같은 경로 안에 있는 상황 입니다.

      A (폴더)
      └ Main.html
      B (폴더) <- 바꾸고 싶은 서버 폴더
      └ RealMain.html

      여기서 보이는 부분은 A폴더와 B 폴더가 같은 레벨입니다.
      B 폴더가 A폴더의 하위에 자리하고 있지 않습니다.

      하지만 방법은 똑같습니다.
      B 폴더를 드래그 또는 아톰에디터의 open 을 이용해서 좌측에 등록 시켜주면 됩니다.

      방문해 주셔서 감사합니다 :D

  • mins (2020.01.11 05:27)

    저는 윈도우 사용자이고 어제 처음 아톰을 접해봤는데요

    (폴더)
    └ A.html

    파일열기 선택후 A.html을 선택하면 좌측에 하얀창이 생성된다는데 저는 안 생깁니다

    A : hello web이라고 타자 후

    폴더안에 A를 클릭하면 hello web이라고 뜨긴뜨는데요
    제가 윈도우10을 막 업데이트를 했고 연결프로그램으로 인터넷익스플로러를 선택했는데 여기서 메모장을 선택했어야할까요?

    동영상 문의 메일은 따로 드릴께요
    감사합니다