20240208(from20240130)

서버에서 받은 데이터를 다루기

서버에서 데이터를 전달받아서 화면에 필요한 데이터로 전환하는 변환하는 과정을 주로 다룹니다. 이 역시 백엔드와의 협업이 필요하며, 서버의 API가 비동기로 이루어진다는 점, 서버와의 스키마가 화면에서의 스키마와 일치하지 않는다는 점, 내가 백엔드를 만들지 않았다는 점들이 여기 작업을 어렵게 만드는 이유입니다.

백엔드에서 만들어둔 스펙과 실제 화면에서 보여줘야 할 스펙이 일치하지 않기 때문에 이를 적절히 만들어 줄 수 있어야 합니다. 데이터의 응답속도가 느리기 때문에 실제 화면과 데이터 간의 타이밍이 일치하지 않습니다. 이러한 비동기성 특징으로 인한 로딩, 중복 방지 등 중간 과정을 적절히 처리할 수 있어야 합니다. 서버 응답에 따른 문제 원인 확인 및 문제 해결 능력이 필요합니다.

 

최근의 GraphQL이나 React-Query 등은 이러한 부분들을 해결하기 위해 나온 라이브러리입니다.

-------------------------------------------------------------------

"서버의 API가 비동기로 이루어진다는 점, 서버와의 스키마가 화면에서의 스키마와 일치하지 않는다는 점
GraphQL이나 React-Query"

-------------------------------------------------------------------

 

 

https://adjh54.tistory.com/242

[JS] API 동기/비동기 통신 방법과 종류 이해하기 -1

동기(Synchronous) 처리 방식이란? 
- 데이터 통신을 위해 ‘요청'을 하였을 때, 어떠한 요청에 대한 ‘응답'을 받을 때까지 기다리다가 완료된 뒤 다음 코드가 수행되는 처리방식을 의미합니다.
- 브라우저에서 동기 통신을 하는 것은 권장되지 않습니다. 동기 통신은 브라우저의 실행을 일시 중지시키고 사용자 인터페이스를 블로킹하는 문제를 야기할 수 있습니다. 따라서, 비동기적인 방법을 사용하여 서버와 통신하는 것이 좋습니다.

비동기(Asynchrous) 처리 방식이란? 
- 데이터 통신을 위해 ‘요청’을 하였을 때, 어떠한 요청에 대한 ‘응답'을 기다리지 않고 다음 코드가 수행되는 처리방식을 의미한다.

 

 

https://sangmin802.github.io/Study/Think/react-query/

⚛ React-Query를 사용하여 효율적인 비동기 처리하기

 

 

https://songhayoung.github.io/2021/07/25/GraphQL/graphql-7/

[GraphQL] 비동기로 요청 처리하기 | SUMFIのBlog

와 그나마 GraphQL의 글은 이해가 나름 잘됨;