라이브 서버 테스트

# Live Server 설치 VS Code에서 Live Server라는 익스텐션을 설치해 보겠습니다. 웹 브라우저로 파일을 여는 방식이 아니라 실제 웹 서버처럼 HTML 파일을 돌려 주는 프로그램인데요. VS Code 왼쪽 메뉴에 있는 익스텐션 아이콘을 클릭하고 'live server'를 검색한 다음 "Install"을 눌러서 설치를 진행하시면 됩니다. ![l2pbqzi4r-image.png](https://codeit-assets.s3.ap-northeast-2.amazonaws.com/tutorials/179/l2pbqzi4r-image.png) # Live Server 실행 예를 들어서 `test` 라는 폴더에서 아래와 같은 `index.html` 파일이 준비돼 있다고 할게요. HTML 기본 구조에 테스트라고만 적었습니다. {% filename %} index.html {% endfilename %} ```html 라이브 서버 테스트 테스트 ``` ![d2pklbyxc-image.png](https://codeit-assets.s3.ap-northeast-2.amazonaws.com/tutorials/179/d2pklbyxc-image.png) 그럼 오른쪽 아래에 이렇게 "Go Live"라는 게 생겼을 거예요. 만약 설치한 직후라면 안 보일 수도 있는데, 그럴 땐 Windows에서는 `Ctrl` + `Shift` + `P`, macOS에서는 `Cmd` + `Shift` + `P`를 눌러서 명령창을 연 다음 "Reload Window"를 실행해 VS Code를 새로 고침 해 주세요. ![h7r18wz33-image.png](https://codeit-assets.s3.ap-northeast-2.amazonaws.com/tutorials/179/h7r18wz33-image.png) "Go Live"를 클릭하면 서버가 실행되면서 크롬 브라우저가 뜰 거예요. 주소창을 보면 `file://`로 시작하는 주소가 아니라 `127.0.0.1:5500` 이런 주소가 있죠? `127.0.0.1`은 내 컴퓨터를 가리키는 주소고요, 콜론(`:`) 뒤에 있는 숫자는 포트 번호라는 건데 내 컴퓨터에서 실행된 서버를 접근하게 해 주는 번호입니다. 쉽게 생각하면 내 컴퓨터에 Live Server가 실행한 서버의 주소라고 생각하시면 됩니다. 혹시 자세한 내용이 궁금하시다면 [[웹 개발 기초 지식]](https://www.codeit.kr/topics/web-dev-fundamentals) 토픽을 한번 들어 보세요. ![4ym4aga6c-image.png](https://codeit-assets.s3.ap-northeast-2.amazonaws.com/tutorials/179/4ym4aga6c-image.png) 자. 이렇게 웹 서버를 실행해서 테스트해 볼 수 있고요. `/` 뒤에 있는 경로는 VS Code에서 실행한 폴더 안에서 경로라고 생각하시면 됩니다. 폴더 안에 있는 `index.html` 파일에 접속한 상태예요. 이런 식으로 Live Server를 실행하면 현재 VS Code에서 열려 있는 폴더를 기준으로 웹 서버를 실행해 줍니다. # Live Server 종료 이번엔 Live Server를 종료해 보겠습니다. 실행한 상태에선 오른쪽 아래를 보면 "Port: 숫자"가 적혀 있을 거예요. 이걸 클릭하면 서버가 종료됩니다. ![xp87yb09p-image.png](https://codeit-assets.s3.ap-northeast-2.amazonaws.com/tutorials/179/xp87yb09p-image.png)