[비주얼 스튜디오 코드(Visual Studio Code)] live server

에디터/비주얼 스튜디오 코드(Visual Studio Code) 2017. 9. 22. 13:04

728x90
반응형

vscode 도 live. server 기능을 사용할 수 있습니다.

동일한 기능을 하는 다른 에디터의 패키지

아톰 : http://recoveryman.tistory.com/302

브라켓 : http://recoveryman.tistory.com/139

웹스톰 : http://recoveryman.tistory.com/359


live server 패키지는 에디터 에서 저장을 하는 즉시 브라우저에 반영이 됩니다

아래 GIF 처럼 사용합니다.





설치 : 컨트롤 + 쉬프트 + X -> 좌측 상단 검색창에 live server 검색 Live Server 설치 클릭





설치가 되었으면 버튼이 '다시 로드' 로 바뀜니다. 다시 로드를 클릭해 줍니다.





창을 다시 로드하겠냐고 뜨는데 해줍니다. 그래야 제대로 적용이 됩니다.





단축키는 Alt + L 을 먼저 누른뒤 O 를 눌러주면 웹서버가 동작중인 브라우저 창이 열립니다. 현재 보고 계신 페이지가 열립니다.

문서를 수정하고 난 뒤 저장하면 브라우저창에 수정된 내용이 반영되어 있습니다.


반응형

