DAY 27 - TIL

NPM

• node.js 프로젝트를 관리하는 필수적인 도구, 온라인 저장소 + 커맨드라인 도구
• 온라인 저장소 - 수많은 오픈소스 라이브러리와 도구들이 업로드되는 저장소
• 커맨드라인 도구 - 프로젝트 관리를 위한 다양한 명령어를 제공

 

npm init

프로젝트 디렉터리를 생성하고, 해당 디렉터리 안에서 package.json이라는 파일 생성

package.json 

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

 

npm install 

프로젝트 의존성 관리 

의존성 추가/내려받기 , 개발용 의존성 추가, 전역 패키지 추가 

추가된 패키지는 package.json의 dependencies 안에 추가

package-lock.json, node_modules 추가

 

node_modules  디렉터리는 코드 관리나 배포 시에 업로드 X

의존성이 많아지면 용량이 너무 커지는 것과 운영체제별로 실행되는 코드가 다른 경우가 존재

 

로컬 패키지 VS 전역 패키지

로컬 패키지 

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

전역 패키지

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

 

npm script를 사용하는 이유

npm script 내에선 의존성 패키지를 사용

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

start - 프로젝트 실행

stop - 프로젝트 종료

run을 제외하고 사용할 수 있을 뿐, npm 내부적으로 코드를 제공해 주는 것은 아님

 

NPX

• NPM 패키지를 설치하지 않고 사용할 수 있게 해주는 도구
• NPX를 사용하면 Node.js의 특징 버전을 사용하여 js파일을 실행할 수 있음
• gist는 github에 등록된 간단한 코드로 npx를 이용하면 gist코드를 다운받지 않고 바로 실행가능(git이 설치됨)

 

모듈

프로젝트가 커짐에 따라 기능에 맞게 코드를 분리하는 방법으로 대체로 반복되는 코드를 모듈로 분리

패키지는 모듈의 모음

fs 모듈

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

http 모듈

• http 서버, 클라이언트를 위해 사용
• createServer 함수로 서버 생성
• Request 함수로 http 요청 생성

모둘의 사용 방법 : require 사용

• require 할 때 모듈 코드가 실행
• Node.js의 모듈은 첫 require 시에 cache(메모리에 캐쉬된 모듈 사용), 두 번 실행하지 않음
• 모듈 코드를 여러 번 실행하기 위해선 함수 모듈로 작성
• 의존성 패키지 사용 - require('패키지이름')
• 직접 작성한 모듈 사용 - require('상대경로')
• 함수형 모듈은 load한 경우 모듈이 바로 실행되지 않고, 필요한 시점에 load된 함수를 실행하여 모듈을 사용
• json파일도 load가능하며 object로 자동 파싱

 

ES Module

• commonjs는 module.exports와 require로 모듈을 만들고 사용
• ES Module은 export와 import로 모듈을 만들고 사용

module.exports VS exports

module.exports
module.exports는 require() 함수를 사용했을 때 반환 받는 변수이며 비어 있는 객체가 기본값이며 어떤 것으로도 자유롭게 변경 가능하다

 

exports
exports 자체는 절대 반환되지 않는다. exports는 단순히 module.exports를 참조한다.  exports를 사용하면 모듈을 작성할 때 더 적은 양의 코드로 작성할 수 있으며 이 변수의 프로퍼티를 사용하는 방법도 안전하고 추천하는 방법이다.

 

두가지 방법의 가장 큰 차이는 exports를 사용할 때는 exports 객체에 프로퍼티를 추가하고, module.exports를 사용할 때는 module.exports 변수에 아예 새로운 객체를 할당하는 것

 

 

웹 서비스 동작 방식

웹

World Wide Web, 인터넷 상에서 동작하는 모든 서비스

 

웹 서비스

• 웹 서비스는 기본적으로 HTTP 요청과 응답의 반복으로 이루어짐
• HTTP 요청은 사용자가 어떤 데이터가 필요한지를 서버에게 알리는 역활
• HTTP 응답은 HTTP 요청에 해당하는 적절한 데이터를 전달하는 역활

1. 브라우저가 인터넷을 통해 HTTP요청을 서버에 전달
2. 서버는 사용자의 HTTP 응답을 브라우저로 전송
3. 브라우저는 HTTP 응답을 사용자에게 적절한 화면으로 노출

 

동적 웹의 두 가지 구현 방식

CSR

• Client-side Rendering
• 프론트엔드에서 사용자가 페이지에서 보는 동적인 부분을 대부분 처리하는 방식
• 사이트가 변하는 부분을 프론트엔드에서 처리
• 프론트 엔드 코드에 페이지 리소스들이 미리 정의
• 서버와의 통신은 API 통신을 이용
• 빠른 반응이지만 페이지의 내용은 API호출이 완료된 후 보여짐
• 복잡한 프로젝트 구성, 큰 개발 사이즈

 

SSR

• Server-side Rendering
• 백엔드에서 페이지 대부분의 영역을 처리해서 프론트엔드로 전달하는 방식
• 사이트가 변하는 부분을 백엔드에서 처리
• 백엔드에서 HTML 파일을 작성해서 프론트엔드로 전달
• CSR에 비해 쉬운 구성, 작은 개발 사이즈
• 로딩이 완료되면 페이지와 데이터가 한 번에 표시됨
• 상대적으로 사용자가 보기엔 로딩이 느려보임
• 페이지 이동할 때 마다 다시 로딩하기 때문에 페이지 깜빡임

 

Express.js

