Today I Learned
[Front-End] - React
오늘은
Rest API와ExpressJS를 통한 간단한CRUD구현과비동기 처리에 대해 배우고ChatGPT API를 활용하였습니다.
Rest API
기본적으로
Server - Client구조로 이루어져있다.
리소스를 가지고 있는 쪽이 서버, 리소스를 제공받는 쪽이 클라이언트가 된다.
그리고 Rest API는Stateless(무상태)인데 이 뜻은 서버의 응답이 클라이언트와의 세션 상태가 독립적이라는 뜻이다. 즉 서버는 요청에 대해 응답만 하면 된다.
또한HTTP 프로토콜을 사용하므로HTTP 프로토콜또한 무상태성을 갖고 있다.
Rest API의 장단점
장점
- HTTP 메소드를 사용하기 때문에 별도의 작업이 필요없다.
- REST API를 사용하는 모든 플랫폼에 사용 가능하다.
- Restful하게 작성만 하면 쉽게 파악이 가능하다.
- 서버와 클라이언트의 역할을 쉽게 구분이 가능하다.
단점
- HTTP 메소드를 사용하기 때문에 응용할 수 있는 부분이 적다.
- 복잡한 형태의 HTTP 헤더를 사용해야 한다.
- Restful하지 않다면 역할을 명확하게 파악하기 힘들다.
Async & Await
Promise
Promise는 이름 그대로 약속한다는 뜻인데 비동기 연산이 처리된 이후 완료 또는 실패와 그 결과값을 나타내는 객체이다. 즉, 최종 결과를 반환하는 것이 아닌 비동기 연산 이후 미래에 어떤 시점에 결과를 제공하겠다는 '약속(promise)'를 반환한다.
promise는대기(pending),이행(fulfilled),거부(rejected)중 하나의 상태를 가진다.
await키워드를 사용하기 위해선 함수를async로 만들어야 한다.
await을 사용하지 않은promise는pending상태 이다.try...catch
try...catch문은 실행할 코드를 표시하고 예외가 발생(throw)할 경우의 응답을 지정한다. 즉, 예외가 발생할 경우catch문을 실행한다.
이외 수업내용
.env파일은 이미 세팅되어있는 값들이 있기 때문에 수정을 하였다면 반드시 다시 서버를 켜야된다.
모든on~키워드들은 이벤트(event)를 갖고 있다.
key와 value값이 같으면 키 값을 생략해도 된다.
기본적으로 key값은 string이다.
