[엘리스 AI07] 7주차 - 백엔드 (2023.04.13)

오늘 배운 것
1. Express.js - Middleware, RESTful API
2. POSTMAN 쓰는 법
3. React 생애주기

 

1. 미들웨어(Middleware)란?

HTTP 요청과 응답 사이에서 단계별로 어떤 동작을 실행한다. 말그대로 중간에 작동하는 녀석!!

HTTP 요청이 들어오면 시작 > HTTP 응답이 마무리 될 때까지

 

(req, res, next)를 가진다.

req : request = HTTP 요청을 처리하는 객체

res : response = HTTP 응답을 처리하는 객체

next : 다음 미들웨어 실행

 

주의 : next()함수를 호출하지 않으면 미들웨어 사이클이 끝난다. 반드시 next를 통해 다음 미들웨어로 넘겨줘야 한다

 

> 이론시간에 배운 어플리케이션 미들웨어, 라우터 미들웨어, 오류처리 미들웨어 등이 있지만 아직 설명가능할 정도로 완벽하게 숙지하지 못함

> 다만 오류처리 미들웨어는 err 인자를 추가적으로 전달받는다!!

> 만약 다른 미들웨어 중에 next 안에 뭐가 있다? > 바로 오류처리 미들웨어로 점프

 

2. REST API란?

REST 아키텍처를 준수하는 웹 API = RESTful API

 

REST는 뭐고 API는 뭔데?

우선 API는 Application Programming Interface로 응용프로그램이 다른 프로그램이나 서비스와 상호작용하는 인터페이스이다.

 

인터페이스는 Inter+Face로 서로 다른 두 무언가의 중간자이다. 예를 들어 우리는 키보드를 통해 글자를 입력하고, 마우스를 통해 클릭한다. 우리와 컴퓨터 사이를 중개하는 "키보드"와 "마우스"는 인터페이스가 된다.

흔한 비유로는 식당 종업원과 손님을 들 수 있다. 우리가 식당에 가서 음식을 주문하면 종업원은 주문을 듣고 요리하는 사람에게 주문을 전달한다. 그러면 요리사는 만든 요리를 종업원을 통해 우리에게 전달한다. 이때 종업원이 손님과 요리사를 중개하는 API라고 할 수 있다.

 

우리가 요리를 하기 귀찮을 때 식당을 방문하듯, 만약 우리가 번역을 하는 기능을 구현하고 싶지만, 직접 구현하기는 귀찮거나 어렵다고 한다면 구글 번역기에서 제공하는 기능을 그대로 쓸 수 있다. 이때 구글 번역기의 API를 통해 구글 번역기에 번역을 요청하고 데이터를 받는다. 이것이 API라 할 수 있다.

 

그럼 REST가 무엇인지 알아보자

REpresentational State Transfer의 약자인데, 내용이 너무 어려워서 ChatGPT에게 물어보았다.

 

REST API에 대해 쉽게 설명해줘

REST(Representational State Transfer) API란 웹 어플리케이션 간의 통신을 위한 인터페이스 중 하나로, HTTP 프로토콜을 이용하여 데이터를 주고 받습니다.

REST API는 클라이언트와 서버 간의 통신에 있어서 자원(resource)과 행위(verb)를 기반으로 하며, 주요한 특징으로는 다음과 같습니다.

자원(리소스) 기반: 모든 자원은 고유한 ID를 가지며, 이를 통해 자원을 구분합니다. 예를 들어, 사용자 정보를 요청할 때는 해당 사용자의 ID를 기반으로 요청을 보냅니다.

메시지로 표현: HTTP 메서드(GET, POST, PUT, DELETE 등)를 이용하여 자원에 대한 CRUD(Create, Read, Update, Delete) 작업을 수행하며, 요청과 응답은 일반적으로 JSON, XML 등의 형식으로 표현합니다.

자기 서술적(Self-descriptiveness) 메시지: 요청에 필요한 정보는 요청 메시지 자체에 포함되어 있어야 하며, 서버는 이를 이용하여 요청을 처리합니다. 이를 통해 REST API는 자기 서술적 메시지를 제공하며, 이로 인해 API를 이해하고 사용하기 쉬워집니다.

애플리케이션의 상태(state)는 클라이언트에 저장: REST API는 서버의 상태를 저장하지 않습니다. 대신, 클라이언트는 모든 상태 정보를 저장하며, 이를 통해 서버와의 통신을 유지합니다.

REST API는 이러한 특징들로 인해 웹 어플리케이션 간의 통신에 있어서 효율적이고 유연한 인터페이스를 제공합니다.

 

잘 모르겠어. 중학생도 이해할 수 있게 다시 설명해줘

REST API는 웹 어플리케이션에서 서로 다른 컴퓨터끼리 데이터를 주고 받을 때 사용하는 방법 중 하나입니다.

REST API는 자원이라는 것을 기반으로 하며, 각 자원은 고유한 ID를 가지고 있습니다. 예를 들어, 사용자 정보를 요청할 때는 해당 사용자의 ID를 기반으로 요청을 보냅니다.

또한, REST API에서는 요청에 필요한 정보를 요청 메시지에 포함시키며, 이를 이용하여 서버에서 요청을 처리합니다. 이를 통해 REST API를 이해하고 사용하기 쉬워집니다.

마지막으로, REST API는 서버의 상태를 저장하지 않습니다. 대신, 클라이언트가 서버와의 통신을 유지하기 위해 모든 상태 정보를 저장합니다.

