본문 바로가기
Frontend/엘리스 SW 엔지니어 트랙

[ 엘리스 SW 엔지니어 트랙 ] 28일차

by YWTechIT 2021. 12. 2.
728x90

📍 28일 차 12.2. 목(실시간 강의)

바쁘게 살면 시간이 빨리 가는것처럼 느껴지는 특징이 있는데, 지금의 내가 그렇다. 엄청 많이 한 것 같지도 않은데 벌써 목요일이다. 얼른 수료하고 취업전선에 뛰어들고 싶다. 오늘은 npm, API, RESTAPI, express.js, middleware에 관한 내용을 배웠다.


❏ npm

  1. npm init: package.json 파일 생성
  2. package.json: 모듈을 관리하는 파일
  3. package.json - dependencies: 내가 설치한 라이브러리를 보여준다. 버전 앞에 ^는 버전을 대략적으로 보여준다. 업데이트 부분에서 자세하게 다룬다.
  4. npm cache clean -f: 캐쉬 강제로 비우기
  5. node_modules: 내가 설치한 모듈의 자세한 정보(내 컴퓨터 - programfiles라고 생각하면 편하다.)
  6. 다른 개발자들과 협업할 때는 package.json에 있는 모듈의 버전말고 package-lock.json 파일에 있는 모듈의 버전을 알려줘야 에러를 방지할 수 있다. package.json은 버전이 대략적으로만 나와있다.
  7. npm install [package-name] --save-dev: 개발용으로 모듈을 설치한다.
  8. npm install \ yarn install: node_modules가 없을 때 package.json 파일을 참고하여 node_modules를 설치해준다. (git clone 하고 나서 사용하면 된다.)
  9. npm install --production: 개발용 의존성(devDependencies) 모듈은 제외하고, dependencies에만 설치한다.
  10. sementic versioning: 0.0.0(앞에서부터 major, minor, patch 순서로 부른다.)
  11. npm update [package-name]: 버전 앞에 ^가 붙어있으면 두번째 자리인 minor한 최신 버전을 업데이트한다. 버전 앞에 ~가 붙어있으면 세 번째 자리인 patch 를 최신 버전으로 업데이트한다.
  12. npm install -g [package-name]: 글로벌로 모듈을 설치한다.
  13. yarn add [package-name]: 모듈 설치
  14. yarn add -D [package-name]: 개발용 모듈 설치
  15. yarn remove [package-name]: 모듈 제거
  16. scripts: CLI 명령어 설정

❏ API

  1. 내장 라이브러리로 사용하다 외부에 데이터를 저장해서 서버와 통신기 기간에 정보를 주고받는 값을 말한다.
  2. soap, rest: 정보 교환의 표준성 개발을 의미하는데, soapxml 기반으로 html처럼 코드가 복잡해서 이를 보완하기 위해 나온 것이 rest다. restjson 기반으로 코드가 간결하다.
  3. --print=hHbB: 헤더를 통해 보낸 값과 받은 값을 보여주는 명령어
  4. npm install --save-dev nodemon: node.js의 코드가 바뀔 때마다 자동으로 새 로고 침해 주는 라이브러리, 개발용으로만 사용하고 배포할 때는 사용하지 않는 것을 권장한다.
  5. ?: 매개변수(쿼리끼리는 &로 구분한다.)
http://localhost:9999/routes/is_odd_2?number=13&number3=1
  1. RESTAPI: API지만, 웹을 통해 원하는 요청을 보내고, 그 요청을 받는 것. URL로 요청을 보내면 HTTP 상태 코드와 함께 결괏값을 보낸다. 요청을 명세에 맞추어 보내야 FE, BE간에 원활한 통신이 가능하다. (swagger: RESTAPI 명세 작성 사이트)
// GET
1. 데이터를 읽거나 검색할때 사용하는 메서드 (성공시 200 return)
2. GET 요청은 읽을 때만 사용, 수정될 때는 사용지 않아야 한다. 

// POST
1. 주로 새로운 리소스를 생성할 때 사용 됨(일반적으로 성공 시 201return)
2. POST는 HTMl body나 JSON으로 전달 함
  1. .dotenv: 함부로 노출할 수 없는 값(APIKEY, password 등)을 env 폴더에 저장해서 사용한다. (gitignore를 꼭 적용하자.)
