Node.js 입문-2

스파르타 Node.js 입문

 

 

종합 폴더 : kimminsoo -> sparta -> node_js -> learning -> first_step

 

 

 

 

 

 

<입문> 시작

 

 

 

________________________________________________________________________________________________________________

 

1주차

=> 입문주차 학습 목표.

1. Javascript의 기초 문법을 이해할 수 있고, 동기 비동기에 대한 설명을 할 수 있다.

2. Express.js의 Request(req), Response(res)가 무엇인지 이해할 수 있고, REST API를 구현할 수 있다

3. Mongoose 라이브러리를 이용하여 Schema를 작성하고, MongoDB의 정보를 조회 및 삭제할 수 있다.

4. AWS Web Console을 이용하여 EC2를 생성할 수 있고, Express.js 서버를 배포할 수 있다.

 

 

 

 

 

 

 

__________________________________________________

 

1-9 Package Manager

=>  < 03. Package Manager 01 >

 

 

Package manager 란 무엇이고, 그 안에 있는 npm 는 무엇이며,

실제로 그것을 어떤 방식으로 사용하는가.

내부에 있는 모듈들과 패키지는 무엇을 뜻하는지 확인해보자.

 

 

 

Package Manager 란?

=> 패키지를 손쉽게 다루는 작업을 안전하고 편리하게 사용하기 위한 툴

다른 사람이 만든 패키지를 가져와서 사용할 수도 있고, 내가 만든 패키지를 배포할 수도 있어.

 

Node.js에서 대표적으로 사용하는 패키지 매니저는 npm과 yarn이 있어.

 

그렇다면, 패키지란 무엇인가?

=> npm이나 yarn에 업로드된 Node.js 모듈을 패키지라고.

모듈이 다른 모듈을 참조하여 사용하는 것과 같이, 패키지도 다른 패키지를 사용할 수 있어. 이런 관계를 의존 관계라고 표현.

 

 

 

— npm 이란 무엇인가 —

=> 자바스크립트에서 사용할 수 있는 패키지(모듈) 관리자

* Node Package Manager의 약자로 npm이라는 이름을 가졌지만, 

지금은 Node.js와 관계없이 프론트엔드에서만 사용 가능한 자바스크립트 패키지들도 모두 등록되어 있음.

 

** npmjs.com 에서 검색해서 확인할 수 있는 패키지만 설치가 가능

 

 

 

— yarn 이란 무엇인가 —

=> npm의 대체제로 FaceBook이 출시한 패키지 매니저.

npm에서 부족한 부분을 보완하여 편리한 기능이 추가되었고, 더욱 빠른 속도로 패키지를 관리할 수 있는 패키지 매니저.

 

 

 

— Package.json 이란? —

=> npm 을 사용해서 패키지들을 다운 받고 관리하고 하잖아? 그럼 우리가 ‘파일’ 형태로 패키지들을 관리할 수 있으면 더 편하겠지?

이 때 사용되는 파일이 package.json.

설치한 패키지들의 버전을 관리할 때 사용하는 파일이야.

그 외에도 프로젝트의 이름, 작성자, 라이센스 정보 등 다양한 메타 데이터들을 기록할 수 있어.

참고로 npm, yarn 둘 다 package.json 을 참조해.

 

 

 

— Pacakge-lock.json 이란? —

=> package.json파일에서 정의한 패키지 외에도 node_modules에 들어있는 패키지들의 버전과 의존 관계가 상세하게 기록되어 있어.

npm으로 패키지를 설치, 수정, 삭제할 때마다 패키지들의 의존 관계를 package-lock.json파일에 저장.

저장된 패키지들은 정확히 일치하는 버전만 기록되므로, 프로젝트에서 의존하는 패키지 버전을 정확하게 관리할 때 사용할 수 있음.

한 마디로, package.json 보다 각 패키지들에 대해 더 세부적으로 기록되어 있어.

 

 

 

 

 

 

 

 

__________________________________________________

 

