서비스 통합

독립적으로 움직이는 백엔드 애플리케이션과 프론트앤드 애플리케이슨을 통합.

CROS

Todo 아이템 불러오기의 구현.

CORS 헤더 Policy를 위반.
CORS(Cross-Origin Resource Sharing) : 처음 제공한 도메인이 현재 요청하려는 도메인과 다르더라도 요청을 허락해주는 웹 보안 방침

발견한 문법 오류.
https://miiingo.tistory.com/337
'==' 와 '===' 의 차이, '!='와 '!=='의 차이.

저번 스터디 오류 문제해결 :
크롬 플러그인 때문에 생겼던 오류, 실제로 해당 플러그인을 삭제하니 오류 해결.

백엔드는 8080, 프론트엔드는 3000 즉 서로 도메인이 다르므로 요청을 거절.
CORS를 가능하게 하기 위해 백엔드에서 CORS 방침을 설정.

Effect Hook를 이용한 Todo 리스트 초기화

Todo 무한루프

React는 렌더링을 한다 --> HTML DOM 트리의 다른 버전인 ReactDOM을 가짐.
컴포넌트의 상태가 변하면 ReactDOM은 이를 감지하고 컴포넌트 함수를 다시 호출함으로써 변경된 HTML을 바꿔줌. 즉 화면에 보여주는 것을 렌더링한다.

렌더링이 가장 처음 일어나는 순간, ReactDOM 트리가 존재하지 않는 상태에서 처음으로 각 컴포넌트 함수를 호출해 자신의 DOM 트리를 구성. 이때 우리 애플리케이션에서 가장 처음으로 호출하는 컴포넌트 함수는 App()이다.

API 호출 후 응답이 올때까지 기다리지 않는 비동기 호출이다. --> 백엔드의 응답이 오지 않아도 일단 랜더링
비동기 호출이여서 Add Todo Here과 같은 인풋필드나 + 버튼을 볼 수 있다.

fetch() -> TodoAPI 호출 ->then(...) 실행 -> then 함수가 setItem(..) -> item 상태 초기화 -> 상태가 변해 재 렌더링을 위해 App() 호출 -> fetch() -> .... 무한 루프로 빠짐.

이를 방지하기 위한것이 effect 훅 이다.

즉 브라우저를 통한 값의 변화를 감지해 콜백함수를 실행하는 구조이다.

fetch

Promise

• fetch 메서드가 반환하는 것
• 비동기 오퍼레이션에서 사용.
• 콜백 지옥을 피할수 있는 방법.
• 함수를 실행 후 Promise 오브젝트에 명시된 사항을 실행시키겠다는 약속.
• Pending, Fulfilled, Rejected 상태가 있다.
  
• Pending 상태는 오퍼레이션이 끝나길 기다리는 상태.
• resolve를 함수를 통해 이 오퍼레이션이 성공적으로 끝났음을 알리고 원하는 값을 전달. 이때 then의 매개변수로 넘어오는 함수를 실행.
• 오퍼레이션에 문제가 생겼을 경우 then의 두 번째 인자로 들어오는 reject 함수를 콜
• 실행 예외 발생시 catch 매개변수로 넘어오는 함수가 실행.
• then 이나 catch 로 넘기는 함수는 바로 실행되는것이 아니라, resolve와 rehect가 실행되는 시점.

Fetch API

• 자바스크립트가 제공하는 메서드, API 서버로 http 요청을 송수신할 수 있게 도와줌.

• url, url과 options을 매개변수로 받을 수 있다.

• then과 catc에 각각 onResolve, onRejectm onError 콜백 함수를 전달.

• url만 이용.
  

• 디폴트로 GET 메서드를 사용하는 것과 같음.

• 메서드 명시, 헤더나 바디를 함께 보내야할 때, 정보가 담긴 오브젝트 options를 넘겨줌.
  
  

• api-config.js
  

• ApiService.js
  

• App 컴포넌트에 ApiService 사용.
  

1. Server API를 이용해 서버 데이터를 업데이트한 후
2. 변경된 내용을 화면에 출력