1. Express
1. Express
Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크 Node.js 초기부터 존재한 오래된 프레임워크 → 표준적 웹 애플리케이션, API 개발을 위해 설계됨
프론트엔드도 백엔드 지식을 알아야 할까?
백엔드 지식 없이 프론트 작업을 하는 것은 불가능
👩🏻💻 백엔드 지식을 알아야 하는 이유
백엔드와 협업 이슈가 발생했을 때 어디쪽에서 발생했는지 확실히 알 수 있음(억울한 상황 방지)
BFF(Backend For Frontend) API를 다이렉트로 의존할 때의 이슈들을 해결하고자 BFF가 등장 프론트엔드를 위한 중간 서버를 구현하는 것
테스트에서의 모킹
Nextjs 사용 시 API를 따로 잡아줄 때
간단한 서버 앱 npm 패키지 세팅
1. 작업 폴더 준비
2. 패키지 초기화
3. gitignore 파일 생성
4. TypeScript
5. ts-node 설치
컴파일 없이 Node.js에서 타입스크립트를 직접 실행할 수 있음(개발 환경에서 TS 코드 테스트 가능)
6. ESLint
7. Express 설치
Hello World 예제
1. TypeScript에 맞춰서 app.ts 파일 작성
2. ts-node로 실행
3. 코드를 수정할 때마다 서버를 재실행해야 하는 문제를 피하기 위해 nodemon 사용
⚠️ ts-node에 대한 의존성이 있기 때문에 ts-node를 꼭 설치해야 함 ⚠️ 실제 서비스하는 서버에서 사용하면 안 됨
Monitor for any changes in your node.js application and automatically restart the server - perfect for development node.js 애플리케이션의 변경 사항을 모니터링하고 서버를 자동으로 다시 시작합니다. 개발에 적합합니다.
4. package.json 파일 scripts 추가
2. URL 구조
대개는 필딩 제약 조건
4가지를 모두 만족하지 않고, Resource와 HTTP Verb만 도입하는 수준으로 사용
❌ /write-post
✅ /posts → 뭔가를 한다 (CRUD)
필딩 제약 조건
다음 제한 조건을 준수하는 한 개별 컴포넌트는 자유롭게 구현할 수 있음
인터페이스 일관성 : 일관적인 인터페이스로 분리되어야 한다.
무상태(Stateless) : 각 요청 간 클라이언트의 콘텍스트가 서버에 저장되어서는 안 된다.
캐시 처리 가능(Cacheable) : WWW에서와 같이 클라이언트는 응답을 캐싱할 수 있어야 한다. 잘 관리되는 캐싱은 클라이언트-서버 간 상호작용을 부분적으로 또는 완전하게 제거하여 scalability와 성능을 향상시킨다.
계층화(Layered System) : 클라이언트는 보통 대상 서버에 직접 연결되었는지, 또는 중간 서버를 통해 연결되었는지를 알 수 없다. 중간 서버는 로드 밸런싱 기능이나 공유 캐시 기능을 제공함으로써 시스템 규모 확장성을 향상시키는 데 유용하다.
Code on demand (optional) : 자바 애플릿이나 자바스크립트의 제공을 통해 서버가 클라이언트가 실행시킬 수 있는 로직을 전송하여 기능을 확장시킬 수 있다.
클라이언트/서버 구조 : 아키텍처를 단순화시키고 작은 단위로 분리(decouple)함으로써 클라이언트-서버의 각 파트가 독립적으로 개선될 수 있도록 해준다.
3. REST API
REST (Representational State Transfer)
로이 필딩(Roy Fielding)의 2000년 박사학위 논문에서 소개된 용어 필딩은 HTTP의 주요 저자 중 한 사람 REST는 네트워크 아키텍처 원리의 모음이며, 자원을 정의하고 자원에 대한 주소를 지정하는 방법 전반을 가리킴 필딩의 REST 원리를 따르는 시스템은 RESTful 이라는 용어로 불림
4. HTTP Method(CRUD)
📌 Create(생성), Read(상세 조회), Update(수정), Delete(삭제) + 목록 조회
기본적인 데이터 처리 기능 하나의 기능을 만들 때 최소한 5개의 API가 있어야 함
CRUD에 대해 HTTP Method를 대입 Read는 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} ⇒ 특정 상품 삭제
PUT, PATCH, DELETE는 fetch API를 통해 AJAX 요청으로만 처리 가능(브라우저 기본 동작이 아님)
Thinking in React 예제
클라이언트 소스 코드를 백엔드에서 제공받도록 구현
기본 리소스 URL: /products
활용 방법
res.send({ products });
: JSON으로 자동 변환
메타 정보를 같이 줄 때
따로 넘겨줄 때
Last updated