웹 개발자이고 vscode에서 Live Server Extension을 사용하지 않은 경우 개발자입니까? 농담. 그러나 그것이 후드 아래에서 어떻게 작동하는지 생각해 보셨습니까? 오늘의 블로그에서 Golang을 사용하여 실습 구현에서 어떻게 작동하는지 이해해 보겠습니다. 왜 골랑? 글쎄, 나는 요즘 Golang을 탐구하고 있으며 프로젝트를 만드는 것보다 배우는 것이 더 나은 것은 무엇입니까? 따라서 충분한 맥락 (골랑의 것이 아님)을 시작합시다.

라이브 서버는 어떻게 작동합니까?

실시 서버는 HTML, CSS 또는 JS 파일에서 수정을 감지 할 때마다 브라우저를 자동으로 다시로드합니다. HTTP 서버를 통해 이러한 정적 파일을 제공하는 것으로 시작되었습니다. 후드에서는 fsnotify와 같은 파일 감시자 (우리는 프로젝트에 이것을 사용할 것임), fswatch (Unix 기반 파일 시스템) 또는 chokidar (nodejs)를 사용하여 파일 변경을 위해 프로젝트 디렉토리를 지속적으로 모니터링하기 위해 (기본적으로 .html, .css, .js).

핵심에서 (노드 js) 서버와 브라우저 사이에 WebSocket 연결을 사용합니다. 서버가 파일 변경을 감지하면 WebSocket을 통해 Reload 알림을 브라우저로 보냅니다. 브라우저는 차례로 페이지를 다시로드하여 새로운 변경 사항을 반영합니다. 또한 JavaScript 모듈의 CSS 주입 (전체 재 장전없이 스타일 만 업데이트), HMR (핫 모듈 교체)을 사용합니다. 이를 통해 개발자는 코드의 각 변경 후 브라우저를 수동으로 다시로드 할 필요없이 실시간 피드백을 얻을 수 있습니다.

프로젝트 개요

그래서이 프로젝트와 함께, 제 생각은 동일했습니다. 내 목표는 파일 변경 (HTML, CSS 및 JavaScript)을 지켜보고 수정이 감지 될 때마다 브라우저 재 장전을 트리거하는 것이 었습니다. 이를 위해 파일 시스템 이벤트를 효율적으로 모니터링하는 GO의 내장 HTTP 서버 및 FSNOTify 패키지를 사용했습니다.

1. 정적 파일 서빙

첫 번째 단계는 디렉토리에서 정적 파일을 제공하는 간단한 HTTP 서버를 설정하는 것이 었습니다. HTML, CSS 및 JavaScript와 같은 정적 파일은 ./static 폴더에서로드됩니다. 이것은 http.fileserver :
를 사용하여 처리됩니다.

http.Handle("/", http.FileServer(http.Dir("./static")))

2. 다시로드 엔드 포인트

다음으로, 파일 변경이 감지 될 때 클라이언트가 다시로드하도록 통지하는 엔드 포인트가 필요했습니다. /Reload Route는 트리거 역할을하며 서버가 수정을 감지 할 때 브라우저에 "다시로드"메시지를 보냅니다.

http.HandleFunc("/reload", func(w http.ResponseWriter, r *http.Request) {
    



이 경로는 채널의 이벤트에 대해 듣고 나중에 파일 변경 알림으로 채워집니다. 


  
  
  3. 파일 변경을 시청합니다


 나는 fsnotify 패키지를 활용하여 특정 파일 유형 (HTML, CSS 및 JS)의 변경 사항을 추적했습니다. Watcher는 변경 사항을 감지 할 때 모든 수정을 듣고 알림을 새로 고침 채널로 푸시합니다. 



func scanFileChanges() {
    watcher, err := fsnotify.NewWatcher()
    if err != nil {
        log.Fatal(err)
    }
    defer watcher.Close()

    for {
        select {
        case event := 




  
  
  4. 추적 파일 필터링


 모든 파일 변경이 다시로드를 트리거해서는 안된 것은 아니므로 특정 파일 확장자 (.html, .css 및 .js) 만 추적하는 필터를 추가했습니다. 파일 유형을 확인하기 위해 FilePath.ext 함수를 사용하여 수행되었습니다. 



func isTrackedFile(fileName string) bool {
    ext := strings.ToLower(filepath.Ext(fileName))
    return ext == ".html" || ext == ".css" || ext == ".js"
}





  
  
  5. 서버 실행


 마지막으로, 나는 포트 8000에서 듣기 위해 HTTP 서버를 시작하고 파일을 동시에 시청하는 파일을 시작했습니다 : 



log.Println("Starting the server at: 8000")
log.Fatal(http.ListenAndServe(":8000", nil))





  
  
  최종 생각


이 예제는 정적 파일을 다시로드하는 데 중점을두고 있지만, 더 부드러운 통신을위한 WebSocket 지원 추가, 더 나은 파일 처리 및 추적 파일 목록을 확장하는 것과 같은 개선의 여지가 충분합니다. 

 몇 줄의 GO 코드만으로 정적 웹 개발을위한 워크 플로를 개선 할 수 있었으며이 도구를 더욱 세련되기를 기대합니다. 

 코드를 확인하십시오 : Serv-it github