1-10 배포를 위한 npm 학습

=>  < 03. Package Manager 02 >

 

 

 

폴더 : kimminsoo -> sparta -> node_js -> learning -> first_step -> package_manager_example

 

 

vsc 로 < package_manager_example > 폴더 열기.

=> 터미널 경로는

kimminsoo@gimminsuui-MacBookPro package_manager_example % 

 

 

1. Npm init

——

npm init

——

=> 위의 경로에서 npm 을 init. 즉 해당 프로젝트에 package.json 파일을 만들어서 npm 패키지 관리를 용이하게 하도록 셋팅.

도중에 패키지 네임, 버전, 설명, 프로젝트를 시작하는데에 있어서 어떤 파일을 쓸 건지, 깃 저장소 주소는 어떻게 되는지 등등,

프로젝트를 시작하는데에 있어서 필요한 여러 설정들도 함께 설정할 수 있어.

 

npm init 을 무사히 마치면 < package_manager_example > 폴더에 package.json 이 생성된 것을 알 수 있어.

 

 

 

 

1. Express 패키지 인스톨하기

——

npm i express

——

=> package.json 파일의 dependencies에 내가 설치한 npm 패키지와 버전이 담겨 있어.

 

추가로 package-lock.json 파일이 생겼는데,

여기에 들어가면 내가 설치한 패키지의 세부 항목과, 어떤 의존관계를 가지고 있는지에 대해 알 수 있어.

 

추가로, node_modules 라는 파일도 생겼는데,

여기에는 내가 설치한 패키지=모듈들이 저장되어 있어.

잘 보면 body-parser 라는, express 와 의존관계인 패키지도 함께 설치되어 있음을 확인할 수 있어.

 

 

 

— node_modules —

=> package.json 파일 내용 기반으로 npm install 명령어를 통해 설치된 모듈 파일들이 모여있는 곳.

package.json에 설정된 모듈과 해당 모듈들이 참고하고 있는 또 다른 모듈도 함께 설치됨.

우리가 사용중인 환경에 맞는 파일들이 설치되기 때문에 이 폴더는 다른곳에 공유하거나 배포할 때 포함하면 안된다고.

 

 

 

— npm install —

=> package.json 파일을 기반으로 node_modules에 명시된 모듈을 설치해주는 명령어.

내 프로젝트를 다른 사람에게 공유하거나 다른 사람의 프로젝트를 사용할 때 모듈을 설치하기 위해 실행하는 명령어.

 

***

devDependencies

=> 개발 단계에서만 필요한 모듈들을 설치할 경우 이곳에 포함됨.

npm install -D (모듈이름) 으로 추가할 수 있어.

실재로 배포되었을 때를 기준으로 필요한 모듈들은 그냥 install 하면 되고,

개발 단계에세만 필요한 것들은 뒤에 -D 를 붙여서 설치해주면 되.

 

 

 

 

 

 

 

 

__________________________________________________

 

1-11 준비하기

=>  < 04. Express.js 01>

 

 

express.js 를 활용하여 node.js 프로젝트를 만들어보고, 실제로 기본적인 rest api 를 개발해보자.

 

 

 

— express.js 란 —

=> Express.js는 Node.js로 서버를 빠르고 간편하게 만들 수 있게 도와주는 웹 프레임워크.

Express.js 이외에 다양한 웹 프레임워크가 존재하지만 오늘날 가장 많은 Node.js 웹서버가 Express.js 프레임워크를 통해 개발되었어.

 

*** 최근 각광받고 있는 Node.js의 웹 프레임워크로 Nest.js도 있어.

 

 

 

— Express.js로 웹 서버 구현 —

 

 

폴더 : kimminsoo -> sparta -> node_js -> learning -> first_step -> spa_mall

 

 

1. spa_mall > app.js 파일 생성

 

1. kimminsoo@gimminsuui-MacBookPro spa_mall %    

=> 이 경로에서 npm init -y

* -y 라는 건, 처음 init 할 때 나오는 여러 질문들 다 yes 하겠다는 뜻. 

 

