[코드잇] Express 기본 익히기

2023. 5. 21. 23:59

Express란?

Node.js 환경의 서버 프로그램을 만들 때 사용하는 프레임워크

특징:

1. 속도가 빠름

2. 서버 프로그램에 필요한 최소한의 기능만 제공(고집이 세지 않은 프레임워크=자유도가 높은!)

=> 자유도가 높으면 처음 배울 때 접근하기 쉬움

따라서 빠르고 쉽게 서버 프로그램을 만들려고 할 때 적합하다!

사실 서버 프로그램을 만들 때 쓸 수 있는 프레임워크에는 node.js말고도 다양한 프로그램이 있는데요!

예를 들어 Python에는 Django, Java에는 Spring이라고 하는 대표 프레임워크들이 있어요.

Express를 가지고 API Server를 만들 수 있는데요, API Server는 무엇인지 알아봐요!

API Server란?

Server의 종류

웹 페이지를 Response의 Body에 담아서 보내주는 서버(Web Server)
요청을 처리하고 처리한 결과를 Response의 Body에 담아서 보내주는 서버(API Server)

무슨 소리인지 모르겠죠...?ㅜㅜ 한 번 자세히 알아봐요!

Web Server는 화면을 그리는 데 필요한 재료를 Response의 Body에 담아줘요.

API Server는 요청한 작업을 처리하고 처리한 결과를 Response의 Body에 JSON등의 형식으로 담아줘요.

Visual Studio code로 Express 사용해보기

1. cowork directory를 생성하고 visual studio code로 연다.

2. app.js 파일을 생성한다.

3. cowork directory를 하나의 패키지로 만들기 위해 npm init 실행

4. name만 설정해주고 나머지는 기본값으로 설정

5. npm install express

6. app.js에 코드 입력

const express = require('express');

const app = express(); //app 객체

app.get('/hello', (req, res) => {
    res.send('<h1>Hello Express</h1>');
});  //route handler

app.listen(3000);

7. terminal에 node app.js 명령어 입력

*node [실행할 파일 이름]

8. 해당 사이트 주소로 접속하면 잘 실행됨을 확인할 수 있다.

9. server가 잘 실행되는지 확인하기 위해 listen method의 콜백 추가

const express = require('express');

const app = express();

app.get('/hello', (req, res) => {
    res.send('<h1>Hello Express</h1>');
});

app.listen(3000, () => {
    console.log('Server is listening...');
});  //listen method에 콜백 적어주기

직원 정보 조회하기

1. mebers.js 파일을 생성하고 다음의 직원 정보를 넣어주세요!

