로컬 호스트로 간단한 정적웹사이트나 테스트 개발 사이트가 필요할때, vs extension중 live server 를 소개하고 간단한 기본사용법을 알아본다.
1. Live Server 설치
vscode로 개발할 때 간단하게 로컬 웹서비스를 만들어서 테스트할 경우가 빈번히 발행하는데,
발생할 때마다 매번 nginx에 올리거나 로컬 웹서버를 구동시켜서 올리는 불편한 경우가 있다.
Live Server는 이를 대신해 간단하게 로컬웹서비스를 만들어서 테스트 해볼수 있도록 웹서버를 만들어준다.
[ vsode extension 설치 ]
- vscode 왼쪽 확장 extension 아이콘 클릭
- liveserver를 입력해서 검색
- Liver Server 선택
- 우측 설치 선택(이미 저는 설치가 되어있어서 사용안함으로 표시되어 있음)
- 끝. 간단하다.
2. 기본 사용법
vscode로 개발할 때 간단하게 로컬 웹서비스를 만들어서 테스트할 경우가 빈번히 발행하는데,
발생할 때마다 매번 nginx에 올리거나 로컬 웹서버를 구동시켜서 올리는 불편한 경우가 있다.
Live Server는 이를 대신해 간단하게 로컬웹서비스를 만들어서 테스트 해볼수 있도록 웹서버를 만들어준다.
확장 extension을 설치하면 항상 설치하고 바로 끝내지말고, Document나 extension을 만든 개발자의 말을 좀 차근히 읽어보는 습관을 들여본다.
위에 보면 with live reload가 보인다. 수정하면 바로 적용된게 보인다는 뜻.
다음으로 위에 1번 쪽을 보면 vscode 하단에 [Go Live]를 클릭해서 Server on/off 가 가능하다.
여기까지 한번 실습해보자
[ 실습 1 ]
- home폴더 만들고 index.html 만들고
- TEST 입력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
TEST
</body>
</html>
1. 하단 Go Live 클릭하여 실행
브라우져가 자동 실행되며, 하단 처럼 표시됨.
1. TEST 표시
2. 포트번호 5500번으로 기본 서비스되고 있으며, /home/index.html이 브라우져주소로 표시됨을 알 수 있음.
[ 실습 2 수정하기 ]
수정하고 저장하면 수정내용이 바로 변경됨을 확인할 수 있음.
3. 포트변경
기본 서비스 포트가 5500번인 것을 5501번으로 바꾸어본다.
- 확장(extension)으로 이동
- 확장 설정 클릭
- settings.json 편집 클릭
1. 5501로 수정하고 저장
2. Port:5500부분으로 서비스 되고 있는 부분을 클릭해서 정지시키고 다시 실행시킨다.
1. 5501로 수정되어 서비스되고 있음을 확인할수 있다.
2. 폴더가 /home/index.html임을 알아두자.
4. settings파일 수정으로 다른 설정도 가능
settings.json 파일에서 설정할 수 있는 기능이 많다
- spa를 위한 File 설정
- htts를 위한 설정
- Proxy설정
아는 만큼 보인다는 말처럼. 잘만 사용하면, 개발하는데 큰 도움을 주는 확장프로그램임에 틀림없다.
링크 클릭시 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
'WEB' 카테고리의 다른 글
| [css]Flexbox 마스터하기: 2.Flex 컨테이너 설정 (0) | 2023.06.25 |
|---|---|
| [css]Flexbox 마스터하기: 1.소개 (0) | 2023.06.24 |
| [html5] input type date 와 input type time (1) | 2023.06.17 |
| ngrok으로 로컬 개발 환경(localhost) https 로 개발테스트 하기 (1) | 2023.06.14 |
| HTTP와 HTTPS의 개념 (0) | 2023.06.11 |
