React(fetch, axios)로 데이터 요청

클라이언트와 서버 개념

• 클라이언트
  • 서버와 이어진 모든 단말기
  • 보통은 브라우저, 리그오브레전드 클라이언트처럼 별도의 클라이언트가 존재하는 경우도 있음
  • 사용자의 입력을 주로 처리하며 이를 서버에 요청을 보냄

• 서버
  • 웹페이지, 사이트, 앱을 저장하는 컴퓨터
  • 클라이언트 요청을 받아 처리, 이에 대한 응답을 돌려줌

API란?

식당에서 주문 시 점원에게 주문하면 주방에서 요리가 나와서 나한테 돌아온다.
API는 프로그램이 요청 할 수 있는 명령 목록

API는 프로그램이 서로 삭호 작용하는 것을 도와주는 매개체

서버에 데이터 요청

기본 제공 : fecth, 라이브러리 : axios

프론트에서 서버에 데이터 요청을 하려면 서버 주소와 HTTP 메소드가 필요하다.

CORS(cross origin resourse sharing)

• 두 개는 Origin이 다르다. Origin(Host와 port를 포함한 데이터의 출처)
  • Origin이 다르면 네이버에서 구글 자료를 가져 오는 격
• Client : localhost : 3000(react 개발 서버)
  Server : localhost : 4000

해결법 : 서버에서 해결 해줘야함(서버에서 CORS 정책을 허용)

• npm install cors
• app.use(cors()) //cors 정책 풀어준다.

React : TypeError: Cannot read property 'map' of null in React.js

• const [users, setUsers] = useState(null); // 오류 발생
• const [users, setUsers] = useState([]); //[] 빈 배열로 바꾸면 해결

React, Map 사용 시 Key props 부여

• 순서가 바뀔 수 있는 경우 key에 인덱스 사용 X
  • 성능 저하와 state 관련 문제 발생

contentComments.map((list, index) =>
  <li key={index}>
    {list.name}
    {list.text}
  </li>
);

올바른 key 사용법 map()

• map() 함수 내부에 element에 key 값을 넣어주자!

  {todoList.map((todo) => (
    <div key={todo.id}>
                <div>{todo.id}</div>
  <div>{todo.text}</div>
  <div>{todo.done ? "Yes" : "No"}</div>
  </div>
))}

Optional chaining(옵셔널 체이닝 '?.')

?.은 ?. 앞의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환합니다.

• 옵셔널 체이닝 문법 ?.은 세 가지 형태로 사용할 수 있습니다

1. obj?.prop – obj가 존재하면 obj.prop을 반환하고, 그렇지 않으면 undefined를 반환함
2. obj?.[prop] – obj가 존재하면 obj[prop]을 반환하고, 그렇지 않으면 undefined를 반환함
3. obj?.method() – obj가 존재하면 obj.method()를 호출하고, 그렇지 않으면 undefined를 반환함

fetch로 데이터 불러오기

• server 쪽 app.js / API

app.get("/api/todo", (req, res) => {
  res.json(todoList);
});

app.post("/api/todo", (req, res) => {
  // 프론트에서 서버로 데이터 보낼 때 body에 데이터를 넣어서 보냄
  const { text, done } = req.body; //express에서 바디에서 데이터를 꺼내 쓰려면 bodypareser가 필요, 기본적으로 지원
  console.log("req.body : ", req.body); //body 태그로 넘어오는 지 확인
  todoList.push({
    id: id++,
    text,
    done,
  });
  return res.send("성공했어요! app.post /api/todo");
});

• client 쪽 App.js

//get
  const fetchData = () => {
    fetch("http://localhost:4000/api/todo")
      .then((response) => response.json())
      .then((data) => {
        console.log("fetchData : ", data);
        setTodoList(data);
      });
  };
//post
    fetch("http://localhost:4000/api/todo", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        text,
        done,
      }),
    }).then(() => fetchData());
  };

axios로 데이터 불러오기

//fetch get
  const fetchData = () => {
    fetch("http://localhost:4000/api/todo")
      .then((response) => response.json())
      .then((data) => {
        setTodoList(data);
      });
  };

//axios get
    axios.get("http://localhost:4000/api/todo").then((response) => {
      setTodoList(response.data);
    });
//axios get, async await 문법 사용
  const fetchData = async () => {
    const response = await axios.get("http://localhost:4000/api/todo");
    setTodoList(response.data);
  };

//fetch post
    fetch("http://localhost:4000/api/todo", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        text,
        done,
      }),
    }).then(() => fetchData());

//axios post
    axios.post("http://localhost:4000/api/todo", { text, done });
    fetchData();

2022.10.21

async와 await?

• 자바스크립트는 동기식 처리(Synchronous)
  • 한번에 코드 한줄씩 차례로 실행
  • setTimeout() 같은 함수는 비동기식처리를 도와준다.(JS내부동작이아닌 브라우저 덕분에 가능)
  • addEventListener("click", function(){})
• 그냥 JS는 오래걸리는 연산만나면 멈추지만 Web API와 연관된 특수한 함수 사용 시 비동기식 처리

• 비동기식처리(Asynchronous) : 오래걸리는 작업이 있으면 다른 거부터 처리
  Web API로 보낸다. (setTimeout, eventListener)

javaScript에서 순차적으로 실행하려면?

1. 콜백 함수 X (콜백함수는 함수 디자인 패턴일 뿐, 비동기 실행을 지원X)
   콜백함수를 쓰면 복잡해진다.

setTimeout(function(){console.log(2)},1000);

2. 문제 점을 해결하기 위한 Promise 패턴

• 콜백 함수 보다 높은 가독성
• 성공 / 실패의 경우에 맞춰 각 각 다른 코드 실행 가능
• Promise 패턴도 비동기적 처리가 가능하게 바꿔주는 문법은 X(비동기 처리함수를 사용할 수는있음)

//Promise는 성공/ 실패 판정하는 기계
let promiseTest = new Promise(function (resolve, reject) {
  //성공, 실패
  resolve(성공결과); //promise가 성공 -> then 함수, 파라미터가 then까지 전달
  reject(); //promise가 실패 -> catch 함수
});
promiseTest ////성공결과를 받음
  .then(function (받은결과) {
    console.log(받은결과);
    console.log("promise가 성공 일 시 실행 하는 코드");
  })
  .catch(function () {
    console.log("좌측 코드가 실패 할 경우 코드 실행");
  })
  .finally(function () {
    console.log("성공이든 실패 든 실행 할 코드");
  });

Promise의 3가지 상태

1. 성공하면 <resolved> , then() 실행
2. 판정 대기 중 이면 <pending>
3. 실패하면 <rejected> , catch() 실행

async/await

async?
함수 선언 앞에다가 붙일 수 있는 async(함수가 Promise 역할! / 함수 실행 후 promise Object가 남는다!)
단점 : 성공만 가능하다.

async function add() {
  return 1 + 1; //Promise.reject("강제로 실패하는코드")
}
add().then(function (add결과) {
  console.log(add결과);
});

---

async function 안에서 쓰는 await

async function add() {
  let promise1 = new Promise(function (resolve, reject) {
    let 힘든연산 = 9 * 9;
    reject(힘든연산);
  });
  //아래 와 같은 코드
  //차이점 : await은 프로미스 실패 시 에러나고 멈춤
  //그래서 try, catch 구문으로 에러 처리를 해줄 수 있다.
  try {
    let result = await promise1;
    console.log(result);
  } catch {
    console.log("프로미스 연산에서 에러 발생 했습니다.");
  }
  // promise1.then(function(){
  //   console.log("성공했습니다")
  // })
}