개발자 훤다

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

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

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

해당 글 :  2022.11.01 - [etc/node.js] - [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으로 픽스됩니다.

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

Node Package Manager
: 프로젝트를 효율적으로 관리하고, 손쉽게 기능을 고도화한다.

nvm을 깔면서 npm이라는 놈이 같이 깔리는 것을 보셨을까요?

npm은 또 무슨 놈일까요? 정말 간단하게 알아보겠습니다.

npm은 위의 설명과 같이 Node Package Manager로, 패키지 관리인이라고 볼 수 있습니다.

전 세계의 수많은 개발자들이 만든 다양한 기능들(Packages, Modules)을 관리하는 거죠.

현재 수 백만개의 패키지들이 npm 생태계를 이루고 있습니다.

이런 유용한 패키지들을 단순한 명령어

$ npm install [패키지명]

을 통해 내 pc에서 사용할 수 있습니다. (html에서 쓰던 <link>, <script> 안녕~)

사용법

1. 먼저 terminal을 열어줍니다.

2. 아래 명령어를 입력해줍니다.

$ npm init -y

3. 그러면 빨간 박스와 같은 내용이 뜨면서, 해당 폴더에 package.json 파일이 생성됩니다.

4. 이 package.json파일은 내 프로젝트에 관한 내용으로, 내가 직접 프로젝트 내용에 대해 관리할 수 있습니다.

* json 파일 : 경량화된 단순 DATA Format. {"String key" : "String Value"} 의 형태를 가진다.

5. 내가 필요한 패키지를 다음 명령어로 가져온다.

$ npm install [패키지명] -D

패키지를 가져오면, node_modules가 생성되고, package.json에 내가 필요해서 가져온 "parcel-bundler"가 생성된다.

이제 나는 parcel-bundler가 뭔 패키지인줄은 몰라도 쨌든 사용할 수 있다!

node_modules : parcel-bundler가 포함된 모듈 전체. ("너가 뭘 좋아할지 몰라서 다 가져왔어"의 느낌)
나중에 지워지더라도 $ npm install 로 다시 불러올 수 있다.

-D : 개발용 의존성 패키지 설치 -> 내가 개발용으로만 쓰고, 나중에 브라우저에는 필요없는 경우 사용
-d : 일반 의존성 패키지 설치 -> 개발용으로도, 나중에 브라우저에도 필요한 패키지인 경우 사용

package-lock.json : 내가 부른 패키지를 잘 사용할 수 있도록 자동으로 관리해주는 파일. package.json과 함께 지워지지 않도록 유의해야 함!

Chrome V8 JavaScript 엔진으로 빌드된 [JavaScript 런타임]

* 런타임 : 특정언어(JavaScript 등)가 동작할 수 있는 환경입니다. *

자바스크립트는 독립적 언어가 아닌 ‘스크립트 언어’입니다. 스크립트 언어는 필수적으로 동작가능하게 하는 프로그램이 요구됩니다. 웹 브라우저에서는 HTML/CSS/JS는 자유롭게 사용할 수 있습니다만 ... stylus, BABEL, EJS 등 여러가지 유용한 모듈(도구)를 사용하기에는 제약이 있습니다.

그래서 Node.js가 개발되었습니다. JavaScript가 웹브라우저로부터 독립할 수 있도록 말이죠!

Node.js는 한 가지 언어로 전체 Web page를 만들 수 있게 했습니다.

GitHub에서 JavaScript를 언어순위 1위로 만든 일등공신이라고도 할 수 있겠습니다.

Node.js의 특징

 1) 내장 HTTP 서버 라이브러리

 2) Non Blocking I/O

 3) 싱글 스레드(Single Thread)

 4) 이벤트 기반(Event-driven)

Node.js 설치방법

1. 직접 설치

짝수버젼(LTS) : 안정적이고 신뢰도가 높습니다. (권장)

홀수버젼(최신) : 최신기술을 사용할 수 있지만 안정적이지 못하고 업데이트가 잦을 수 있습니다.

2. nvm을 사용하여 설치

nvm을 설치해 Node.js의 지속적인 버젼관리를 편리하게 할 수 있습니다.

(nvm 사용 명령어)

$ nvm install 18.12.0
// 18.12.0 버젼 설치

$ nvm ls
// nvm 현재 상태 확인

$ nvm --version
// nvm 현재 버젼 확인

$ nvm use 12.14.0
// 12.14.0 버젼 사용 (협업 등을 위해 버젼 맞추기)