이러한 특징들로 인해 REST API는 웹 어플리케이션 간의 효율적이고 유연한 통신을 가능하게 합니다.

 

예시를 통해 설명해볼래?

물건을 사는 과정을 예시로 들어볼까요?

REST API를 이용한 물건 구매 과정은 다음과 같습니다.

사용자는 구매하려는 물건의 ID와 함께 구매 요청을 서버에 보냅니다.

예를 들어, "물건 ID가 123인 물건을 구매하고 싶습니다"라는 요청을 보냅니다.
서버는 해당 물건의 ID를 확인하고, 구매 가능한 상태인지 확인합니다.

예를 들어, 물건이 품절되었거나 구매 제한이 걸려있을 수 있습니다.
서버는 확인 결과를 응답 메시지에 담아 사용자에게 보냅니다.

예를 들어, "물건 ID가 123인 물건을 구매할 수 있습니다"라는 응답 메시지를 보냅니다.
사용자는 구매 확인 요청을 서버에 보냅니다.

예를 들어, "물건 ID가 123인 물건을 구매합니다"라는 요청을 보냅니다.
서버는 해당 물건을 구매 처리하고, 결과를 응답 메시지에 담아 사용자에게 보냅니다.

예를 들어, "물건 ID가 123인 물건을 구매 완료했습니다"라는 응답 메시지를 보냅니다.
이러한 과정을 통해 REST API를 이용하여 물건을 구매할 수 있습니다.

이제 살짝 알 것 같다.

앞선 식당 종업원 예시를 활용해보자. 우리가 주문을 할 때 아무렇게나 주문을 하는 것이 아니라, 명확히 주문을 해야한다. 그냥 국밥 주세요 하는 게 아니라 내가 원하는 게 돼지국밥인지 순대국밥인지 정확히 말해야하는 것이다. 설상 내가 단골손님이라 종업원은 뭘 원하는지 알고 있다 하더라도 옆 손님이 봤을때는 내가 돼지국밥을 시키는지 순대국밥을 시키는지 도통 알 수가 없을 것이다. 내가 짠 코드를 다른 개발자가 사용할 일도 있는 만큼 요청을 보낼 때도 명확해야하는 것이 좋을 것이다. 그래서 API를 쓸 때 요청을 보았을 때 그 요청이 무엇을 요청하는지 알 수 있어야 한다는 것이 REST한 API이다.

 

3. React의 생애주기와 Hooks

탄생 : 화면에 나타나는 것 = Mount > ex) 초기화 작업
변화 : 업데이트(리렌더) = Update > ex) 예외처리작업
죽음 : 화면에서 사라짐 = Unmount > ex) 메모리정리작업

 

파워포인트의 애니메이션을 생각해보면, 처음 나타날 때 애니메이션이 있고, 중간에 강조를 하는 애니메이션이 있고, 사라질 때 애니메이션 이렇게 3개로 나뉜다.

 

이처럼 React도 3가지로 나뉘는 것이다. 이를 React의 생애주기라고 한다.

그리고 클래스형 컴포넌트에서만 사용할 수 있다.
함수형 컴포넌트에서는 이런 메서드를 사용할 수 없다. 이 이외에도 state를 사용할 수 없다.

 

그래서 함수형 컴포넌트에서도 이러한 기능을 쓰고 싶었는데, 클래스형 컴포넌트에서만 사용할 수 있던 기능을 Hook 낚아와서 사용하는 것이 바로 React Hooks이다.

useState, useEffect, useRef 등이 있다.

그렇다면 왜 클래스형 컴포넌트가 아니라 함수형 컴포넌트를 사용할까?

기존 클래스형 컴포넌트는 중복코드 많이 써야하고 가독성이 나쁘다는 단점이 있었다.

그래서 최근에는 클래스형을 배제하고 함수형을 쓰는 추세이기 때문에 함수형 컴포넌트에서도 이러한 기능을 사용할 수 있게 구현하는 방향으로 바뀐 것이다.

 

 

---

오늘도 인프런에서 React 강의를 듣고 실습을 했다. 오늘부터 Hook에 대해 조금조금씩 배웠다. 조만간 라우터도 할텐데 아직 이해가 부족한 부분이라 학습을 통해 개념을 재점검할 수 있을 것 같아 기대가 된다.

프로그래밍을 하기 위해서는 자료구조와 알고리즘을 배워야한다는 이야기를 많이 들었는데, 도서관에서 보니 대부분의 책이 막 어렵고 두껍게 되어 있어서 입문 단계에 좋은 책이 없을까하고 고민하는 찰나 발견한 책이 있다. 누구나 자료구조와 알고리즘이라는 책인데 개정1판은 얇아서 금방 읽을 수 있었고, 중간중간 루비나 파이썬으로 적힌 코드들이 있지만 코드가 중심이라기보다는 그 설계가 중점이기 때문에 쉽게 이해할 수 있었다. 다만 이해는 하지만 내것으로 만들지는 못한 느낌이 있어서 조만간 따로 포스팅으로 정리해야겠다. 특히 빅오표기법은 생각지도 못한 표기방법이라 신기했다.

Git에 점점 잔디가 채워지고 있다. 인프런 강의가 끝나면 어떤 프로젝트로 Git을 채울지 생각해봐야겠다.

 

---

학습자료