77일차 - day04 & day05

웹 스토리지

HTML5에서 추가된 기술로 로컬스토리지와 세션스토리지로 구분된다.

 

특징

- 웹 스토리지는 Key와 Value 형태로 이루어졌다.

- 웹 스토리지는 클라이언트에 대한 정보를 저장한다.

- 웹 스토리지는 로컬에만 정보를 저장하고 쿠키는 서버와 로컬에 정보를 저장한다.

 

종류

로컬스토리지 (localStorage) : 클라이언트에 대한 정보를 영구적으로 저장

세션스토리지 (sessionStorage) : 세션 종료 시(브라우저 닫을 경우) 클라이언트에 대한 정보 삭제

장점

- 서버에 불필요하게 데이터를 저장하지 않는다. (백엔드에 절대로 전송되지 않는다.)

- 저장 가능한 데이터의 용량이 크다. (약 5Mb, 브라우저마다 차이 존재)

 

단점

- HTML5를 지원하지 않는 브라우저의 경우 사용 불가. (현재는 거의 없다고 봐야 한다.)

 

 

 

Todos

1번 화면: 처음 접속화면

2번: 아이템 추가

3번: 2번 아이템 삭제

 

 

 

비동기 통신 - axios

서버에 새로고침 없이 요청할 수 있게 도와준다.

서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 도와준다.

1. jQuery - $.ajax()

2. js - fetch() fetch() -> json 형식으로 가져온다.

3. 설치 - axios axios.get() -> object 형식으로 가져온다.

 

- 외부 API 비동기 통신을 위해서 fetch()를 이용한다.

- fetch()에 API 경로를 적어주면 promise가 반환된다.

fetch( url, [options] )

 

fetch(url)

.then(콜백) - 응답 성공

.catch(콜백) - 응답 실패

 

axios.get(url)

.then(콜백) - 응답 성공

.catch(콜백) - 응답 실패

 

npm install axios / yarn add axiox

 

 

 

Test01 - 비동기 통신

https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

 

 

 

Test02

 

 

 

Movies - Open API 

날짜 입력 시, 해당 일자 영화 랭킹 출력

 

 

useMemo

• useMemo는 컴포넌트의 성능을 최적화시킬 수 있는 대표적인 react hooks 중 하나이다.
• useMemo에서 Memo는 Memoization을 뜻한다.
• *memoization?
  • 기존에 수행한 연산의 결괏값을 어딘가에 저장해 두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말한다.

 

Test03 - useMemo(1)

 

useMemo 사용 X

'

 

useMemo 사용 O

 

Test04 - useMemo(2)

일반 함수

 

useMemo

\

 

Test05 - useMemo(3): 검색

1. 일반 함수

검색 창에 텍스트 입력해도 list 변경값 없음.

검색 버튼 클릭 시, 해당하는 list 출력

 

 

2. useMemo 사용

위의 1번과 동일하게 움직임

 

 

3. useEffact 사용

text 값이 변경될 때마다 리스트 값이 실시간으로 변경됨.