[비주얼 스튜디오 코드(Visual Studio Code)] Preview on Web Server

이 패키지는 이전에 소개해 드린 live server 와 매우 유사합니다. 다만 이걸 쓰는 이유는 live server 보다 좀 더 빠르고 안정적 입니다.

웹서버를 열어서 웹페이지를 서버가 동작하는 환경에서 보여주는 건데요. 장단점이 있습니다.

장점은 별도의 웹서버(IIS, Apache)를 설치할 필요없습니다. 또한 앞서 말씀해 드린 live server 보다 좀 더 빠른거 같습니다. 제가 테스트를 해봤는데 열리는 시간 새로고침 속도 모든 면에서 빠르다는걸 느꼈습니다.

단점은 이 에디터를 이용해서 웹서버를 열 경우 장시간 미 사용시 웹서버가 저절로 닫힙니다. 다시 에디터로 돌아가서 단축키를 눌러줘야 합니다. 또 프로젝트의 루트 폴더가 필요하다면 반드시 최상위 폴더를 넣어줘야만 합니다. 작업하고자 하는 폴더가 있는데 이게 루트 폴더에서 뭔가 상속받아 사용하는 폴더다 싶은건 그냥 루트폴더 자체를 넣어줘야 합니다.

비슷한 기능을 하는 다른 에디터의 패키지

서브라임텍스트: http://recoveryman.tistory.com/245

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

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

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

좌측의 네모 버튼을 눌러 패키지를 검색할 수 있습니다.

Preview on Web Server 를 검색해서 설치를 진행합니다.

설치가 완료되면 다시 로드 를 눌러 줍니다.

이제 프로젝트의 루트 가 되는 경로를 에디터에서 열어줄 건데요.

좌측 상단의 파일 -> 폴더 열기 를 눌러 줍니다.

이렇게 폴더 열기 창이 뜰 텐데 저는 D 드라이브 자체를 루트 경로로 잡았습니다.

저는 이런 환경에서 쓰고 있기 때문인데 여러분은 필요한 입맛대로 셋팅을 하시길 바랍니다.

적당히 웹 페이지를 만들어 본 후 에디터에서

컨트롤 + 쉬프트 + L 을 누르면 기본 브라우저로 설정되어 있는 웹브라우저가 열리면서 자체 웹서버를 가동시켜 웹페이지를 보여줍니다.

다만 사용자에 따라 설치 후 바로 진행이 안될 수 있고 프로그램 또는 OS를 재부팅 후 적용이 될 수 있으니 참고 바랍니다.