맥북에 세팅해둔 Github pages Jekyll blog의 Livereload 기능이 동작하지 않는 문제가 발생했다.
도대체 왜? 물론 만들어놓고 반 년 동안 방치하긴 했지만, 이런 오류가 발생할 만한 수정 또한 하지 않았다.
더욱이 짜증나는 것은 Jekyll은 Ruby 언어로 구동되는데 난 Ruby에 대해 전혀 모른다. 그래서 이 오류를 어떻게 접근해서 해결해야할지 막막했다. 결국은 무작정 부딪힌 끝에 정확한 원인을 찾아내었음. 만약 당신이 나와 같은 환경에서 같은 증상을 겪고 있다면 본 게시물에서 제시하는 해결책을 시도해볼 가치가 있으리라.
나의 환경
| 소프트웨어 | 버전 정보 |
|---|---|
| MacOS | Ventura 13.4 |
| ruby | 3.1.3 |
| bundler | 2.4.14 |
| jekyll | 4.3.2 |
| gem | 3.3.26 |
Livereload, 너 외 않되?
첫 번째로 시도해본 것은 Jekyll의 의존성 요소 들을 싹 지우고 재설치하는 것이다.
그리고 가장 우매한 행동이었음에도 혹시나하는 기대감에 2번이나 재설치를 시도했다. 당신 스스로 아무것도 건들지 않았다며.. 의존성 요소들이 문제 생길게 뭐가 있음?
즉, ruby를 비롯해서 Jekyll과 의존성 요소들은 아무런 문제 없이 내 로컬 환경에 제대로 설치되어 있다.
그럼 도대체 뭐가 문제임? 몇가지 가설을 세워보았다.
가설1. Livereload가 브라우저와 웹 소켓 통신을 제대로 못하고 있을 것이다.
Livereload는 OS로부터 파일 변경 이벤트를 받아서 웹 소켓 통신으로 브라우저를 새로고침하는 메커니즘으로 동작한다. 그렇다면 브라우저와의 웹 소켓 통신이 제대로 이루어지지 않고 있는 것은 아닐까? 이를 간단히 테스트해볼 방법이 있다.
첫 번째로 Jekyll을 Livereload 옵션으로 구동할 경우 브라우저 연결 시 관련 로그가 출력된다.
터미널에서 아래와 같은 명령어를 입력하고 브라우저에서 127.0.0.1:4000 주소로 접속하여 Jekyll이 브라우저 연결을 감지하는지 확인해보자
1
bundle exec jekyll serve --livereload
위 이미지처럼 LiveReload : Browser connected 라는 로그가 출력된다면 Jekyll이 브라우저와 웹 소켓 통신까지는 제대로 동작하고 있는 것이다. 나는 위와 같이 브라우저 연결을 정상적으로 감지하면서도 사이트를 수정했을 때 수정사항을 실시간으로 반영하지는 못하는 상황을 겪었다.
두번째로 브라우저의 개발자 도구에서 Network 탭에 livereload 파일을 확인한다.
Network 탭에서 WS 항목을 확인해보면 위와 같이 liverload 관련 파일이 송수신되고 있음을 알 수 있다.
결론적으로 Livereload의 웹 소켓 통신이 내부적으로 어떻게 동작하는지는 모르겠지만, 위와 같은 상황을 종합해보았을 때 웹 소켓 통신이 동작하고 있음을 짐작할 수 있다. 물론, 겉보기에만 동작하는 것처럼 보일 수도 있으나 그런 복잡한 상황은 우선 고려하지 않는다.
만약 당신의 문제가 브라우저 접속 감지조차도 못하고 있는 상황이라면 이 글이 줄 수 있는 도움은 없다.
가설2. Livereload가 파일 변경 이벤트를 감지 못하고 있을 것이다.
Livereload가 OS로부터 파일 변경 이벤트를 감지할 수 있는지를 테스트해보자. 아래는 Livereload 기능 중 파일 변경 이벤트를 감지하는 rb-fsevent 가 제대로 동작하는지 확인하는 스크립트다.
1
2
3
4
5
6
require 'rb-fsevent'
fsevent = FSEvent.new
fsevent.watch Dir.pwd do |directories|
puts "Detected change in: #{directories}"
end
fsevent.run
위 스크립트를 test.rb 라는 파일로 저장해서 터미널에서 ruby test.rb 명령어로 파일을 실행해보자. 그리고 동일한 디렉토리에서 아무런 새 파일을 생성해보자. 파일 변경이 감지되어 터미널에 출력되면 rb-fsevent는 제대로 작동하는 것이다.
만약 오류가 발생한다면 rb-fsevent를 재설치해보자.
1
2
gem uninstall rb-fsevent
gem install rb-fsevent
나의 환경에서는 rb-fsevent 역시 제대로 동작하였다. 가설2 역시 문제의 원인은 아니었음.
가설3. Jekyll 블로그가 속한 디렉토리에 모종의 문제가 있을 것이다.
가설1, 가설2의 검증을 거쳐오면서 Jekyll과 Ruby에는 문제가 없다 라는 결론을 내렸다. 이 과정에서 힌트를 얻을 수 있었는데, 가설2를 검증할 때 Jekyll이 설치된 디렉토리와 다른 디렉토리에서 각각 테스트를 해보았을 때 Jekyll이 설치된 디렉토리에서만 동작하지 않았다는 것임. 그래서 무식한 방법으로 추가 테스트를 시도해보았다.
Jekyll이 설치된 디렉토리를 통째로 한 단계씩 상위 디렉토리로 옮긴다. 매 단계마다 Livereload 기능을 테스트한다.
그 결과 특정 단계의 디렉토리의 상위로 이동하자 갑자기 Livereload 기능이 정상적으로 동작하기 시작했다.
원인은 바로 문제의 디렉토리 이름이 한글이었기 때문이다.
마치며
예로부터 디렉토리 명이나 파일 명은 한글로 짓지 말라던 이유를 몸소 체감할 수 있는 계기였다. 전혀 접점이 없던 분야의 문제 상황이었지만, 늘 그렇듯 개발자에게 문제 해결이란 매번 새롭고 흥미로운 일이다.
다들 디렉토리나 파일 명에 한글 사용하지 마시오..