module.exports = [
  {
    id: 1,
    name: 'Alex',
    team: 'engineering',
    position: 'Server Developer',
    emailAddress: 'alex@google.com',
    phoneNumber: '010-xxxx-xxxx',
    admissionDate: '2018/12/10',
    birthday: '1994/11/08',
    profileImage: 'profile1.png',
  },
  {
    id: 2,
    name: 'Benjamin',
    team: 'engineering',
    position: 'Server Developer',
    emailAddress: 'benjamin@google.com',
    phoneNumber: '010-xxxx-xxxx',
    admissionDate: '2021/01/20',
    birthday: '1992/03/26',
    profileImage: 'profile2.png',
  },
  {
    id: 3,
    name: 'Charles',
    team: 'engineering',
    position: 'Android Developer',
    emailAddress: 'charles@google.com',
    phoneNumber: '010-xxxx-xxxx',
    admissionDate: '2018/10/09',
    birthday: '1994/09/08',
    profileImage: 'profile3.png',
  },
  {
    id: 4,
    name: 'Eric',
    team: 'engineering',
    position: 'Web Frontend Developer',
    emailAddress: 'eric@google.com',
    phoneNumber: '010-xxxx-xxxx',
    admissionDate: '2020/04/07',
    birthday: '1995/04/10',
    profileImage: 'profile4.png',
  },
  {
    id: 5,
    name: 'Danial',
    team: 'marketing',
    position: 'Marketing Manager',
    emailAddress: 'danial@google.com',
    phoneNumber: '010-xxxx-xxxx',
    admissionDate: '2021/04/21',
    birthday: '1991/07/12',
    profileImage: 'profile5.png',
  },
  {
    id: 6,
    name: 'George',
    team: 'marketing',
    position: 'Marketing Staff',
    emailAddress: 'george@google.com',
    phoneNumber: '010-xxxx-xxxx',
    admissionDate: '2020/01/06',
    birthday: '1997/02/09',
    profileImage: 'profile6.png',
  },
  {
    id: 7,
    name: 'Henry',
    team: 'marketing',
    position: 'Marketing Staff',
    emailAddress: 'henry@google.com',
    phoneNumber: '010-xxxx-xxxx',
    admissionDate: '2020/04/03',
    birthday: '1997/08/18',
    profileImage: 'profile7.png',
  },
  {
    id: 8,
    name: 'James',
    team: 'sales',
    position: 'Sales Manager',
    emailAddress: 'james@google.com',
    phoneNumber: '010-xxxx-xxxx',
    admissionDate: '2020/11/26',
    birthday: '1993/05/22',
    profileImage: 'profile8.png',
  },
  {
    id: 9,
    name: 'Kevin',
    team: 'sales',
    position: 'Sales Staff',
    emailAddress: 'kevin@google.com',
    phoneNumber: '010-xxxx-xxxx',
    admissionDate: '2020/06/19',
    birthday: '1989/06/10',
    profileImage: 'profile9.png',
  },
  {
    id: 10,
    name: 'Michael',
    team: 'sales',
    position: 'Sales Staff',
    emailAddress: 'michael@google.com',
    phoneNumber: '010-xxxx-xxxx',
    admissionDate: '2019/11/12',
    birthday: '1992/09/17',
    profileImage: 'profile10.png',
  },
];

2. app.js의 코드를 다음과 같이 수정해주세요!

const express = require('express');

const app = express();

const members = require('./members');

app.get('/hello', (req, res) => {
    res.send('<h1>Hello Express</h1>');
});

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

app.listen(3000, () => {
    console.log('Server is listening...');
});

사이트의 주소로 접속해보면 모든 멤버의 정보를 조회할 수 있어요.

3. 특정 직원의 정보 조회하기

app.get('/api/members/:id', (req, res) => { //:id는 해당 자리에 오는 값을 id에 담으라는 뜻!(Route Parameter)
    const { id } = req.params; //const id = req.params.id와 동일한 의미인데 Object Destructing 방식으로 바꾼 것
    const member = members.find((m) => m.id === Number(id));
    if (member) {
        res.send(member);
    } else {
        res.status(404).send({ message: 'There is no such member' });
    }
});

4. 특정 팀만 조회하기(URL에서 쿼리 부분 가져오기)

app.get('/api/members', (req, res) => {
    const { team } = req.query;
    if (team) {
        const teamMembers = members.filter((m) => m.team === team);
        res.send(teamMembers);
    } else {
        res.send(members);
    }
});

localhost:3000/api/members?team=engineering

POST 리퀘스트를 보내는 방법

지금까지는 서버의 리소스를 조회하는 GET 리퀘스트를 사용했는데요!

이번엔 리소스를 새롭게 추가하는 POST 리퀘스트를 처리하는 코드를 작성해볼게용.

post request에서는 데이터가 들어있는 바디가 필요해요.

그래서 우리가 사용하는 일반 브라우저에서는 post request를 보낼 수가 없어요.ㅜㅜ

VS Code에서 바로 POST 리퀘스트를 보내기 위해 플러그인 하나를 설치해볼게요!

1. test.http파일을 생성하고 다음 코드를 작성해주세요!

GET http://localhost:3000/api/members

###
POST http://localhost:3000/api/members
Content-Type: application/json

