[엘리스 SW 엔지니어 트랙 6기] 6주차 회고(9/11 - 9/15)

 

📌 이번 주는 Node.js와 서버, Express.js, MiddleWare와 Restful API, MongoDB, Mongoose 등을 배웠다.
아래 정리한 배운 내용들(NPM과 모듈, Express.js)은 직접 실습해보면서 이해가 됐는데
라우팅부터 시작해서 Request Handler, MiddleWare 등의 Express.js 동작방식들은
직접 작성하는 부분에서 아직 헷갈리는 부분이 많다.
어느 정도 이해한 뒤 정리하는 편이라 그 부분들부터는 좀더 공부한 뒤 정리를 해야할 것 같다.

 

🍒 NPM과 모듈

 

NPM이란?

Node.js 프로젝트를 관리하는 필수적인 도구

온라인 저장소 + 커맨드라인 도구

- 온라인 저장소 -> 수많은 오픈소스 라이브러리와 도구들이 업로드되는 저장소. 필요한 라이브러리나 도구 손쉽게 검색 가능. Node.js의 인기로, 거대한 생태계를 보유하고 있다.

- 커맨드라인 도구 -> 프로젝트 관리를 위한 다양한 명령어를 제공한다.

✔️ 저장소에서 라이브러리, 도구 설치

✔️ 프로젝트 설정 / 관리

✔️ 프로젝트 의존성 관리

 

NPM 사용해보기

$npm init

해당 디렉터리 안에서 명령어 사용 시 몇 번의 질문을 통해 package.json이라는 파일을 만들어 주고,

이 디렉터리는 Node.js 프로젝트가 된다. (npm init —yes 입력하면 바로 생성)

package.json

프로젝트 관련 정보들이 저장되는 파일

이 파일을 직접 수정하거나 npm 명령어를 사용하여 프로젝트 정보를 수정할 수 있다.

구성요소는 아래와 같다.

✔️ name - 프로젝트의 이름

✔️ version - 프로젝트의 버전

✔️ description - 프로젝트 설명

✔️ scripts - npm run [script name]으로 실행할 수 있는 사용자 작성 스크립트

✔️ dependencies - 의존성 패키지들

✔️ devDependencies - 개발환경에서만 사용하는 의존성 패키지들

의존성 관리하기

프로젝트 내에서 사용하는 라이브러리를 관리하는 방법

프로젝트가 실행되기 위해 라이브러리에 의존하기 때문에 이러한 라이브러리들은 dependency(의존성)이라고 이야기한다.

라이브러리란?

특정 기능을 수행하는 코드의 묶음

복잡한 기능을 직접 작성하지 않고, 다른 사람이 구현한 것을 사용하는 방법

Node.js에서는 패키지라고도 부른다.

$npm install

npm install 명령어를 통해 프로젝트 의존성을 관리할 수 있다. 이 명령어는 사용 방법에 따라 여러 용도로 사용이 가능하다. (npm i 를 축약형으로 사용 가능)

✔️ 의존성 추가

✔️ 의존성 내려받기

✔️ 개발용 의존성 추가

✔️ 전역 패키지 추가

프로젝트에 의존성 추가하기

$npm install [package-name]

필요한 패키지를 프로젝트에 추가할 수 있다.

추가된 패키지는 package.json의 dependencies 안에 추가되며, node_modules 디렉터리에 저장된다.

dependencies와 devDependencies

$npm install [package-name] —save-dev

npm은 개발용 의존성을 분리하여 관리할 수 있다.

개발용 의존성이란 배포 전까지만 사용하는 의존성이다. (ex. 유닛 텍스트 라이브러리)

—save-dev 옵션을 이용하면 개발용 의존성을 추가할 수 있다.

개발용 의존성은 package.json의 devDependencies에 추가된다.

node_modules 디렉터리로 가보면 cowsay 뿐만 아니라 다양한 패키지들이 추가된 것을 볼 수 있는데, cowsay가 사용하는 다양한 패키지들이다. cowsay가 어떤 패키지를 사용하고 있는지 확인하기 위해서는 package-lock.json을 통해 cowsay가 사용하는 모듈들의 계층적 구조를 확인할 수 있다.

프로젝트에 의존성 내려받기

기본적으로 node_modules 디렉터리는 코드 관리나 배포 시에 업로드 하지 않는다. 의존성이 많아지면 용량이 너무 커지는 것과, 운영체제별로 실행되는 코드가 다른 경우가 존재하기 때문이다.