1. npm init -y 입력, 실행 시 자동으로 package.json 생성. 해당 파일에는 프로젝트에 대한 간략한 정보가 적혀 있어.

 

1. 동 경로, 즉 현재가 우리가 작업하고 있는 node.js 프로젝트인 spa_mall 폴더 안에서 npm I express 로 express.js 웹 프레임워크 설치.

 

1. spa_mall 내부에 node_modules, package-lock.json 생성.

 

 

 

— 현재 구성 집고 넘어가기 —

package.json 파일을 다시 열어봤을때 express 관련된 내용이 들어있으면 정상적으로 설치가 된 것.

 

package-lock.json은 어떤 패키지들이 어떤 버전으로 설치되었는지 기록해놓은 파일.

나중에 이 파일이 있으면 다른 동료들과 협업할때 같은 환경으로 개발할 수 있게 도와줄거야.

 

node_modules 폴더는 npm을 통해 설치된 패키지들에 대한 파일이 있는 폴더. 

앞으로 개발을 하면서 다양한 라이브러리를 사용하게 될텐데 이에 대한 모든 파일이 여기에 설치됩니다.

 

 

 

1. Express 예시 코드를 app.js 에 붙여넣기.

 

——

const express = require('express');     // express 라는 라이브러리를 가지고 와서 변수에 넣어

const app = express();      // 가져온 express 라이브러리를 실제로 실행해서 app 객체를 만들어.

const port = 3000;

 

app.get('/', (req, res) => {

    res.send('Hello World!');

});

 

app.listen(port, () => {

    console.log(port, '포트로 서버가 열렸어요!');

});

——

=> 터미널 spa_mall 경로에서 

< node app.js >

라고 입력해주면 실제로 서버가 실행될거야.

 

 

 

***********

이미 사용 중인 포트를 찾아서 종료하고 싶다면 어떻게 해야할까요?

맥의 경우에는 lsof라는 명령어를 사용하여 간편하게 특정 포트를 찾을 수 있습니다. 

lsof란 list open files를 의미하며, 현재 시스템에 열린 파일 목록에 대한 정보들을 알려 줍니다.

 

터미널을 열고 아래 명령어를 통해서, 우리가 원하는 포트 정보를 찾습니다. 

예를 들어서 3000포트를 점유하고 있는 프로세스에 대한 정보를 찾고 싶다면

 lsof -i :3000 

이라고 입력하면 됩니다.

 

——

lsof -i :원하는포트

——

다음으로, 해당 포트를 점유하고 있는 PID를 찾아서 종료시킵니다.

——

kill -9 포트를 점유하고 있는 PID

——

 

 

 

 

 

— API Client 학습하기 —

=> API Client란 개발단계에서 우리가 작성한 API의 요청을 확인하거나 테스팅 할 때 도움을 주는 툴. 

API Client를 사용함으로 개발 속도를 높이거나 치명적인 에러를 예방하는데 도움을 받을 수 있어.

 

우리는 vsc 에서 지원해주는 < Thunder Client > 라는 걸 사용할 거야.

 

vsc 에디터 좌측 세로 카테고리 아이콘 충 가장 하단의 “확장” 을 선택해서 < Thunder Client > 를 설치.

설치하면 좌측 아이콘 중 맨 밑에 번개 모양 아이콘이 생겨.

Postman 이랑 사용법은 거의 비슷해.

 

 

 

 

 

 

 

 

 

 

__________________________________________________

 

1-12 Routing 이해 및 Router 학습

=>  < 04. Express.js 02>

 

 

 

Routing이란?

=> outing은 클라이언트의 요청 조건(메서드, 주소 등)에 대응해 응답하는 방식을 말함.

 

 

 

Router란?

=> 여기서 말하는 Router는 클라이언트의 요청을 쉽게 처리 할 수 있게 도와주는 Express.js 기본 기능중 하나.

 

 

일반적으로 router 의 구조는 다음과 같아.