{
    "id": 11,
    "name": "Zake",
    "team": "Engineering",
    "position": "Android Developer",
    "emailAddress": "zake@google.com",
    "phoneNumber": "010-xxxx-xxxx",
    "admissionDate": "2021/06/12",
    "birthday": "1995/09/27",
    "profileImage": "profile11.png"
}

#3개는 각각의 리퀘스트를 구분하기 위해 쓰는 표시에요.

POST 리퀘스트는 GET 리퀘스트와 달리 헤드뿐만 아니라 바디도 있습니다.

헤드: POST 메소드, 리퀘스트를 보낼 URL, 바디에 있는 데이터의 타입을 나타내는 Content-Type

application/json이라는 값은 바디에 있는 데이터의 타입이 JSON이라는 뜻이에요.

바디: 새롭게 추가할 직원 정보를 JSON 형식으로 작성

2. app.js에 특정 코드 추가

const express = require('express');

const app = express();

const members = require('./members');
//추가한 코드
app.use(express.json()); //middleware 
.
. //생략
.
//추가한 코드
app.post('/api/members', (req, res) => {
    const newMember = req.body;
    members.push(newMember);
    res.send(newMember);
});

app.listen(3000, () => {
    console.log('Server is listening...');
});

코드를 저장하고 서버를 다시 실행한 후, POST 리퀘스트를 보내면 새로운 멤버 Jake가 잘 추가됩니다.

nodemon과 npm start

1. terminal에서 다음 명령어 실행

npm install nodemon --save-dev

2. package.json의 scripts부분을 다음과 같이 바꿔주세요!

  "scripts": {
    "start": "node app.js",
    "dev": "nodemon app.js"
  },

이렇게 하면 코드를 수정할 때마다 서버를 종료시키고 다시 실행할 필요 없이,

npm start 또는 npm run dev를 이용하여 편하게 사용할 수 있어요!

기존 직원 정보 수정하기

1. app.js에 다음 코드를 추가해주세요!

app.put('/api/members/:id', (req, res) => {
    const { id } = req.params;
    const newInfo = req.body;
    const member = members.find((m) => m.id === Number(id));
    if (member) {
        Object.keys(newInfo).forEach((prop) => {
            member[prop] = newInfo[prop];
        });
        res.send(member);
    } else {
        res.status(404).send({ message: 'There is no member with the id'})
    }
});

2. npm run dev 실행

3. test.http에 다음 코드를 추가해주세요.

###
PUT http://localhost:3000/api/members/1
Content-Type: application/json

{
    "id": 1,
    "name": "Alex",
    "team": "engineering",
    "position": "IOS Developer",
    "emailAddress": "alex@google.com",
    "phoneNumber": "010-xxxx-xxxx",
    "admissionDate": "2018/12/10",
    "birthday": "1994/11/08",
    "profileImage": "profile1.png"
}

PUT 리퀘스트를 보내보면 Alex의 position이 IOS Developer로 잘 바뀐 것을 확인할 수 있어요!

기존 직원 정보 삭제하기

1. app.js의 위쪽에서 선언했던 member변수를 const에서 let으로 바꿔주세요.

let members = require('./members');

2. app.js에 다음 코드를 추가해주세요.

app.delete('/api/members/:id', (req, res) => {
    const { id } = req.params;
    const membersCount = members.length;
    members = members.filter((member) => member.id !== Number(id));
    if (members.length < membersCount) {
        res.send({ message: 'Deleted' });
    } else {
        res.status(404).send({ message: 'There is no member with the id!'});
    }
});

filter method를 통해 members에서 삭제할 직원 정보의 아이디와 일치하지 않는 직원들의 정보만 추려내서

새로운 배열을 만듦으로써 delete를 수행하고 있어요.

3. test.http에 다음 코드를 추가해주세요.

###
DELETE http://localhost:3000/api/members/3

Delete 리퀘스트를 보내고 나서 GET 리퀘스트를 통해 3번 직원의 정보가 잘 삭제된 것을 확인할 수 있어요!

출처: 코드잇(https://www.codeit.kr/topics/intro-to-express)

컴공 공부