댓글 21

  • 초보자 (2018.08.22 17:16)

    live server를 실행시키면 오른쪽 하단에 open a folder or workspace 가 뜨면서 안되는데 이건 어떻게 해결해야할까요?

    • 회복맨 (2018.08.22 17:24 신고)

      안녕하세요 방문해 주셔서 감사합니다.
      질문자 님의 작업 환경을 제가 잘 몰라서 현재 페이지의 스크린샷 등을 첨부해서 문의 주시면 확인해 보겠습니다.

      mahan89@daum.net

    • 초보자 (2018.08.22 17:35)

      이메일 보냈습니다 확인 부탁드릴게요!

    • 회복맨 (2018.08.22 17:47 신고)

      HTML 파일을 안만드신거 같아요.
      독타입 선언하고 기본 HTML 뼈대 만들고 H1 태그 한번 써보시고 꼭 '저장' 한번 해주시고 테스트 한번 해보세요

    • 회복맨 (2018.08.22 17:48 신고)

      때에 따라선 프로그램을 종료 후 다시 실행시켜서 해야할 수 있습니다.

  • kyenwon (2019.05.06 21:48)

    liver server 단축키 눌러서 실행하면 explore 창이 기본으로 나오던데요, 혹시 크롬으로 기본설정 변경할 수 있는 방법이 없을까요?

    • 회복맨 (2019.05.06 22:54 신고)

      https://support.google.com/chrome/answer/95417?co=GENIE.Platform%3DDesktop&hl=ko

      이거대로 따라 하시고 실행하시면 됩니다.

      이 패키지는 자신의 컴퓨터에 설정 되어 있는 기본 브라우저를 따라 갑니다.
      질문자 님께선 IE브라우저를 기본 브라우저로 설정했기 때문에 그렇게 사용이 된듯 합니다.

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

  • 자바스크립트 왕초보 (2019.07.08 14:36)

    안녕하세요?
    초면에 염치불구하고 질문을 하나 드립니다.
    비주얼스튜디오코드에서 live server를 실행시키면 메일로 보낸 화면이 뜹니다.
    node.js도 설치했고 .NetFramework의 버전도 4.7이상인것을 regedit에서 확인했습니다.

    몇일째 고생하고 있는데... 이유를 모르겠네요. 참고로 집의 PC에서는 5501포트로 연결이 되어서 라이브 서버가 잘 수행됩니다만
    지금 글을 작성하고 있는 노트북(IBM요가)에서는 메일로 보내드린 에러가 뜹니다.

    혹시 원인을 알고 계시다면 답신을 주시면 정말 감사하겠습니다.
    참고로 기본 브라우저는 크롬으로 설정해놓은 상태입니다.


    mahan89@daum.net 메일로 에러화면을 보내드립니다.
    여기에 바로 붙여넣으려 했으나 잘 안되네요.. --;;
    번거로우시겠지만 메일로 답신을 부탁드릴께요..

    • 회복맨 (2019.07.10 14:42 신고)

      저도 처음보는 증상이네요. ㄷㄷ

      브라우저 주소창에
      localhost:5500
      이렇게만 쳐서 어떤 화면이 나오는 지도 볼 수 있을까요?

  • domie (2019.07.25 09:56)

    좋은 정보 감사합니다.

  • (2019.09.19 17:25)

    비밀댓글입니다

  • 이쁜놈 (2019.09.19 17:28)

    초면에 도움을 청합니다.
    live server 기능이 확장자가 html 파일인 경우에는 잘 되는데
    확장자가 php 파일인 경우에는 안되던데 작동하게 하는 방법은 없나요
    답변 부탁드립니다.

    • 회복맨 (2019.09.20 13:21 신고)

      음 이건 저는 PHP 를 라이브 서버 로 돌려본 적은 없어서 확답이 어렵네요.

      다만 조금 다른 방법으로 xampp 같은 프로그램이 차선책 일듯 합니다.

      또, vscode 에 이런 확장 기능이 있는데요
      https://marketplace.visualstudio.com/items?itemName=brapifra.phpserver
      저는 사용해 보진 않았지만 설치하셔서 사용 해 보셔도 될꺼 같습니다.

  • 물레방아토끼 (2019.12.16 00:36 신고)

    안녕하세요 저도 초면에
    질문좀 드려도 될까요ㅠㅠ
    저도 비주얼스튜디어 코드 Live Server 설치 하여
    실행했음에도 불구하고ㅠㅠ 계속 해서 실행이 안되는데
    이유가 뭔지 몰라서...다른 포스팅도 검색해보고 찾아봐도
    해답이 안나와서 질문드려요ㅠㅠㅠㅠㅠ
    삭제하고 다시 해보고 컴퓨터 다시껏다켜도 그러거든요ㅠㅠ
    답변주시면 감사하겠습니다

    • 회복맨 (2019.12.16 00:49 신고)

      일단 질문하신 분과 저의 셋팅에 차이가 있을 수 있어서 제가 한 부분을 우선 알려 드리겠습니다.

      1. node js 를 설치

      보통 이런 에디터의 라이브러리는 node js를 의존하는 경우가 많습니다.
      웹프론트 개발 또는 웹퍼블리셔 라면 자신의 개발 환경을 위해 거의 필수 적으로 설치해야 하는 부분이기도 하죠.

      2. 저장

      뜬금 없을 수 있는데 보통 처음 웹 퍼블리셔를 하시는 분이라면 이런 글을 보고 파일을 저장 안하고 실행 시켜 보는 경우가 종종 발생하는 듯 합니다.
      반드시 저장을 해주셔야 합니다.

      3. HTML 파일인지 확인

      라이브 서버는 HTML 파일을 웹 브라우저로 확인할 수 있는 패키지 입니다.
      좀 더 정확히 말씀 드리자면 node 모듈을 의존하여 HTML 파일에 변화가 있을 경우 파일의 변화를 감지해 웹 브라우저에 자동 새로고침으로 반영시켜주지요.
      여기서 중요한건 '반드시 HTML 파일' 인지 입니다. PHP, ASP 또는 기타 등등의 다른 파일들은 안되요.

      4. 우측 파일 리스트에 내가 열고자 하는 파일이 보이는지

      스크린샷을 자세히 보시면
      TEST 라는 뭔가가 에디터의 우측에 자리하고 있습니다. 그 TEST 는 폴더 입니다.
      그 안에 있는 test.html 파일을 열었죠.
      '내가 웹서버로 열고자 하는 파일이 우측 파일 및 폴더 리스트에 보이는지' 확인이 필요한듯 합니다.


      제가 알려드린 방법으로 해결이 안될 수 있으니 그럴 경우 어떠한 오류 메시지 라던지 내가 무엇을 어떻게 했는지 자세히 알려주시면 저 또는 이 블로그를 방문해 주시는 다른 답변자 분들이 도움을 드릴 수 있을듯 합니다.

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

    • 물레방아토끼 (2019.12.16 00:52 신고)

      우와..늦은시간에 긴 답변 정말 감사합니다ㅠㅠㅠ에공 회복맨님이 알려주신대로 순서대로 다 해보도록 할게요
      2번3번은 맞는데 1번4번은 시도해보록 하겠습니다 ㅠㅠㅠㅠㅠㅠ
      넘 친절하게 말해주셔서 정말감사합니다

    • 물레방아토끼 (2019.12.16 23:51 신고)

      회복맨님 알려주신데로
      node js 를 설치도 해보고
      다시 저장도해보고
      TEST는 무슨말인지 사실 모르겠고,,
      음 여튼 다해봤는데 안되서
      Live server를 설치를 다시 했는데
      알림에 확장 Live server이가
      마지막 작업을 완료하는데 시간이 매우
      오래 걸렸으므로 다른 확장이 실행되지 못했습니다 라고 떴거든요?ㅠㅠ
      그래서 확장을 눌렀더니
      성능문제라고 나오는데...;;;;
      제컴퓨터가 문제가 있는걸까요?

    • 회복맨 (2019.12.16 23:54 신고)

      제가 볼땐 C드라이브를 통째로 넣으신거 같은데... 이런 작업에 성능을 크게 탈리는 없어 보입니다.

      우선 현재 에디터의 상황을 스크린샷으로 찍어서
      mahan89@daum.net
      으로 보내주세요~

    • 물레방아토끼 (2019.12.17 00:04 신고)

      흑흑!!
      이메일 보냈습니다!

    • 회복맨 (2019.12.17 00:17 신고)

      답변 메일 드렸습니다.
      4번을 안하셨더군요 ㄷㄷ;;
      첨부 파일과 함께 메일 드렸습니다~

      4. 우측 파일 리스트에 내가 열고자 하는 파일이 보이는지

      스크린샷을 자세히 보시면
      TEST 라는 뭔가가 에디터의 우측에 자리하고 있습니다. 그 TEST 는 폴더 입니다.
      그 안에 있는 test.html 파일을 열었죠.
      '내가 웹서버로 열고자 하는 파일이 우측 파일 및 폴더 리스트에 보이는지' 확인이 필요한듯 합니다.

    • (2019.12.17 00:24)

      비밀댓글입니다