221228 기초 JS 시작하기 - npm 기초

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영).

 

---

 

웹 페이지를 작업하다 보면, 짜고있는 코드가 제대로 동작하고 있는지 알아야하는데,

그때 여러가지 방법을 활용할 수 있지만

VSCode를 사용하는 사람이라면 사용해봤을 법한 Extension 'LiveServer'

 

Live Server - Visual Studio Marketplace

정말 유용한 익스텐션 중 하나인데, 이걸 사용하지 않고도 서버를 열 수 있는 방법이 있다.

 

 

우선 빈폴더를 한 상태의 vscode를 실행시켜 터미널을 연다음 다음 과 같이 실행해 준다

npm init -y 입력 후 터미널에 나오는 내용

위 사진 과 같이 터미널에 출력이 되면 vscode sidebar 한켠에 package.json파일이 자동생성된다. 

 

 

그 다음 프로젝트에서 사용할 package, module를 설치해야 한다.

npm i parcel-bundler -D 로 작성해도 무방

---

(2023.01.11 현시점에선 이렇게 작성하시길 권장)

npm i -D parcel v2

 

<script type="module" defer src="경로"></script>

---

 

우리는 개발용으로 사용할 것이기 때문에 위와 같이 작성한다.

터미널에서 동작이 끝나면 package.json에 parcel-bundler패키지가 설치가 되는데 

이 것을 통해 개발용으로도 사용할 수 있고, 추후 프로젝트가 완성 된 후 결과물을 낼 수 있는

즉 , build할 수 있는 명령을 추가해야한다.

 

 

package.json파일에 들어가 아래 사진과 같은 "scripts": {}이 있는데,

처음 들어간 상태에선 저 안에 text: "echo \ "Error: no text specified\" && exit 1"라고 적혀있다.

그것을 지우고 아래처럼 작성한다.

 

test를 지우고 위와 같이 작성하기

 

평소 개발 할 때는 dev명령어를 사용해 서버를 켜면 된다.

(추후 프로젝트를 완성하게 되면 build 명령어를 통해 실제로 빌드된 결과물 dist라는 폴더에 저장하게 된다.)

 

개발 서버를 실행하기 위한 명령

index.html에 내용을 작성하고, main.js를 연결해준 다음,

parcel bundler를 통해 index.html을 기준으로 서버를 열 수 있는데,

이를 실행할 수 있는 명령어는 npm run dev.

입력 후 몇 초 후에 아래와 같은 사진의 내용이 터미널에 뜬다.

서버가 열렸다는 터미널 결과

 

파란색으로 표시된 주소가, 우리의 개발용 서버의 주소이고,

이를 윈도우는 Ctrl, 맥은 cmd를 누른 채 마우스로 클릭하면 브라우저에 창이 뜬다.

이로서 우리는 Live Server Extension이 아니더라도 개발용 서버를 사용할 수 있게 되었다. 

 

 

---

Extension을 설치해서 편하게 터미널에서 명령어를 작성할 필요없이 프로젝트 초기화를 진행할 수도 있지만, 

그것 보다는 자체적으로 개발용 서버를 실행하고 번들러를 설치하고 사용해보면서 

프로젝트 초기화 작업을 숙달시키면 좋을 것같다