웹 프레임 워크

• 웹 서비스에 필요한 기능들을 제공해주는 다양한 도구들의 모음
• 웹 서비스를 구성하기 위해서는 매우 많은 기능이 필요한데 직접 만드는 것에는 많은 비용 발생
• 웹 서비스는 많은 부분이 정형화되어 있어서 프레임워크를 통해 정형화된 부분을 간단하게 구현
• 필요한 부분만 집중해서 개발
• 웹 서비스의 정형화 된 구성을 많은 웹 프레임워크가 기본적으로 제공
• HTTP 요청 처리 / HTTP 응답 처리 / 라우팅 / HTML Templating

라우팅 

• 웹 프레임워크는 HTTP 요청을 분기하는 방법을 제공
• HTTP 요청 URL에 해당하는 알맞는 응답의 경로를 미리 설정
• app라우팅과 Express.Router를 통한 라우팅으로 나누어짐

app라우팅

• app 객체에 직접 get/post/put/delete 함수를 사용하여 HTTP method로 라우팅
• HTTP method 함수의 첫 번째 인자가 이 라우팅을 실행할 URL
• 마지막 인자가 이라우팅이 실행될 때 작동하는 함수
• all 함수를 사용하면 HTTP method에 상관없이 라우팅 가능

app.get('/', (req, res) => {
	res.send('GET /');
});
app.post('/', (req, res) => {
	res.send('POST /');
});
app.put('/', (req, res) => {
	res.send('PUT /');
});
app.delete('/', (req, res) => {
	res.send('DELETE /');
});
app.all('/all', (req, res) => {
	res.send('ANY /');
});

Express.Router

• app 라우팅을 통해서는 라우팅의 핵심인 그룹화를 지원하지 않음
• Express.Router 를 통해 라우팅을 모듈화 할 수 있음
• router 객체에도 app 객체처럼 get, put, post, delete 함수를 사용할 수 있음
• app의 함수와 동일한 동작을 하는 함수로 첫 번째 인자가 라우팅 될 URL이고, 마지막 인자가 라우팅 시 실행될 함
• 라우터는 일반적으로 모듈로 만들어서 사용함
• 작성된 라우터 모듈을 app 에 use함수로 연결하여 사용할 수 있음
• router 객체에도 하위 라우터를 use 함수로 연결하여 사용할 수 있음
• path parameter를 사용하면, 주소의 일부를 변수처럼 사용할 수 있음 ex) /users/:id

--- ./app.js
const userRouter = require('./routes/users');
const app = express();
app.use('/users', userRouter);

--- ./routes/users.js
const petRouter = require('./users'); 
const router = express.Router();
router.use('/users', petRouter);
module.exports = router;

 

 

HTML Templating

• 웹 프레임워크는 SSR을 구현하기 위한 방법을 제공
• SSR에서 응답으로 보낼 HTML을 서버에서 장성하기 위해 HTML Template를 통해 미리 페이지의 뼈대를 작성 가능

 

Express.js

• Node.js의 웹 프레임워크 중 가장 유명한 웹 프레임워크
• 필요에 따라 유연하게 구조 설정 가능
• 다양한 미들웨어를 통해 필요한 기능을 간단하게 추가 가능
• 모든 동작이 명시적으로 구성되어 동작 방식 이해하기 좋음

 

Express.js 동작 순서

1. npm start로 Express.js프로젝트를 실행하여 브라우저에서 localhost에 접속
2. app.js → app.use('/', indexRouter); 
3. routes/index.js → router.get('/', ...
4. routes/index.js → res.render('index', ...
5. views/index.jade

app.js

• app.js에서는 express()로 생성된 app객체를 확인할 수 있음
• app 객체는Express.js의 기능을 담은 객체
• Express.js의 모든 동작은 app객체에 정의됨

app.use()

미들웨어를 사용하기 위한 함수

 

app.listen()

http 서버를 생성해주는 함수

express-generator를 사용하면 http.createServer를 사용하는데 app.listen 함수로 대체 가능

 

app.locals 

app에서 사용할 공통 상수 

 

 

Request Handler

• 라우팅에 적용되는 함수 / HTTP 요청과 응답을 다룰 수 있는 함수
• router나 app의 HTTP method 함수의 가장 마지막 인자로 전달되는 함수
• 설정된 라우팅 경로에 해당하는 요청이 들어오면 Request Handler 함수가 실행

 

Request 객체

HTTP 요청 정보를 가진 객체

HTTP 요청의 parth parameter, query parameter, body, header 등을 확인 가능

 

req.params

URL 표현 중 /path/:id 에서 :id 를 req.params.id 로 사용 가능

 

req.queries

URL 표현 중 /path?page=2 에서 page 부분을 req.queries.page 로 사용가능

 

req.body

일반적으로 POST 요청의 요청 데이터를 담고 있음 req.body 에 요청 데이터가 저장되어 들어옴

 

req.get('')

HTTP Request 의 헤더 값을 가져올 수 있음 req.get('Authorization') 등으로 값을 가져옴

 

 

Request 객체

HTTP 응답을 처리하는 객체

HTTP 응답의 데이터를 전송하거나, 응답 상태 및 헤더를 설정할 수 있음

 

res.send()

text 형식의 HTTP 응답을 전송함

 

res.json()

json 형식의 HTTP 응답을 전송

 

res.render()

HTML Template 을 사용하여 화면을 전송

 

res.set()

HTTP 응답의 헤더를 설정

 

res.status()

HTTP 응답의 상태 값을 설정