——

router.METHOD(PATH, HANDLER);

——

=>

router: express의 라우터를 정의하기 위해 사용.

METHOD: HTTP Method를 나타냄. (ex: get, post, put, delete …)

PATH: 실제 서버에서 API를 사용하기 위한 경로를 나타냄.

HANDLER: 라우트가 일치할 때 실행되는 함수.

 

 

 

폴더 : kimminsoo -> sparta -> node_js -> learning -> first_step -> spa_mall

 

이제… router 라는 기능을 구축하고 routing 이라는 행위를 해볼거야.

뭐랄까… 통행량이 붐비는 로터리나 사거리에서 교통정리를 하는 느낌?

 

 

< app.js >

——

const express = require('express');     // express 라는 라이브러리를 가지고 와서 변수에 넣어

const app = express();      // 가져온 express 라이브러리를 실제로 실행해서 app 객체를 만들어.

const port = 3000;

 

// route 가져오기

const goodsRouter = require("./routes/goods.js")     // ./ 라는 건 상대경로에서 지금 현재 폴더를 나타내.

 

app.get('/', (req, res) => {

    res.send('Hello World!');

});

 

// app.use 라는 문법을 통해서 router api 들을 등록할 수 있어.

// app.use 는 app 이라는 express 객체에게 "모든 미들웨어가 여기를 통과하게끔 전역으로 쓸거다" 라고 말해주는 거야.

// 해당 app.use 의 경우, '/api' 라는 경로로 클라이언트가 접속했다면 모두 goodsRouter 로 가라, 라는 뜻.

            // localhost:3000/api -> 이 경로로 접속하는 모든 경로는 goodsRouter 로 가라.

app.use("/api", goodsRouter);

        // [goodsRouter] 이런 식으로 배열을 입력해도 괜찮아. 

        // 왜 배열이 필요할 수 있냐면, /api 라는 주소로 입력되었을 때 접속해야 하는 js 파일이 여러 개일 수도 있으니까.

 

app.listen(port, () => {

    console.log(port, '포트로 서버가 열렸어요!');

});

——

 

 

< goods.js >

——

const express = require('express');     // express 라이브러리를 express 라는 변수에 할당.

const router = express.Router();        // express 안에 있는 router() 라는 함수를 실행한 값을 router 에 담아.

 

// 경로 : localhost:3000/api

router.get('/', (req, res) => {

    res.send("default url for goods.js Get Method");

});

 

// 경로 : localhost:3000/api/about

router.get('/about', (req, res) => {

    res.send("goods.js about PATH");

});

 

module.exports = router;        // 바깥에서 접근할 수 있도록 exports. 즉 이 파일에 접근하면 router 를 반환하는거야.

——

 

 

 

 

 

 

 

 

__________________________________________________

 

1-13 Module의 이해

=>  < 04. Express.js 02>

 

 

Module이란?

=> Javascript 파일 단위로 분리된 코드를 일컬어.

여기서 Javascript 파일은 특정한 기능을 가진 여러 개의 함수와 변수들의 집합입니다.

 

간단하게 말하자면,

router 를 관리하기 위해서 module 을 외부로 뽑아내 줘야 했던 경우가 있었어.

이렇듯 여러 개의 함수와 변수를 각각의 카테고리 별로 분리를 해서 하나의 파일로 만든 집합 자체.

 

모듈(Module)은 하나의 모듈에서 다른 모듈을 호출하여 사용할 수 있어.

모듈(Module)은 그 자체로도 하나의 프로그램이면서 다른 프로그램의 부품으로도 사용할 수 있다.

보통 1개의 파일이 1개의 모듈이 된다고.

 

 

그렇다면, module 은 왜 사용하는가?

1. 코드 베이스를 분리하고, 구조적으로 관리할 수 있도록
2. 코드를 ‘모듈화’ 해서 재사용 가능하도록 만들기 위해서
3. 모듈은 사용할 시 ‘인터페이스’ 만을 노출해. 따라서 인터페이스 외의 다른 정보들을 은닉화 할 수 있어.
4. 종속성을 관리할 수 있어.

 

 

 

 

