웹프로그래밍) Live Server Go live 브라우저가 안 뜨는 이유 (+실시간 html 코딩, VisualStudio code의 확장팩 Live Server 사용하기)

파이썬으로 웹프로그래밍하기의 시작

 파이썬으로 웹프로그래밍을 하기 위해서 요새 html, css, javascript를 공부하고 있다. 파이썬의 여러 패키지들을 통해 데이터를 수집하고, 분석해서 얻은 결과를 웹페이지에 띄우면, 많은 이들과 결과를 공유하 수 있기 때문이다. 웹페이지에 contents를 보기 좋게 구현하기 위해 html, css를 활용하고, 웹페이지에서 사용자와의 상호작용을 위해 javascript로 기능을 코딩한다. 그러면, 파이썬은 어디에 있을까?

 먼저는, 데이터 수집 및 분석하는 파일을 파이썬 코드로 만들 수 있다. 이것은 기존에 계속 연습하고 공부했던 것이라 비교적 친숙하다. 다음은 server단에서 사용할 파이썬의 web application framework인 Django 혹은 Flask를 공부해야 한다. server단은 웹페이지로부터 사용자의 입력값을 받아 파라미터를 만든다. 그리고 이 파라미터를 파이썬 소스코드로 된 함수에 입력하면 분석이 실행된다. 그 분석 결과값은 JSON과 같은 포맷의 데이터로 server에 보내진다. 이 데이터는 서버단의 Django 혹은 Flask를 통해 html단으로 전달되어 화면에 뿌려진다. 여기서 Django 혹은 Flask의 역할은 ASP, JSP, Node.js 등의 역할과 동일하다.

 이 내용은 아래 그림과 같이 간단히 요약할 수 있다.

 

Web programming with python

 

HTML, CSS, JAVASCRIPT with Visual Studio Code + Live Server

 서론이 길었다. 여튼, 위와 같은 연유로 나는 웹프로그래밍 관련 언어들을 공부하고 있다. 웹페이지 자체도 파이썬으로 구현할 수 있다면 좋겠지만, 파이썬 코드를 화면에 뿌려주는 브라우저는 현재 없기 때문이다.

 요새 한창 실습하는 예제는, html로 웹페이지의 기본 프레임을 구성하고, CSS를 통해 화면을 데코레이션하고, Javascript와 관련 라이브러리들(jQuery, Ajax 등)로 각종 함수를 실행하는 코드를 짜는 것이다.

 그런데 Jupyter lab을 통해 코딩 결과를 바로바로 확인할 수 있는 파이썬과는 달리, html들은 코딩을 잘못 짜도 에러표시도 안 뜨고, 그 때 그 때 결과값을 브라우저에 띄워서 확인을 해야 하는 번거로움이 있었다.

 하지만, 역시나 이런 생각을 한 것이 나뿐이 아니었기에 이미 대응할 수 있는 방안이 있었다. 그것은 바로 Live Server 확장팩이다. Visual Studio Code 개발 환경에서 Live Server라는 확장팩을 설치하면 html들 코딩을 하고 저장할 때마다 실시간으로 브라우저에서 코딩 결과를 확인할 수가 있다. html들 코딩을 한다면 꼭 설치하라고 추천하고 싶은 확장팩이다. 설치 방법은 아래와 같다.

Live Server 설치하기

 사용방법은 간단하다. 확장팩을 설치한 후에 Visual Studio Code 화면 오른쪽 하단에 있는 "Go Live" 버튼을 누르거나, html 코드가 있는 화면에서 마우스 오른쪽 버튼을 눌러서 "Open with Live Server" 버튼을 클릭하면 된다. 그러면, 새로운 브라우저가 열리면서 코드들이 실행된 화면이 뜬다. 그 상태에서 코드를 수정하고 Ctrl + S로 저장을 하면, 띄워진 브라우저에 실시간으로 변경된 내용이 적용된다.

 

그런데, Live Server 브라우저가 갑자기 안 뜬다

 한창 잘 사용하던 Live Server가 언젠가부터 잘 안 뜨기 시작했다. 어떤 때는 잘 뜨더니 또 어떤 때는 "Go Live" 버튼을 눌러도 Port:5500 글자만 상태표시줄에 뜨고 브라우저는 뜨지 않았다. 인터넷에 검색해봐도 딱 맞아 떨어지는 해법이 나오지 않았다. Setting이 바뀐 것도 아닌데 도대체 왜 그런 걸까?

 왜 그런지 한동안 의아했는데 나중에 그 이유를 알았다. 이유는 아주 간단했다. html 파일의 파일명에 한글이 섞여 있었기 때문에 Live Server가 브라우저를 띄우지 못했던 것이다. (+ 폴더명이나 파일명에 띄어쓰기가 들어있어도 문제가 된다.) 이것때문에 Visual Studio Code를 몇번이나 껐다 켜고 Setting도 찾아보고, Extension의 Setting도 살펴보고 했는데 원인은 간단했다.

 역시 프로그래밍할 때는 웬만하면 파일명이나 변수명으로 한글을 쓰지 말라는 말이 떠올랐다. 이 말을 다시 한번 리마인드 하는 계기가 되었다.

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."