간단한 로컬 서버를 설정하는 방법

Javascript를 사용한 홈페이지 제작 등을 하고 있을 때, 조금 동작을 확인하려고 브라우저에서 파일을 직접 열었을 경우(URL이 file://~ 의 경우 등), JS가 동작하지 않는 때가 있습니다.
이것은 동일성 정책이라고 하는 제약을 받기 때문입니다만, 저를 포함한 많은 프로그래밍 초보자는 이때 처음으로 동일성 정책에 대해 알겠다고 생각하기 때문에, 이 장면에 직면했을 때의 「그럼 결국 어떻게 하면 동작 확인할 수 있도록 되는 거야?」에 대해 소개합니다.

어디까지나, 초보자에 대한 동작 확인을 하기 위한 소개이며, 동일성 정책 및 CORS에 대한 설명은 거의 하지 않습니다. (알고 싶은 사람은 각자 조사해 주세요.)

대상이 아닌 사람

Apache나 nginx를 스스로 설정할 수 있는 사람

솔루션 절차

해결 방법은 두 가지가 있습니다.
1. VSCode의 "Live Server"확장 기능 사용
2. python3을 사용하여 터미널에서 python -m http.server 사용
여기서 파이썬 3은 현재 파이썬 표준이 파이썬 3이기 때문에 특별한 이유는 없습니다. python2를 사용하는 사람은 가정하지 않습니다.

해결책 1에 대하여

이것이 가장 간단하다고 생각합니다. 저도 평소에는 VSCode에서 프로그램을 쓰는 경우가 많기 때문에 차차와 확인하고 싶을 때는 이것을 사용할 때가 있습니다.

1단계(설치)

VSCode가 설치된 상태라고 가정합니다.
(설치하지 않은 사람은 여기 (VSCode의 공식 사이트) 보다 자신의 OS에 있던 타입을 설치해 주세요.)

설치가 완료되면 VSCode 확장 프로그램에서 "Live Server"를 검색하여 설치

시작 방법

설치 후 VSCode를 다시 시작하고 오른쪽 하단의 "Go Live"를 클릭하면 자동으로 기본 브라우저가 시작되고 표시됩니다.



또한 한 번 닫아 버려도 http://127.0.0.1:5500/ (기본 포트는 5500번)

덧붙여서, 이때 최초로 표시되는 것은, VSCode로 열려 있는 디렉토리입니다.http://localhost:5500/ 가 있으면 index.html 가 없으면 디렉토리 내용이 표시됩니다.

솔루션 2 정보

Mac, Linux 등의 Unix 계열 OS를 사용하는 사람이라면 python3은 표준으로 설치되어 있다고 생각하므로 터미널에서

$ python3 -m http.server

를 입력하면 터미널의 현재 디렉토리에 해당하는 위치가 열리고 로컬 서버가 시작됩니다.
간단히 설명하면 플래그 index.html는 모듈 사용을 의미하므로 http 패키지의 server 모듈을 사용한다는 의미입니다. (잘못되면 미안해.)

Python2 시스템, WindowsOS를 사용하는 경우,
Homebrew 혹은 공식 사이트(여기) 보다 인스톨 해 와 상기의 커멘드를 실행하는 것으로 로컬 서버가 서 있습니다.

끝에

좋은 로컬 서버 생활을! (웃음)