로컬 서버, 라이브 서버 사용하기 (Local Server, Live Server)

로컬 서버란? 내 컴퓨터에 프로젝트의 서버환경을 구축하는 것입니다.

 

로컬에서 웹페이지 개발 시, 테스트의 목적으로 아주 알맞으며 Front-End 현업에서 많이 사용됩니다.

 

node.js를 사용해 간단하게 로컬 서버를 구현할 수 있습니다.

 

먼저 node.js와 관련된 글을 읽고, 설치 후 이 글을 읽는 것을 추천드립니다.

 

해당 글 :  2022.11.01 - [etc/node.js] - [Node.js] 개념 및 설치방법(Mac OS)

[Node.js] 개념 및 설치방법(Mac OS)

 

NVM을 사용하여 로컬 서버 만들기

---

1. 먼저 VScode의 터미널을 열어 npm init -y를 입력합니다. 그러면 해당 디렉토리에 package.json 파일이 생성됩니다.

 

$ npm init -y

 

2. 그 뒤 다음 명령어를 실행시키면 package-lock.json 파일이 생성됩니다.

 

$ npm i parcel -bundler -D

(이 때 i = install 의 약어, -D = 개발의존성 패키지 설치의 약어입니다.)

 

3. package.json 파일의 script 부분을 다음과 같이 수정해줍니다. 각 뜻은 각주에 넣어놓았습니다.

(이 때 dist 폴더는 sㄷrc의 typescript 코드가 nodejs에서 작동하기 위해 javascript 코드로 컴파일된 결과물입니다.)

 

 

4. 해당 디렉토리에 index.html과 main.js를 생성하고, 연결해줍니다. 연결이 잘 됐는지 확인을 위해 console.log 구문도 넣어봅니다.

 

 

5. index.html에서 터미널을 열고 다음 명령을 실행시킵니다. 그러면 http://localhost:1234 (로컬서버)가 생성되었습니다.

 

$ npm run dev

 

6. 직접 주소를 쳐서, 혹은 터미널의 링크에 마우스를 갖다대어 타고 들어갈 수 있습니다.

console.log의 내용도 잘 들어왔습니다.

 

 

 

VScode 라이브 서버 사용하기

---

 

1. index.html에서 마우스 우클릭을 하면, Open with Live Server 메뉴가 보입니다.

  Open with Live Server : 라이브 서버가 생성됩니다.

  Stop Live Server : 라이브 서버가 중단됩니다.

 

2. 또는 VScode 하단의 Go Live 버튼을 누르면 라이브 서버가 생성됩니다. 다시 누르면 중단됩니다.

 

VScode 라이브 서버의 포트번호는 5500으로 픽스됩니다.

 

라이브 서버는 간편하지만 현업에서 사용하지 않고, 주로 혼자 개발용으로 쓰는 경우가 많습니다.