— Module은 어떻게 사용할까 —

 

• export 명령어를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있어.
• import, require 명령어를 사용하면 외부 모듈의 기능을 가져올 수 있어.

 

단순하게 변수나 함수를 하나 하나씩 내보내 줄 때에는 exports 를 사용하고,

모듈 자체를 전부 다 내보내 줄 때에는 module.exports 를 사용.

또한, 내보냈던 module 을 다른 파일에서 가져와 사용하기 위해선 import / require 을 사용.

 

 

*** 

Import / require 은 뭐가 다른가?

=> 

require는 현재 학습하고 있는 CommonJS로 모듈 시스템을 관리할 때 사용.

import는 **ES6(ES2015)**로 모듈 시스템을 관리할 때 사용.

 

——

< package.json >

 

{

  "name": "spa_mall",

  "version": "1.0.0",

  "description": "",

  "main": "app.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "dependencies": {

    "express": "^4.18.2"

  },

  "type": "commonjs" // type 값에 “module” 을 넣으면 es6 로 모듈 시스템을 관리하게 될거야. 기본값은 commonjs.

}

——

 

 

 

 

— module 사용해보기 —  첫 번째 방식.

=> modules 폴더를 생성해 math.js, run.js 라는 파일을 생성.

 

——

< run.js >

 

const add = require("./math.js")

 

console.log(add(10, 21));

 

// 31

——

 

——

< math.js >

 

const add = (a, b) => {

    return a + b;

}

 

module.exports = add;

——

=> math.js 에서 선언된 함수를 exports 하고, run.js 에서 함수에 접근하여 원하는 값을 출력.

 

 

 

 

 

 

— 함수, 변수 하나하나를 밖으로 export 해보기 — 두 번째 방식.

 

——

< run.js >

 

const {add} = require("./math.js”) // 객체 중 add 만 가져와서 사용하겠다.. 그런 느낌?

 

console.log(add(10, 21));

 

// 31

——

 

——

< math.js >

 

exports.add = (a, b) => {

    return a + b;

}

——

 

=> exports.add 일 경우, 밖으로 내보내 줄 때 함수를 내보내 주는게 아니라 ‘객체’ 를 내보내 줘야 해.

그래서 add 를 밖에서 사용하기 위해선, add.add(10, 21) 이런 식으로 접근을 해야 해.

 

module.exports = add 일 경우 함수 그 자체를 내보내 줄 수 있지만, exports.add 일 경우 객체 형태로 바깥으로 내보내 주는거야.

 

이걸 run.js 에서 add 그대로 사용하려면,  const {add} = require("./math.js") 이렇게 “ 객체구조분해할당 “ 을 통해서 사용해야 해.

 

 

 

 

 

— module.exports 자체를 객체로서 내보내 줄 수도 있어 —  세 번째 방식.

 

——

< run.js >

 

const {add} = require("./math.js”) // 객체 중 add 만 가져와서 사용하겠다.. 그런 느낌?

 

console.log(add(10, 21));

 

// 31

——

 

——

< math.js >

 

const add = (a, b) => { return a + b; }

 

module.exports = { add: add};

——

=> 아예 add 를 객체에 담아서.

 

 

 

 

 

— Module 을 내보내고, 밖에서 사용하기 위한 3가지 방법. —

 

——

// 모듈을 호출했을 때, add 키 값에는 add 함수가 들어가는 방법.

// module.exports = {add: add}      const {add} = require("./math.js")

 

// 모듈 그 자체를 바로 add 함수를 할당한다.

// module.exports = add             const add = require("./math.js")

 

// 모듈을 호출했을 때, add 키 값에는 (a, b) => (return a+b) 라는 익명함수가 할당되는 방법.

// exports.add = () {}              const {add} = require("./math.js")

// const add = () => {}    exports.add = add;  이것도 같은 방법.

——