본문 바로가기
일상

20240208(from20240130)

by 20231113 2024. 2. 8.

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

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

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

 

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

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

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

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

 

 

https://adjh54.tistory.com/242

 

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

해당 글에서는 Javascript 환경에서 클라이언트에서 API로 통신하는 다양한 방법에 대해 알아봅니다. 1) 동기 통신 💡 동기(Synchronous) 처리 방식이란? - 데이터 통신을 위해 ‘요청'을 하였을 때, 어

adjh54.tistory.com

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

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

 

 

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

 

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

sangmin802.github.io

 

 

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

 

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

본 포스트는 공식 레퍼런스를 참고해 GraphQL을 공부하며 직접 작성한 가이드 입니다.본 포스트는 2021년 7월 최신 버전인 v16.2를 기준으로 작성되어 있습니다. 비동기로 요청 처리하기 기본적으로

songhayoung.github.io


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

'일상' 카테고리의 다른 글

20240210  (0) 2024.02.10
20240209(from20240130)  (1) 2024.02.09
20240207(from20240130)  (1) 2024.02.07
20240206(from20240130)  (2) 2024.02.06
20240204(from20240130)  (0) 2024.02.04