리액트 숙련 주차. (1)

리액트 숙련 주차 강의. 

(1) 동기와 비동기의 개념.

(1) -1 동기 처리

 

요청과 그에 따른 응답이 순차적으로 일어나는 방식. 

요청을 보내면 그 응답이 올 때까지 대기한 후, 다음 작업을 진행. 

일의 순서가 중요하면 동기적 처리를 한다. 

 

(1)-2 비동기처리. 

일의 순서가 중요하지 않은 경우, 효율적인 일처리를 위해 비동기적 처리를 가한다. 

(2) Promise

(2) -1 Promise란?

 

자바스크립트에서 비동기 작업의 완료, 실패를 처리하기 위해 사용되는 개념. 

Promise는 세 가지 상태(pending, fulfilled, rejected.)를 가진다. 

 

대기 : 초기 상태. 이행되거나 거부되지 않은 상태. 

이행 : 비동기 작업이 성공적으로 완료된 상태. 

거부 : 비동기 작업이 실패한 상태. 

 

(2) - 2 여러 비동기 작업을 병렬로 처리하기. 

 

Promise.all 메서드를 사용하면 여러 비동기 작업을 병렬로 처리할 수 있다.

모든 작업이 완료될 때까지 기다린 후에, 결과를 한 번에 처리할 수 있다. 

(3) HTTP+프로토콜

(3)-1 HTTP란?

 

HTTP는 클라이언트-서버 모델을 기반으로 동작한다. 클라가 요청을 보내면, 서버가 응답을 반환하는 방식. 요청과 응답은 텍스트 기반의 메시지로 이루어져 있다. 

 

HTTP의 특징.

 

1. 무상태성. 각 요청은 독립적이며, 이전 요청의 정보를 기억하지 않는다. stateless

2. 확장성, 확장 헤더를 추가하여 기능을 확장할 수 있다.

3. 유연성. 다양한 데이터 형식을 전송할 수 있다. 텍스트, 이미지, 비디오 등 여러 형식을 지원한다. 

 

HTTP 메시지 구조.

 

1. 요청

요청 라인 : GET, POST등의 메서드, URL, HTTP 버젼.

헤더 : 요청의 추가 정보를 담고 있다. 브라우저 정보, 인증 정보. 

본문(바디) : 선택적. 주로 POST 메서드에서 사용. 

 

2. 응답.

상태라인 : HTTP 버전, 상태 코드(200, 404 등), 상태 메시지.

헤더 : 응답의 추가 정보. 콘텐츠 타입, 데이터 길이.

본문 : 선택적. 주로 응답에 대한 데이터. 

 

(3) -2 HTTP 상태 코드. 

 

서버가 클라이언트의 요청을 처리한 결과를 나타낸다.

주로 세 자리 숫자로 구성되어 있으며, 첫 번째 자리에 따라 의미가 다르다. 

 

1XX : 정보

200 : OK. 요청이 성공적으로 처리됨. 

201 : 요청이 성공적, 새로운 자원이 생성되었음. 

3XX 리다이렉션

4XX 클라이언트 오류. 

400 : Bad request 잘못된 요청. 

401: 인증 필요.

404 : 요청한 리소스를 찾을 수 없음. 

5XX : 서버 오류. 

 

(3) - 3 HTTP 메서드 및 Rest API

HTTP 메서드는 클라이언트가 서버에게 요청의 성격을 알리는데 사용. 

Rest API는 이러한 메서드를 사용하여 CRUD 작업을 수행. 

 

메서드 일람.

1. GET : 서버로부터 데이터를 요청할 때 사용.

2. POST 데이터를 제출할 때 사용. 요청 데이터가 요청 본문에 포함되어 전송. 

3. PUT, PATCH, : 데이터를 업데이트 할 때 사용. 요청 데이터가 본문에 포함됨. 

4. DELETE : 데이터를 삭제할 때 사용한다. 

(4) JSON-SERVER란?

아주 간단한 DB와 API 서버를 생성해주는 빠키지. 

JSON-SERVER을 통해 백엔드를 기다리지 않고 프론트엔드의 로직과 화면을 구현할 수가 있다. 

 

yarn add json-server를 통해 패키지를 설치하고, db.json 파일을 최상단에 만들어준 다음

yarn json-server db.json --port 4000

이 코드를 통해 4000번 포트에 간이 데이터 베이스를 제작할 수 있다. 

(5) axios

fetch와 기능이 매우 유사한 패키지.