Express
학습 키워드
Express 란 👉🏻 Express 실습해보기
URL 구조 👉🏻 URL vs URI
REST API 👉🏻 REST API란 무엇인가
HTTP Method(CRUD)
Express
\
간단한 서버 앱 npm 패키지 세팅
mkdir express-demo-app
cd mkdir exrpress-demo-app
npm init -y
node_modules 파일이 올라가는 일이 없게 가장 먼저 .gitignore 파일 만들기
touch .gitignore
echo "node_modules" > .gitignore
타입스크립트 설치
npm i -D typescript
npx tsc --init
ts-node 설치
npm i -D ts-node
ts-node 실행 명령어 👉🏻 npx ts-node
eslint 설치
npm i -D eslint
npx eslint --init
"What type of modules does your project use?" 질문에 무엇을 골라야할까?
기본적으로 Node.js는 CommonJS 구현체
타입스크립트를 쓰면 import/export를 사용할 수 있기 때문에 JavaScript module을 사용
\
\
Express 설치
npm i express
npm i -D @types/express
\
Hello World 예제
TypeScript에 맞춰서 app.ts 파일 작성
import express from 'express';
const port = 3000;
// express를 호출하면 app이라는 인스턴스가 만들어짐
const app = express();
app.get('/', (req, res) => {
res.send('Hello, world!');
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
\
ts-node로 실행
npx ts-node app.ts
// 코드를 간소화하고싶다면 package.json에 script 추가하기
"start": "npx ts-node app.ts"
메세지를 바꿀 수도 있음
app.get('/', (req, res) => {
res.send('Hello, world!!');
});
👉🏻 현재는 새로고침해도 바뀌지 않는다.
\
\
코드를 수정할 때마다 서버를 재실행해야 하는 문제를 피하기 위해 nodemon 사용
npm i -D nodemon
nodemon app.ts
// package.json scripts 변경
"start": "npx nodemon app.ts"
\
REST API
Roy Fielding - “Architectural Styles and the Design of Network-based Software Architectures” (2000)
대개는 “필딩 제약 조건” 4가지를 모두 만족하지 않고, Resource와 HTTP Verb만 도입하는 수준으로 사용.
이렇게 안 하고: /write-post
이렇게 하자: /posts → 뭔가를 한다 (CRUD)
\
\
CRUD에 대해 HTTP Method를 대입. Read는 Collection(복수)과 Item(Element)(단수)로 나뉨.
기본 리소스 URL: /products
Read (Collection) → GET /products ➡️ 상품 목록 확인
Read (Item) → GET /products/{id} ➡️ 특정 상품 정보 확인
Create (Collection Pattern 활용) → POST /products ➡️ 상품 추가 (JSON 정보 함께 전달)
Update (Item) → PUT 또는 PATCH /products/{id} ➡️ 특정 상품 정보 변경 (JSON 정보 함께 전달)
Delete (Item) → DELETE /products/{id} ➡️ 특정 상품 삭제
\
Thinking in React 예제에 적용하기
app.get('/products', (req, res) => {
const products = [
{
category: 'Fruits',
price: '$1',
stocked: true,
name: 'Apple',
},
{
category: 'Fruits',
price: '$1',
stocked: true,
name: 'Dragonfruit',
},
{
category: 'Fruits',
price: '$2',
stocked: false,
name: 'Passionfruit',
},
{
category: 'Vegetables',
price: '$2',
stocked: true,
name: 'Spinach',
},
{
category: 'Vegetables',
price: '$4',
stocked: false,
name: 'Pumpkin',
},
{
category: 'Vegetables',
price: '$1',
stocked: true,
name: 'Peas',
},
];
res.send({ products });
});
자바스크립트 Object 넣어주면 자동으로 JSON으로 바꿔줌!
res.send(JSON.stringify({ products })); // -> 오히려 헷갈림
Last updated