728x90

❏ MiddleWare

  1. 서버클라이언트사이에 존재, 각기 분리된 2개 이상의 프로그램 사이에서, 매개 역할을 하거나 연합시켜주는 프로그램. next()를 작성하지 않으면 해당 미들웨어에서만 실행하고 다음 미들웨어로 넘어가지 않는다.
  2. Express.js에서 미들웨어는 순차적으로 코드를 실행한다.
  3. 인증 파트에서 middleware를 사용하고 인증이 되었으면, 내 주문, 선물함, 결제내역 등을 보는 데 사용될 수 있다.
  4. html form methods="POST"로 설정하면 URI 뒤에 ?형태로 쿼리 값이 넘어온다
// middle ware의 절차적인 프로세스1
app.use('/', (req, res, next) => {
    console.log('middelware 1');
    next();  // next가 없으면 넘어가지 않는다. 
}

app.use('/', (req, res, next) => {
    console.log('middelware 2');
}

// middle ware의 절차적인 프로세스2: middleware2, hello, express
app.use('/', (req, res, next) => {
    console.log('middelware 2');
    res.send("hello, express!');
}

app.use('/', (req, res, next) => {
    console.log('middelware 1');  // 위 app에서 next가 없기때문에 실행되지 않는다.
}

// middleware에서 값을 넘겨주기
app.use('/', (req, res, next) => {
    console.log('middelware 1');
    const requestdAt = new Date();
    req.requestdAt = requestdAt;
    next();
}

app.use('/', (req, res, next) => {
    console.log(req.resquestedAt);  // Date
}

// promise 사용하기
app.use('/', (req, res, next) => {
    console.log('middelware 1');
    const fileContent = await fs.promises.readFile(".gitignore");
    req.fileContent = fileContent;
    next();
}

// 경로 설정
const express = require('express');
const app = express();
const PORT = 5000;

const fs = require('fs');

app.get('/',(req, res) => {
    res.send("Root - GET")
})

app.post('/',(req, res) => {
    res.send("Root - POST")
})

// ?: 앞의 값이 있어도 되고 없어도 된다.(option)
app.get('/ab?cd',(req, res) => {
    res.send("Root - GET")
})

// +: 앞의 값이 여러개가 와도 된다.
app.get('/ab+cd',(req, res) => {
    res.send("Root - GET")
})

// *: *자리에 아무문자나 와도 된다.
app.get('/ab*cd',(req, res) => {
    res.send("Root - GET")
})

// ()?: ()안의 값은 묶어서 사용한다.
app.get('/a(bc)?cd',(req, res) => {
    res.send("Root - GET")
})

// $: $앞의 값을 포함해야 한다
app.get('/abcd$/',(req, res) => {
    res.send("Root - GET")
})

// []: 배열 안의 값이 매칭될때
app.get(['/abc', '/xyz'],(req, res) => {
    res.send("Root - GET")
})

// 분기처리 전
app.get('/users',(req, res) => {
    res.send("Root - GET")
})

app.get('/users/:id',(req, res) => {
    res.send("Root - GET")
})

// 분기 처리 후
const userRouter = express.Router();
app.get('/',(req, res) => {
    res.send("Root - GET")
})
app.get('/:id',(req, res) => {
    res.send("Root - GET")
})
app.use('/users', userRouter);

// path parameter
userRouter.param('id', (req, res, next, value) => {
    req.user = USERS[value];
    next()
})

userRouter.get('/:id', (req, res) => {
    res.send(req.user);
})

// path parameter2
userRouter.post('/:id/nickname', (req, res) => {
    const { user } = req;
    const { nickname } = req.body;
    user.nickname = nickname;
})
  1. 에러 핸들링
const user = USERS[value];

if(!user){
const err = new Error("User not found");
err.statusCode = 404;
throw err;
}

req.user = user;
next()

// express에서 4개의 인자를 준다. error 핸들링 미들웨어로 인식
app.use((err, req, res, next) => {
res.statusCode = err.statusCode || 500;
res.send(err.message)
})
반응형

댓글