npm install 명령어를 아무 옵션 없이 사용하면 package.json에 정의된 dependencies와

devDependencies 모든 의존성을 node_modules 디렉터리에 내려받는다.

npm_modules 삭제 후 npm i를 입력하면 package.json에 입력되어 있는 패키지가 다시 설치되는 것을 볼 수 있다.

개발용 의존성을 제외하고 내려받기

$npm install —production

프로젝트를 배포할 때에는 개발용 의존성을 포함할 필요가 없다.

package.json의 dependencies만 node_modules에 내려받는다.

의존성 버전 표기법

npm install [package-name]@[version]으로 패키지 버전을 지정할 수 있다.

✔️ ~1.13.0 - 1.13.x 버전 설치

✔️ ^1.13.0 - 1.x.x 버전 설치

✔️ 0.13.0 - 0.13.0 버전만 설치

프로젝트가 지속되면서 패키지들의 버전이 올라가고 하위호환성을 지원하지 않는 경우가 있는데, 이럴 경우 문제 해결하는 방법이다.

package-lock.json

프로젝트에 의존성을 추가하면 package-lock.json 파일이 생성된다.

프로젝트에 버전을 명시하지 않고 의존성을 추가하면 자동으로 ‘^최신버전’으로 추가가 되는데,

의존성 버전이 갑자기 변경되지 않도록 설치된 버전을 고정하는 역할을 한다.

전역 패키지 추가

$npm install [package-name] —global

패키지를 전역 패키지 디렉터리에 내려받는다.

커맨드라인 도구들을 주로 전역 패키지로 추가해서 사용한다.

ex) express-generator, pm2

로컬 패키지와 전역 패키지

로컬 패키지 - package.json에 선언되어 있고, node_modules에 저장된 패키지

전역 패키지 - npm intall -g를 통해 내려받아, 전역 패키지 저장소에 저장된 패키지

전역 패키지도 프로젝트에서 사용할 수 있으나, 프로젝트의 의존성이 package.json 내에 명시적으로 선언되어 있는 것이 프로젝트 관리의 좋은 방향이다.

의존성 삭제하기

$npm remove [package-name]

의존성 패키지를 삭제할 수 있다.

package-json의 dependencies와 devDependencies에서 삭제되고 node_modules에서도 자동으로 삭제된다.

cowsay를 삭제하고 package.json 파일을 보면 devDependecies가 비어 있는 것을 볼 수 있다.

또한 node_modules 디렉터리, package-lock.json 안에서도 삭제되어 있는 것을 확인할 수 있다.

스크립트 실행하기

스크립트란 간단한 동작을 수행하는 코드

package.json의 scripts에 선언된 스크립트를 $npm run [script-name] 명령어로 실행할 수 있다.

 

package.json 파일을 보면 scripts 안에 test에는 ‘아직 test가 정의되지 않았다’고 뜬다.

package.json 수정을 위해 vscode를 키고 cowsay를 이용해 스크립트를 추가한다.

그 후 다시 돌아와서 npm run say-hi를 입력하면 소가 인사한다. (귀엽다..!)

이런 식으로 npm script를 사용하면 다양한 코드를 구성할 수 있고 그 안에서는 추가된 패키지들을 사용해서 스크립트를 실행할 수 있다.

npm script를 사용하는 이유

npm script 내에선 의존성 패키지를 바로 사용할 수 있다.

node_modules에 있는 실행 파일을 사용하는 것이 아니라 바로 node_modules의 모듈을 직접적으로 호출할 수 있다.

자주 사용되는 스크립트

npm 스크립트엔 run을 제외하고 사용할 수 있는 주요 스크립트들이 있다.

test - 코드 유닛 테스트에 사용

start - 프로젝트 실행

stop - 프로젝트 종료

많이 사용되는 명령어이기 때문에 run을 제외하고 사용할 수 있을 뿐, npm 내부적으로 코드를 제공해주는 것은 아니다.

 

Node.js의 모듈

모듈이란 코드를 분리하기 위한 방법을 말한다.

반복되는 코드를 모듈로 분리하여 사용할 수 있다.

모듈과 패키지

패키지는 모듈의 모음

npm 패키지들은 많은 모듈을 포함하고 있는 코드 모음

기본 제공 모듈

기본 제공 모듈은 직접 작성하기 매우 어렵거나 복잡한 로직을 포함한 모듈이 있으므로 자주 사용되는 기본 제공 모듈을 학습해야 한다.

✔️ console - 디버깅 도구 / log, warn, error 함수로 로그 레벨 표시 / time, timeLog, timeEnd 함수로 시간추적

