libuv
상대경로
.
├── package.json
└── src
├── exception
│ └── base.exception.js
├── libs
│ ├── math.js
│ └── run.js
└── middleware
└── authentication
└── authentication.middleware.js이런 디렉토리를 가진 상황에서 src/libs/run.js 파일에서, 모든 모듈을 가져오도록 작성보면 이렇다.
import를 해놓고 호출을 해주지 않으면 import한 코드줄이 활성화가 안된것처럼 보일 수 있음.
../와 ./의 차이는 ./ 은 같은 디렉토리 선상에 있다는걸 표현하는 코드 이고, ../는 상위디렉토리로 올라가는 코드임.
run.js에서 exception폴더에 있는 base.exception.js에 접근하기위해서는 run.js의 상위폴더인 src => exception폴더로 접근해야한다. (../exception/base.exception.js)
//함수이름이 없다고 당황하지 않고, from에는 경로적고,
// import에는 내가 쓸 아무 이름이나 적으면 됨.
import math from './math.js';
import authenticationMiddleware from '../middleware/authentication/authentication.middleware.js';
import baseException from '../exception/base.exception.js';
math();
baseException();
authenticationMiddleware();
이런 default function도 위와같이 import baseException from '../exception/base.exception.js'; 로 import 다음에 내가 부르고 싶은 이름 불러서 쓰면 되나봄.
Rounting
Routing
클라이언트의 요청(request : HTTP 메소드, 주소 등)에 대응해 응답(response)하는 방식
Router
클라이언트의 요청을 쉽게 처리 할 수 있게 도와주는 Express.js의 기본 기능
Router의 구조router.method(PATH, HANDLER);
router: express.js의 라우터를 정의method: HTTP Method 나타냄(get, post put, patch, delete)PATH: 실제 서버에서 API를 사용하기 위한 경로 (users, posts...)HANDLER: 라우트가 일치할 때 실행되는 함수
app.js는 서버의 설정, 동작을 정의하는 역할을 한다.
중요한건 클라이언트와 서버 간의 객체 이동이다. (글씨 완전 괴발개발..)
클라이언트 -> 서버 : 특정 HTTP Method, URL (header, body data...)
서버 : 비즈니스 로직 수행
서버 -> 클라이언트 : 응답 객체 (상태코드, 응답메세지, 응답헤더...)
- 특정 HTTP Method : get, post put, patch, delete
- URL:
/api같은거
클라이언트가 서버로 보내는 두가지(물론 그 안에 여러 데이터가 엄청 많음)를 이용하여 백엔드개발자는 갖고있는 DB를 보내주거나 하는 작업을 한다.
method : get이라면 읽기(Read), post라면 쓰기(create), put과 patch라면 업데이트(update), delete라면 삭제(delete).
이와 같이 어떤 CRUD를 할건지 결정하여 메소드를 적으면,
PATH : 어느경로에서 처리를 할건지 명시해주면 된다.
HANDLER : 그 후 어떤 정보(매개변수) 어떤 로직을 구현할건지 화살표함수로 표현하면 된다.
router.get, router.post...이런 라우터를 어디에 적어야할지 솔직히 처음이라 그런가 헷갈릴때가 있는데 라우터는 모듈안에 적으면 된다. 하나의 기능을 하는 단위라고 생각하면 되는데 아래와 같은 코드에서는 하나의 모듈이 goods.js이고, 그걸 불러와서 전체적인 서버의 동작과 설정을 담당하는건 app.js이다. 그래서 app.js에서는 app.블라블라 하는것들만 적혀있고 router는 없다. 이에 반해 goods.js는 router.get, router.post와 같은 내용이 있다.
쉽게 말해 goods.js은 실무자고, app.js는 관리자인 느낌.
// app.js
import express from 'express';
import goodsRouter from './routes/goods.js';
const app = express();
const PORT = 3000;
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.listen(PORT, () => {
console.log(PORT, '포트로 서버가 열렸어요!');
});
// localhost:3000/api -> goodsRouter
app.use('/api', [goodsRouter]);// routes/goods.js
import express from 'express';
// Express.js의 라우터를 생성
const router = express.Router();
//API: 서버 - DB에 대한 출입구 역할(상호작용할 수 있도록 하는 프로토콜의 총집합)
//엔드포인트 : API가 서버에서 리소스에 접근할 수 있도록 가능하게 하는 URL
// localhost:3000/api/ GET
router.get('/', (req, res) => {
res.json('메인화면');
});
// localhost:3000/api/about GET
router.get('/about', (req, res) => {
res.json('about를 넣으면 나오는 페이지');
});
//router를 app.js에서 사용하기 위해 export하는 코드
export default router;=> vscode의 터미널에서 node app.js를 실행하면 터미널에 아래와 같이 뜬다.
이와같이 뜨는 이유는 app.js에서 아래와 같이 설정해줬으니까!
그 후 브라우저에http://localhost:3000/을 입력하면
이와 같은게 뜬다. 이렇게 메인화면이 뜨는 이유는 app.js에서 입력해줬으니까!
주소 뒤에 /api와 /api/about를 입력하면 아래와 같은 창이 뜬다.
뒤에 /api 로 시작되는 주소는 routes/goods.js 에 있는 Router 미들웨어를 통해 처리됨.
미들웨어(Middleware)가 뭐여?
서버에서 요청을 받을때 가끔 모든 요청에 대해 공통적인 처리를 하고싶은 경우가 생길 수 있습니다. 그럴때 미들웨어를 이용하여 서버의 요청/응답에 대해 공통적으로 관리가 가능
저장하고 다시 시작하지않으면 갱신이 되지않는다. 꼭 서버를 끊고 다시 해야한다.
API
// app.js
import express from 'express';
import goodsRouter from './routes/goods.js';
import newsRouter from './routes/news.js';
const app = express();
const PORT = 3000; // 서버를 열 때 사용할 포트 번호
app.get('/', (req, res) => {
res.send('Hello World!');
});
// localhost:3000/api -> goodsRouter
// localhost:3000/api -> newsRouter
// 2. 라우터를 등록 합니다. (app.use는 미들웨어. => 주소(/api)에 각 오른쪽에 있는 api들을 연결)
app.use('/api', [goodsRouter, newsRouter]);//goodsRouter, newsRouter는 api
// 1. Express.js의 서버를 엽니다. (어떠한 PORT번호로 어떠한 서버를 실행할건지)
app.listen(PORT, () => {
console.log(PORT, '포트로 서버가 열렸어요!'); //서버가 실행되면 consol.log가 찍힘
});
// routes/goods.js
import express from 'express';
// Express.js의 라우터를 생성
const router = express.Router();
//API: 서버 - DB에 대한 출입구 역할(상호작용할 수 있도록 하는 프로토콜의 총집합)
//엔드포인트 : API가 서버에서 리소스에 접근할 수 있도록 가능하게 하는 URL
// localhost:3000/api/ GET
router.get('/', (req, res) => {
res.json('메인화면');
});
// localhost:3000/api/about GET
router.get('/about', (req, res) => {
res.json('about를 넣으면 나오는 화면');
});
//router를 app.js에서 사용하기 위해 export하는 코드
export default router;실습하기
상품 목록 조회
/** 상품 목록 조회 **/
// localhost:3000/api/goods GET
router.get('/goods', (req, res) => {
return res.status(200).json( { goods : goods });
});상품 상세 조회
/** 상품 상세 조회 **/
// localhost:3000/api/goods/:goodsId GET
router.get('/goods/:goodsId', (req, res) =>{
const goodsId = req.params.goodsId;
const goodsItem = goods.find(item => item.goodsId === +goodsId);
return res.status(200).json( { goods : goodsItem });
})상품 등록
/** 상품 등록 **/
//아직 데이터베이스랑 연결을 하지않았기 때문에 goods.js파일에 데이터를 담아서 사용한다.
const goods = [
{
goodsId: 1,
name: '상품 1',
thumbnailUrl:
'https://cdn.pixabay.com/photo/2016/09/07/19/54/wines-1652455_1280.jpg',
category: 'drink',
price: 6.2,
},
{
goodsId: 2,
name: '상품 2',
thumbnailUrl:
'https://cdn.pixabay.com/photo/2014/08/26/19/19/wine-428316_1280.jpg',
category: 'drink',
price: 0.11,
},
{
goodsId: 3,
name: '상품 3',
thumbnailUrl:
'https://cdn.pixabay.com/photo/2016/09/07/02/12/frogs-1650658_1280.jpg',
category: 'drink',
price: 2.2,
},
{
goodsId: 4,
name: '상품 4',
thumbnailUrl:
'https://cdn.pixabay.com/photo/2016/09/07/02/11/frogs-1650657_1280.jpg',
category: 'drink',
price: 0.1,
},
];
// localhost:3000/api/goods/ POST
router.post('/goods', (req, res) => {
const { name, thumbnailUrl, category, price } = req.body; //요청바디에서 필요한 정보 갖고오기
const goodsId = goods[goods.length-1].goodsId + 1; //위의 데이터 goods마지막에 id를 추가하기 위한 코드
const goodsItem = {
goodsId,
name,
thumbnailUrl,
category,
price
}; // 각 속성에 담기위해 객체를 선언
goods.push(goodsItem) //객체 선언한 거(상품 정보를 등록하기 위한 객체정보)를 goods에 넣기
return res.status(201).json({ goods:goodsItem }); //정보입력이 성공하였다는 뜻의 201 상태코드와 입력요청한 값을 같이 클라이언트한테 응답.
})app.js에서 쓸 수 있도록 내보내기
export default router;