lite-server, Live-server 라이브러리 분석하기 #99클럽3일차 #TIL

 

 

---

#99클럽 #99일지 #코딩테스트 #개발자스터디 #항해 #TIL

 

✅ VSC의 live-server와 어떤 차이점이 있을까요?

✅ VSC의 live-server

✅ VSC의 live-server 디버깅 기능

✅ lite-server

✅ 요약

✅ 추가적으로 알아보고 싶은 내용

---

이번엔 타입스크립트 개발을 위한 실습환경 구축을 따라가겠습니다. 그런데 강의에선 lite-server 라이브러리를 사용하더군요. 동작과정이 live-server과 굉장히 유사했고 정적 웹사이트 배포에 둘의 차이점이 궁금했습니다. npm trends에 따르면 live-server가 좀 더 다운로드 수가 많습니다.

 

 

 

lite-server를 처음 접했기에 사용법부터 알아보겠습니다. 다음과 같은 방법으로 사용할 수 있습니다.

 

npm init

npm init

package.json 파일을 생성합니다.

 

 

npm install --save-dev

npm install --save-dev lite-server

--save-dev : 개발 의존성으로 추가합니다, 개발용도로 필요한 패키지를 별도로 관리할 수 있습니다.

 

devDependencies는 개발 용도로 필요한 패키지를 모으는 곳으로, 그냥 npm install로 설치시, dependencies 패키지에 들어갑니다. 따라서 실제 배포를 위한 패키지는 npm install로 설치합시다.

 

 

🚀 lite-server : Node.js 기반 경량 웹서버로, html, javascript 변경을 감지하고 socket을 이용하여 css 변경을 주입하는 등 유용한 기능을 제공합니다.

 

{
  "name": "understanding-ts",
  "version": "1.0.0",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "lite-server"
  },
  "author": "Maximilian Schwarzmüller",
  "license": "ISC",
  "devDependencies": {
    "lite-server": "^2.6.1"
  },
  "description": ""
}

 

start 명령어를 통해 npm start를 실행하면 lite-server가 실행됩니다. 프로젝트를 진행하는 내내 변경사항을 바로바로 보고싶다면 이를 적용하면 됩니다.

 

 

 

✅ VSC의 live-server와 어떤 차이점이 있을까요?

 

 

기존에 사용하던 Live-server와 비교해보겠습니다. 둘은 동시에 실행가능합니다. 3000번 포트와 5500 포트를 서로 독립적으로 사용하고 있습니다.  Live Server 와 Lite-server의 차이점을 찾아보기위해 두 공식사이트를 읽어봤습니다. 아무래도 라이브러리의 차이라서 동작원리나 기능적인 차이가 있는지 궁금했습니다.

 

---

✅ VSC의 live-server

빠르고 효율적인 실시간 로드 경험을 제공하는 데 중점을 둔 개발 서버 도구입니다. 파일이 수정될 때마다 브라우저에 다시 로드하므로 변경사항을 즉시 쉽게 확인할 수 있습니다.

 

Live Server - Visual Studio Marketplace

Live Server - Visual Studio Marketplace

 

Live server는 다음과 같은 기능을 제공하고 있습니다.

🚀 Features

A Quick Development Live Server with live browser reload.

실시간 브라우저가 새로고침이 가능한 빠른 개발 실시간 서버

Start or Stop server by a single click from status bar.

상태 바 원터치로 서버 시작 및 중지가능

Open a HTML file to browser from Explorer menu.[Quick Gif Demo].

탐색기 메뉴에서 브라우저로 HTML파일을 열기

이런 기능이?

Support for excluding files for change detection.

변경 탐지를 위한 파일 제외 지원

Hot Key control.

단축키 조합

Customizable Port Number, Server Root, default browser.

포트넘버, 서버루트, 기본 브라우저를 사용자 정의 가능

Support for any browser (Eg: Firefox Nightly) using advance Command Line.

고급 명령줄 라인으로 어떤 브라우저든 지원가능 (예: Firefox Nightly)

Support for Chrome Debugging Attachment (More Info). [Quick Gif Demo].

크롬 디버깅 첨부 파일 지원

Remote Connect through WLAN (E.g.: Connect with mobile) [Need Help? See FAQ Section]

무선랜을 통한 원격 연결 가능 (예: 모바일기기와 연결)

Use preferable host name (localhost or 127.0.0.1).

원하는 호스트이름 사용가능 (localhost 나 127.0.0.1)

Customizable Supporting Tag for Live Reload feature. (Default is Body or head)

사용자 정의 가능한 지원 태그 기능

SVG Support : SVG지원

https Support. : https 지원

Support for proxy. : 프록시 지원

CORS Enabled : CORS 가능

Multi-root workspace supported. : 다중 루트 작업 공간 지원

Support for any file even dynamic pages through Live Server Web Extension.

Live Server Web Extension으로 동적 페이지 및 모든 파일 지원가능

 

---

✅ VSC의 live-server 디버깅 기능

 

다양한 기능을 제공하고 있길래 🚀 크롬디버깅 기능을 사용해보려고 했습니다. request의 종류가 launch, attach 2가지로 나뉘였으며 Gif 파일처럼 Attach를 통해 디버깅을 하고 싶었는데 연결할 수 없는 오류가 발생해서 attach와 launch의 차이점을 알아보며 해결방법을 찾았습니다.

 

 

 

