Elice SW engineer - TIL day 26, 27

Circlewee·2022년 5월 10일
0

Elice SW 2 TIL

목록 보기
24/31

1. NPM

  • Node Package Manager
  • Node.js 프로젝트를 관리하는 필수적인 도구
  • online storage: 많은 양의 오픈소스 라이브러이와 도구들이 업로드 됌
  • 커맨드라인 툴과 온라인 저장소로 이루어짐

1.1 command

  1. npm init: 프로젝트 디렉토리를 생성, 몇 번의 질문을 통해 package.json파일을 만들어 주고 디렉토리를 Node.js프로젝트로 만듬.
    • pacakage.json: 프로젝트 관련 정보들이 저장되는 파일. 직접 수정하거나 npm을 이용해 수정 가능
  2. npm install [package-name]: (로컬, 전역)의존성을 추가할 수 있음.
    --save-dev: 옵션 사용시 개발용 의존성으로 추가 가능
    [version]: 특정 버전 패키지 설치 가능
    --global: 전역 패키지 디렉토리에 설치, 전역 패키지로도 사용 가능하나 의존성이 package.json에 명시되어 있는 것이 프로젝트 관리의 좋은 방향
  3. npm remove [package-name]: 의존성 패키지를 삭제
  4. npm run: 스크립트 실행

1.2 NPX

  • npm 패키지를 설치하지 않고 사용할 수 있게 해주는 도구. 노드 버전별로 호환성을 확인하거나 gist코드를 실행할 수 있다.

1.3 module

  • 반복되는 코드를 모듈로 분리하여 사용
  • 패키지는 모듈의 모음
  1. process: 현재 실행 프로세스 관련 기능 제공. arch, argv, env등 실행 환경 및 변수 제공
  2. fs: 파일 입출력을 하기 위해 사용. 읽기, 쓰기, sync함수로 동기적 동작, watch로 파일/디렉토리 변경 이벤트를 감지할 수 있다.
  3. http: createServer로 서버를 생성하거나 request로 요청을 생성할 수 있다.

1.3.1 named-module

  • 모듈을 exports object의 property로 등록한다.
exports.name = name;
exports.func = () => {};

const exp = require(/* directory name */) // exp = {name, func}

1.3.2 function-module

  • 모듈을 module.exports에 할당
module.exports = (name, age) => {
  return { name, age };
}

// person = { 'park', 25 }
const person = requrie(/* something */ )('park', 25);

1.3.3 require

  • require할 때 모듈 코드가 실행된다. Node.js의 모듈은 첫 require시에 cache되기 때문에 두 번 실행하지 않는다.
  • 만약 여러 번 실행하고 싶다면 함수 모듈로 작성해야 한다.
  1. npm package: require('package=name')으로 로드. node_modules에 존재해야함
const myModule = require('./my-module');
  1. 직접 작성한 모듈: require('directory or filename')으로 로드.
    my-module이 js파일인 경우 해당 파일 load(확장자 생략가능)
    디렉토리인 경우 my-module/index.js파일 load
  2. 함수형 모듈: load한 경우에 실행되지 않고 함수를 사용할 때 실행
  3. 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의 구조

  1. app.js: 가장 기본이 되는 파일, 웹 앱의 기능을 정의
  2. bin/www: 실행 부분을 담당. 포트와 실행 오류 등을 정의
  3. public: 코드를 통하지 않고, 직접 제공되는 파일 디렉토리
  4. routes: 라우팅 파일 디렉터리
  5. views: HTML templete디렉토리

2.2.2 동작 방식

  1. localhost:3000
  2. app.js -> app.use('/', indexRouter);
  3. routes/index.js -> router.get('/', ...);
  4. routes/index.js -> res.render('index', ...);
  5. views/index.ejs

2.2.3 app

  1. app.use(): middleware를 사용하기 위한 함수
  2. app.listen(): http 서버를 생성해주는 함수, http.createServer()대체 가능
  3. app.locals: app에서 사용할 공통 상수

2.2.4 app Routing

  • app객체에 직접 get, post, put, delete함수를 사용해 HTTP method로 라우팅할 수 있음.
  • all함수를 사용하면 HTTP method에 상관없이 라우팅 가능
  • 다만 라우팅의 핵심인 그룹화를 지원하지 않음. express.Router를 통해 모듈화 가능
// app.js
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함수를 사용할 수 있음.
  • 라우터는 일반적으로 모듈로 만들어서 사용함
// ./routes/users.js
const express = require('express');
const router = express.Router();

router.get('/', (req, res, next) => {
  res.send('respond with a resource');
});

module.exports = router;

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

app.use('/users', userRouter);

2.2.5 path parameter & Request Handler

  1. path parameter를 사용해 주소의 일부를 변수처럼 사용할 수 있음
  2. get, put, post, delete등의 함수에 콜백 함수로 전달되는 함수를 말함
    설정된 라우팅 경로에 해당하는 요청이 들어오면 실행하고 요청을 확인해 응답을 보낸다
const express = require('express');

const app = express();

app.get('/', (req, res) => {
    res.send("OK");
});

// path parameter 사용하기
app.get('/say/:greeting', (req, res) => {
    const {greeting} = req.params;
    res.send(greeting);
});
profile
공부할 게 너무 많아요

0개의 댓글

관련 채용 정보