# 1. Express

키워드

* Express 란
* URL 구조
* REST API
* HTTP Method(CRUD)

## Express

Node.js 웹 애플리케이션 프레임워크

Node.js

* V8엔진으로 빌드된 자바스크립트 런타임
  * 런타임 : 특정 언어로 만든 프로그램을 실행할 수 있는 환경
* 다양한 자바스크립트 애플리케이션을 실행할 수 있게 해줌(주로 서버를 실행)

Express

* Node.js에서 효율적으로 웹 애플리케이션을 개발할 수 있도록 도와주는 프레임워크
* HTTP 유틸리티 메소드 및 미들웨어로 쉽고 빠르게 API를 작성할 수 있음

ts-node

.ts 파일을 따로 컴파일하지 않고 node.js에서 타입스크립트를 실행하는 도구

### Express 환경 설정

```bash
mkdir express-demo-app
cd mkdir express-demo-app
```

.gitignore 세팅

```bash
touch .gitignore
echo "/node_modules/" > .gitignore
```

패키지 초기화

```bash
npm init -y
```

TypeScript

```bash
npm i -D typescript
npx tsc --init
```

ESLint

```bash
npm i -D eslint
npx eslint --init
```

ts-node

```bash
npm init -y
```

Express 설치

```bash
npm i express
npm i -D @types/express
```

### Hello World 예제

app.ts `http://localhost:3000/`으로 GET요청이 들어오면 `Hello, world!`를 응답

```js
import express from 'express';

const port = 3000;

const app = express();

app.get('/', (req, res) => {
  res.send('Hello, world!');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});
```

ts-node로 실행

```bash
npx ts-node app.ts
```

코드 수정시 자동으로 반영되도록 nodemon 사용

```bash
npm i -D nodemon
npx nodemon app.ts
```

package.json script 세팅

```js
  "scripts": {
    "start": "npx nodemon app.ts",
    "lint": "eslint --fix ."
  },
```

## REST API

* URI는 정보의 자원을 표현
  * `/write-post` 처럼 동작을 표현하지 않고 `/post` 처럼 자원만 명시
* 자원에 대한 행위는 HTTP Method로 표현(GET, POST, PUT, DELETE)
  * Collection(복수)과 Item(Element)(단수)로 나뉨
  * 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 예제

```js
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 });
});
```

`http://localhost:3000/products` 접속하여 확인

CommandLine으로 확인

`curl localhost:3000/products`

`http localhost:3000/products`


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://haeuns-organization.gitbook.io/megaptera-frontend-course/week4/1.express.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.