✔️ process - 현재 실행프로세스 관련 기능, 실행 환경 및 변수 관련 값, 프로세스 동작 관련 함수 제공

✔️ fs - 파일 입출력을 위해 사용 / readFile, writeFile 함수로 파일 읽기, 쓰기 / Sync 함수로 동기 동작 / watch로 파일, 디렉터리 변경 이벤트 감지

✔️ http - http 서버, 클라이언트를 위해 사용 / createServer 서버 생성 / request 함수로 http 요청 생성

그 외 기본제공 모듈은 node.js api문서 확인

모듈 작성 방법

✔️ 변수명 export - exports.name; 모듈이 사용되는 변수명을 지정해서 export, 모듈을 object로 만들고, 각 key-value를 지정해서 내보낸다.

✔️ 함수 export - module.exports = () ⇒ {} 모듈 사용 시 함수 실행하는 방식으로 사용

모듈 사용 방법

require 함수를 통해 모듈을 load 할 수 있다.

의존성 패키지, 직접 작성한 모듈 사용 가능하다.

모듈은 첫 require 시에만 실행하고 cache 되므로 여러 번 실행할 모듈은 함수형으로 작성해야 한다.

✔️ npm 패키지 - 의존성 패키지들은 require(’package-name’); 로 load, node_modules에 있어야 함.

✔️ 직접 작성한 모듈 - require(’./my-module’); 현재 파일과의 상대 디렉터리로 load, 만약 my-module이 js파일이 아닌 디렉터리라면 my-module의 index.js 파일이 load 된다.

✔️ 함수형 모듈 - require(’./my-function-module’); load 한 경우 바로 실행되지 않음. 필요한 시점에 실행

✔️ json 파일 - require(’./my-data’); json 빼고 require, object로 자동 파싱

 

🍒 웹과 Express.js

 

Express.js란?

Node.js의 웹 프레임워크 중 가장 유명한 웹 프레임워크

필요에 따라 유연하게 구조 설정 가능, 다양한 미들웨어를 통해 필요한 기능을 간단하게 추가 가능

 

Express.js 시작하기

npm init으로 시작하기

// $npm i express → express 모듈 추가
const express = require('express')   // express 모듈 load
const app = express()                // express 사용하여 app 생성

app.get('/', (req, res) => {         // 라우팅 추가
		console.log('connect /')
    res.send("Hello World!!");
});
app.listen(3000, function() {        // 서버 시작
    console.log('3000 port listen!!')
})

프로젝트 폴더로 이동 후 npm init을 통해 프로젝트 생성

npm i express express 패키지 추가

vscode 해당 폴더에서 index.js파일 만든 후 작성

script에 run 없이 사용할 수 있는 start 스크립트 추가

다시 돌아와서 npm start 입력해서 스트립트 실행하면 문자열 출력됨

브라우저로 이동해서 localhost:3000으로 접속하면 문자열이 받아져있는 걸 확인할 수 있다.

express-generator 사용하기

Express.js는 express-generator라고 하는 프로젝트 생성기를 제공한다.

프로젝트의 기본구조를 자동으로 생성해주기 때문에 빠르게 프로젝트를 시작하기 좋은 방법이다.

생성된 프로젝트는 npm start로 실행 가능하다.

✔️ 전역패키지로 express-generator 추가

✔️ express 명령어로 my-web express project 생성

✔️ 해당 디렉터리로 이동

✔️ express에서 제공하는 dependencies 모두 설치

✔️ npm start 하면 간단하게 웹서비스 생성되고 시작된다.

 

❓ npm i -g express-generator 를 입력하니 에러가 떴다. (맥북 사용중이다)

‘운영 체제에서 작업이 거부되었습니다. 현재 사용자로서 이 파일에 액세스할 수 있는 권한이 없는 것 같습니다’ 라고 설명되어있다.

알아보니 전역으로 설치할 경우 발생하는 오류라고 한다. → 앞에 sudo(어드민 권한) 명령어 붙이고 실행, mac 비번 입력

express 명령어로 my-server express project 생성하면

자동으로 my-server 디렉터리 만들어지고, 하위에 다양한 디렉터리와 파일들이 생성된다.

my-server 디렉터리로 이동한 후 npm i 입력해서 필요한 패키지들을 전부 설치해준다.

npm start를 통해 express generator로 생성된 서버를 실행

브라우저로 이동 후 local:3000으로 접속하면 아래와 같은 문자를 확인할 수 있다.