말그대로 VSC상에서 원격 디버깅이 활성화된 상태에서 Chrome을 실행해야하고 정확한 URL을 찾지못해서 발생하는 오류였으며, 경로설정을 해줬습니다. chrome.exe --remote-debugging-port=9222 이 옵션은 추천하지 않는다고 해서 좀 더 간단한 방법을 사용하면서 vscode-chrome-debug를 찾았습니다. 그러나 해결 방법중에서 더이상 사용하지 않는 라이브러리가 있었습니다. Debugger for Chrome 확장 프로그램을 VSC에 설치하고 이과정은 이제 생략할 수 있으며 deprecated 더이상 사용되지 않는 확장프로그램이지만 그래도 사용법을 읽어보겠습니다.

https://github.com/Microsoft/vscode-chrome-debug

GitHub - microsoft/vscode-chrome-debug: Debug your JavaScript code running in Google Chrome from VS Code.

 

Two example launch.json configs with "request": "launch". You must specify either file or url to launch Chrome against a local file or a url. If you use a url, set webRoot to the directory that files are served from. This can be either an absolute path or a path using ${workspaceFolder} (the folder open in Code). webRoot is used to resolve urls (like "http://localhost/app.js") to a file on disk (like /Users/me/project/app.js), so be careful that it's set correctly.

 

 

예전 라이브러리를 뒤로하고 아래 기능을 사용해서 디버깅을 할 수 있습니다! 아래 링크에서 사용법을 발췌했습니다.

https://github.com/microsoft/vscode-js-debug

GitHub - microsoft/vscode-js-debug: A DAP-compatible JavaScript debugger. Used in VS Code, VS, + more

 

🚀 Debug Node.js processes in the terminal

You can debug any Node.js process you run in the terminal with our revamped Auto Attach. If auto attach isn't on, you can run the command Debug: Toggle Auto Attach to turn it on. Next time you run a command like npm start, we'll debug it.

 

url만 맞춰주면 live server 에선 디버그 기능을 제공합니다.

 

중단점마다 페이지가 멈춥니다

 

 

그동안 성능 확인을 위한 네트워크 속도 및 렌더링 속도를 확인 할 수 있는 기능을 찾았는데 프로파일링 기능이 여깄었습니다 ! 추후에 TIL에서 프로파일링 기능을 사용해도 좋겠습니다.

 

 

https://stackoverflow.com/questions/45592581/cannot-debug-in-vs-code-by-attaching-to-chrome

Cannot debug in VS Code by attaching to Chrome

 

 

✅ lite-server

그렇다면 lite-server를 알아보겠습니다. 찾아보니 기능이 서로 비슷하기에 더 편한 방법을 고르면 되겠네요. 큰 차이로는 Live-server는 npm, node, package.json의 의존없이 작동할 수 있습니다. lite-server은 npm start로 시작하기 때문에 의존합니다.

 

정리하면 Lite-server은 개발 워크플로우를 개선하도록 설계된 경량 개발 서버입니다. BroswerSync을 기반으로, 자동 브라우저 새로 고침, 다중 장치 테스트 및 여러 브라우저간 동기화된 작업을 기능을 제공합니다. 또한 Lite-server는 Gulp와 Grunt 작업 실행기를 지원합니다.

 

 

---

✅ 요약

마무리로 Lite-server와 Live-server의 특징을 표로 정리하겠습니다.

	Lite-server	Live-server
기반	BrowerSync 프로젝트
주요기능	자동 브라우저 새로고침 다중 장치 테스팅 다양한 브라우저 동기화 작업 지원	단순한 명령줄 도구 HTML, CSS, JavaScript 파일 제공 및 파일 수정 시 자동 브라우저 새로고침
추가 기능	URL 재작성 HTML 및 CSS 주입 기능 제공	주로 라이브-리로딩에 초점을 맞추고 있어 추가기능을 제공하지 않음
설치요구사항	Node.js와 NPM 필요	Node.js NPM없어도 npm 명령 전역 설치
구성	bs-config.js 파일을 통해 서버 및 동작 사용자 정의 기능	구성 파일 없이 현재 디렉토리를 제공하기 위한 합리적인 기본값 사용

 

 

---

✅ 추가적으로 알아보고 싶은 내용

 

http-server이 가장 대중적인 배포방법인가 봅니다. http-server에 대해서 좀 더 조사해보고 3가지의 라이브러리의 깃허브 코드를 조금씩 분석해보고 싶습니다.

 

---

참고 자료

https://engkimbs.tistory.com/entry/npm%EA%B3%BC-lite-server%EB%A1%9C-HTML-CSS-%EC%8B%A4%EC%8A%B5%EA%B4%80%EA%B2%BD-%EB%A7%8C%EB%93%A4%EA%B8%B0

https://velog.io/@vekkary/-save-dev-%EC%98%B5%EC%85%98%EC%9D%98-%EC%9D%98%EB%AF%B8 https://stackoverflow.com/questions/45592581/cannot-debug-in-vs-code-by-attaching-to-chrome

https://stackshare.io/stackups/npm-lite-server-vs-npm-live-server