1. NPM
- Node Package Manager
- Node.js 프로젝트를 관리하는 필수적인 도구
- online storage: 많은 양의 오픈소스 라이브러이와 도구들이 업로드 됌
- 커맨드라인 툴과 온라인 저장소로 이루어짐
1.1 command
npm init
: 프로젝트 디렉토리를 생성, 몇 번의 질문을 통해 package.json파일을 만들어 주고 디렉토리를 Node.js프로젝트로 만듬.
- pacakage.json: 프로젝트 관련 정보들이 저장되는 파일. 직접 수정하거나 npm을 이용해 수정 가능
npm install [package-name]
: (로컬, 전역)의존성을 추가할 수 있음.
--save-dev
: 옵션 사용시 개발용 의존성으로 추가 가능
[version]
: 특정 버전 패키지 설치 가능
--global
: 전역 패키지 디렉토리에 설치, 전역 패키지로도 사용 가능하나 의존성이 package.json에 명시되어 있는 것이 프로젝트 관리의 좋은 방향
npm remove [package-name]
: 의존성 패키지를 삭제
npm run
: 스크립트 실행
1.2 NPX
- npm 패키지를 설치하지 않고 사용할 수 있게 해주는 도구. 노드 버전별로 호환성을 확인하거나 gist코드를 실행할 수 있다.
1.3 module
- 반복되는 코드를 모듈로 분리하여 사용
- 패키지는 모듈의 모음
- process: 현재 실행 프로세스 관련 기능 제공. arch, argv, env등 실행 환경 및 변수 제공
- fs: 파일 입출력을 하기 위해 사용. 읽기, 쓰기, sync함수로 동기적 동작, watch로 파일/디렉토리 변경 이벤트를 감지할 수 있다.
- http: createServer로 서버를 생성하거나 request로 요청을 생성할 수 있다.
1.3.1 named-module
- 모듈을 exports object의 property로 등록한다.
exports.name = name;
exports.func = () => {};
const exp = require()
1.3.2 function-module
module.exports = (name, age) => {
return { name, age };
}
const person = requrie( )('park', 25);
1.3.3 require
- require할 때 모듈 코드가 실행된다. Node.js의 모듈은 첫 require시에 cache되기 때문에 두 번 실행하지 않는다.
- 만약 여러 번 실행하고 싶다면 함수 모듈로 작성해야 한다.
- npm package:
require('package=name')
으로 로드. node_modules에 존재해야함
const myModule = require('./my-module');
- 직접 작성한 모듈:
require('directory or filename')
으로 로드.
my-module이 js파일인 경우 해당 파일 load(확장자 생략가능)
디렉토리인 경우 my-module/index.js파일 load
- 함수형 모듈: load한 경우에 실행되지 않고 함수를 사용할 때 실행
- json: 확장자 생략가능. 자동으로 파싱해 object로 사용 가능
1.3.4 ES module
- ES6에서 등장한 JS의 공식적인 표준 모듈. 등장 전에 Node는 CommonJs방식을 사용하고 있었다.
2. WEB & Express.js
2.1 WEB의 동작 방식
- 웹 서비스는 기본적으로 HTTP 요청과 응답의 반복으로 이루어짐
1. 요청: 어떤 사용자가 어떤 데이터를 필요로 하는지 담겨있음
2. 응답: 요청에 해당하는 데이터와 어떤 데이터가 전송되는지 등이 담겨있음
- 현대적인 웹은 전부 동적 웹으로써 프론트-백엔드가 유기적으로 통신하며 동작한다.
1. CSR: Client Side Rendering: 프론트엔드에서 사용자가 페이지에서 보는 동적인 부분을 대부분 처리하는 방식
프론트엔드 코드에 페이지 리소스들이 미리 정의되어있음. 복잡한 프로젝트 구성, 큰 개발 사이즈
2. SSR: Server Side Rendering: 백엔드에서 페이지 대부분의 영역을 처리해서 프론트엔드로 전달하는 방식
백엔드에서 HTML파일을 작성해서 프론트엔드로 전달. 로딩이 완료되면 페이지와 데이터가 한번에 표시됨
2.2 Express.js
- Node.js의 웹 프레임워크 중 가장 유명한 프레임워크
- 필요에 따라 유연하게 구조 설정 가능
- 다양한 미들웨어를 통해 필요한 기능을 간단하게 추가 가능
- 모든 동작이 명시적으로 구성되기 때문에 웹 프레임워크의 동작 방식을 이해하기 가장 좋다.
2.2.1 Express.js의 구조
- app.js: 가장 기본이 되는 파일, 웹 앱의 기능을 정의
- bin/www: 실행 부분을 담당. 포트와 실행 오류 등을 정의
- public: 코드를 통하지 않고, 직접 제공되는 파일 디렉토리
- routes: 라우팅 파일 디렉터리
- views: HTML templete디렉토리
2.2.2 동작 방식
- localhost:3000
- app.js ->
app.use('/', indexRouter);
- routes/index.js ->
router.get('/', ...);
- routes/index.js ->
res.render('index', ...);
- views/index.ejs
2.2.3 app
app.use()
: middleware를 사용하기 위한 함수
app.listen()
: http 서버를 생성해주는 함수, http.createServer()
대체 가능
app.locals
: app에서 사용할 공통 상수
2.2.4 app Routing
- app객체에 직접 get, post, put, delete함수를 사용해 HTTP method로 라우팅할 수 있음.
- all함수를 사용하면 HTTP method에 상관없이 라우팅 가능
- 다만 라우팅의 핵심인 그룹화를 지원하지 않음. express.Router를 통해 모듈화 가능
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
app.all('./all', (req, res) => {
res.send('ANY /');
});
app.listen(process.env.PORT, () => {
console.log(`Server is running on port ${process.env.PORT}`);
});
2.2.4 Express.Router
- router객체도 app처럼 get, put, post, delete함수를 사용할 수 있음.
- 라우터는 일반적으로 모듈로 만들어서 사용함
const express = require('express');
const router = express.Router();
router.get('/', (req, res, next) => {
res.send('respond with a resource');
});
module.exports = router;
const userRouter = require('./routes/users');
const app = express();
app.use('/users', userRouter);
2.2.5 path parameter & Request Handler
- path parameter를 사용해 주소의 일부를 변수처럼 사용할 수 있음
- get, put, post, delete등의 함수에 콜백 함수로 전달되는 함수를 말함
설정된 라우팅 경로에 해당하는 요청이 들어오면 실행하고 요청을 확인해 응답을 보낸다
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send("OK");
});
app.get('/say/:greeting', (req, res) => {
const {greeting} = req.params;
res.send(greeting);
});