26일차 TIL (React 숙련 / Redux / 비동기 프로그래밍 )
Redux
!!! 접근 및 제어를 쉽게 할 수 있다.
* useState의 불편함
컴포넌트끼리 부모 -> 자식으로 props를 통해 값을 보내줌
props drilling이 발생하니까 거쳐서 줘야만하는 컴포넌트가 계속 생기니까
중앙 관리소 (storage)
를 이용하면 중간에 컴포를 거치지 않고서도 사용을 할 수가 있다
Global state 전역 어디서든
Local state
redux
redux Counter(useSelector, useDispatch)
Action value creator
payload (짐을 싸서 보내버림)
Router DOM
BrowserRouter, Route, Routes
useNavigate : 유저는 주소를 입력해서 페이지를 옮겨 다니지 않는다. a 태그와 유사하다.
useLocation : useParams : 있다.
***** parseInt(params.id) 문자형식을 숫자로 바꿔서 반환해달라 명령
return tt.id === parseInt(param.id);
# 비동기 프로그래밍
반대 - 동기적 방식 : 현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식
일반적으로 대부분 동기적 방식으로 실행됨
비동기적 : asynchronous 실행중인 코드의 완료와 무관하게 바로 다음 코드로 넘어감
ex _
1. setTimeout , addEventListner
2. 별도의 요청,실행 대기, 보류 등과 관련된 코드는 모두 비동기적
3. 대표적으로 서버 통신과 관련된 로직들을 포함
콜뺵지옥 ㄷㄷ
비동기적 프로그래밍을 하다 보면 예기치 못한 상황에 맞닥들이게됨 바로 콜빽지옥
콜백 함수를 익명 함수로 전달하는 과정이 반복 되어 코드 들여쓰기가 심해짐
주로 이벤트 처리 및 서버 통신과 같은 비동기적 작업을 수행할 때 발생
가독성이 떨어지고 수정이 어려워짐
이를 해결하기 위해 "Promise" 객체
비동기적 프로그래밍을 다룬다 => Promise
# Promise 객체에 담긴 주요한 상태 정보 3가지
1 대기 (pending , 요청 후 아직 성공or실패가 되지않은 그 상태)
2 이행 (fullfied 데이터가 나의 localhost에게 전달을 성공적으로 해준 상태)
3 거부 (rejected 이유는 아직 모르지만 localhost에게 데이터를 전달해주지 못한 상태;)
Promise 객체 핸들링 방법
then / catch (ES6)
.then : 서버가 data(API)를 "정상적"으로 우리에게 줬다. 매개변수 respoonse
.catch: 오류가 났다 매개변수는 error
.finally: 정상이건 오류건 항상 실행되는 부분 정상인 경우 .then 이 실행되고 .finally가 실행
async / await (ES7)
async 로 서버에 요청 , await ~~ 입력하면 요청이 완료될때까지 넘어가지 않고 기다림
비동기식 프로그래밍이여도 동기적으로 짜줘야할 때가 있어
# REST API
REpresentational State Tranfer
어떠한 자원에 대해 CRUD를 진행할 수 있게 HTTP Method (get post put delete)를 사용하여
요청을 보내는것 이때 요청을 위한 자원은 특정한 형태로 표현된다
요약 URI를 통해 정보의 자원을 자원만을 표현해주고
자원의 행위는 HTTP Method로 명시한다
자원 (Resource) : URI(url)
행위 (Verb) : HTTP Method
표현 (REpresentational)
요청 시 규칙
URI는 명사로 사용하고 소문자로만
명사는 복수형을 사용한다 posts
URI의 마지막에는 / 을 포함하지않는다
URI에는 언더바가 아닌 하이픈을 사용한다
URI에는 파일의 확장자를 표시하지않는다
RestFul ?
REST API 의 까다로운 조건들은 만족시킨 통신설계상태
Path Variable / Quert Parameter
PV /users/10
pv 전체 데이터 또는 특정 하나의 데이터를 다룰때 처럼 리소스를 식별하기 위해 사용됨
QP / users?user_id=10
qp 데이터를 정렬하거나 필터링하는 경우 더 적합 order
JSON ? (NoSQL 데이터 설계를 위한 기초지식)
자바스크립트 객체 문법에 토대를 둔 문자기반의 데이터 교환형식
대부분 비슷한데 ("") 큰 따옴표만 허용됨
메서드 :
JSON -> 문자열 형태 -> 서버 - 클라이언트간 데이터 전송시 사용
다음 두 경우 (Parsing) 과정이 필요함
1. JS객체를 JSON형태로 전송
2. JSON형태를 JS객체 형태로 전송
stringify() 자바 스크립트 객체 -> json문자열 변환시 사용
parse() json문자열 -> 자바스크립스 객체로 변환시 사용 네트워크 통신의 결과를 통해 받아온 JSON문자열을 프로그램 내부에서
JSON Placeholder