개인과제 : Express.js , Thunder Client, Routing

Express.js : node.js로 서버를 효율적으로 돌리는 웹 프레임워크

0. 터미널에서 시작

$ npm init -y

npm(Node Package Manager)은 파이썬의 pip 같은 친구. 라이브러리 설치 도와주는 도구.

-y는 npm init 명령 실행시 프로젝트명이나 버전등을 물어보는 것 패스, 기본값으로 알아서 설정해주는 옵션.

npm init -y를 마치면 아래와 같은 폴더 구조로 package.json 생성.

 

 

---

1. 0 터미널에서 설치

npm i express

 

• package.json : 파일을 다시 열어봤을때 express 관련된 내용이 들어있어야.
• package-lock.json : 어떤 패키지들이 어떤 버전으로 설치되었는지 기록해놓은 파일. 이 파일아 다른 동료들과 협업할때 같은 환경으로 개발할 수 있게 함. (어떻게???)
• node_modules : npm을 통해 설치된 패키지들에 대한 파일이 있는 폴더. 다양한 라이브러리에 대한 모든 파일이 여기에 설치.

---

1.1 터미널에서 웹서버 실행

app.js의 내용. 아직 뭔 소린지 모른다.

const express = require('express');
const app = express();
const port = 3000;

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

app.listen(port, () => {
  console.log(port, '포트로 서버가 열렸어요!');
});

로컬호스트 3000이 이제 로컬 개발환경의 도화지이다.

 

---

2.0 API 클라이언트

 

• 개발단계에서 API의 요청을 확인하거나 테스팅 할 때 도움을 주는 툴
• Postman, Insomnia, Thunder Client 등.
  • Thunder Client는 VS Code 안에서 사용할 수 있으면서, 기능이 부족하지 않기 때문.
  • 즉, 걍 쉬워서 썬더 클라이언트 쓴다.

 

---

2.1 POST(쓰기), PATCH, PUT(수정), DELETE(삭제), HEAD 

 

---

3.0 Routing : 클라이언트의 요청 조건(메서드, 주소 등)에 대응해 응답하는 방식

기본구조는 아래와 같다.

router.METHOD(PATH, HANDLER);

• router: express의 라우터를 정의.
• METHOD: HTTP Method (ex: get, post, put, delete …)
• PATH: 실제 서버에서 API를 사용하기 위한 경로
• HANDLER: 라우트가 일치할 때 실행되는 함수

---

3.1 routes/goods.js

// routes/goods.js
const express = require('express'); // express라는 객체를 만듦. //require()???
const router = express.Router(); // express 객체의 Router()함수로 함수 결과값을 router 변수에 할당.

 

라우터 함수의 내용. 이 문장을 알아먹고 싶다는 생각이 머리를 헝끌어뜨리지만 역시 넘어간다. 

어디까지 이렇게 넘어갈 수 있는지 몰라. 어디로가든 어차피 끝나는 길이다.

export function query(options: qs.IParseOptions | typeof qs.parse): Handler;

export function Router(options?: RouterOptions): core.Router;

 

엔드포인트 예시

// routes/goods.js
router.get('/', (req, res) => {
	res.send('this is home page');
});

router.get('/about', (req, res) => {
	res.send('this is about page');
});