Golang을 사용하여 간단한 Live Server Extension을 만드는 방법

VSCode의 Live Server 확장 기능을 사용해 본 적이 없는 웹 개발자라면 개발자이신가요? 농담이에요. 하지만 그것이 내부적으로 어떻게 작동하는지 생각해 보셨나요? 오늘 블로그에서는 Golang을 사용하여 실제 구현에서 이것이 어떻게 작동하는지 이해해 보겠습니다. 왜 골랭인가? 글쎄요, 요즘 Golang을 탐색하고 있는데, 프로젝트를 구축하는 것보다 배우기에 더 좋은 것이 무엇일까요? 충분한 컨텍스트( golang의 컨텍스트가 아님)를 시작하겠습니다.

라이브 서버는 어떻게 작동하나요?

따라서 라이브 서버는 html, css 또는 js 파일의 수정 사항을 감지할 때마다 자동으로 브라우저를 다시 로드합니다. HTTP 서버를 통해 이러한 정적 파일을 제공하는 것부터 시작되었습니다. 내부적으로는 fsnotify(우리는 프로젝트에 이것을 사용할 것입니다), fswatch(UNIX 기반 파일 시스템에서) 또는 Chokidar(Nodejs용)와 같은 파일 감시자를 사용하여 프로젝트 디렉터리에서 파일 변경 사항을 지속적으로 모니터링합니다(기본적으로 다음 작업을 수행할 때 확장자가 .html,.css,.js )인 파일을 저장하세요.

핵심에서는 (노드 js) 서버와 브라우저 사이에 WebSocket 연결을 사용합니다. 서버가 파일 변경을 감지하면 WebSocket을 통해 브라우저에 다시 로드 알림을 보냅니다. 그러면 브라우저는 새로운 변경 사항을 반영하기 위해 페이지를 다시 로드합니다. 추가적으로 자바스크립트 모듈에는 CSS 인젝션(전체 리로드 없이 스타일만 업데이트), HMR(핫 모듈 교체)을 사용합니다. 이를 통해 개발자는 코드를 변경할 때마다 브라우저를 수동으로 다시 로드할 필요 없이 실시간 피드백을 받을 수 있습니다.

프로젝트 개요

그래서 이번 프로젝트에서도 제 생각은 같았습니다. 내 목표는 HTML, CSS, JavaScript 등의 파일 변경 사항을 감시하고 수정 사항이 감지될 때마다 브라우저를 다시 로드하는 것이었습니다. 이를 위해 Go에 내장된 HTTP 서버와 파일 시스템 이벤트를 효율적으로 모니터링하는 fsnotify 패키지를 사용했습니다.

1. 정적 파일 제공

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

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

2. 엔드포인트 다시 로드

다음으로, 파일 변경이 감지되면 다시 로드하도록 클라이언트에 알리는 엔드포인트가 필요했습니다. /reload 경로는 서버가 수정 사항을 감지하면 브라우저에 "다시 로드" 메시지를 보내는 트리거 역할을 합니다.

http.HandleFunc("/reload", func(w http.ResponseWriter, r *http.Request) {
    <-reloadChan
    w.Write([]byte("reload"))
})

이 경로는 나중에 파일 변경 알림으로 채워지는 채널의 이벤트를 수신합니다.

3. 파일 변경 사항 보기

fsnotify 패키지를 활용하여 특정 파일 형식(HTML, CSS 및 JS)의 변경 사항을 추적했습니다. 감시자는 수정 사항을 수신하고 변경 사항을 감지하면 다시 로드 채널에 알림을 푸시합니다.

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

    for {
        select {
        case event := <-watcher.Events:
            if event.Op&fsnotify.Write == fsnotify.Write && isTrackedFile(event.Name) {
                log.Println("Modified File:", event.Name)
                reloadChan <- true
            }
        case err := <-watcher.Errors:
            log.Println("Error:", err)
        }
    }
}

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 코드만으로 정적 웹 개발의 워크플로를 개선할 수 있었고, 이 도구를 더욱 개선할 수 있기를 기대합니다.

코드 확인: Serve-it GitHub

위 내용은 Golang을 사용하여 간단한 Live Server Extension을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!