[Seminar] 프론트엔드의 데이터 통신과 비동기 처리

[junnyya]

1. 클라이언트와 서버, 그리고 API의 역할

웹 서비스의 데이터 흐름을 이해하기 위해 **API(Application Programming Interface)**의 개념을 식당의 운영 방식에 비유하여 정립해 보았다.

• Client (프론트엔드): 메뉴판을 보고 주문을 요청하는 손님 (Request)
• API (인터페이스): 주문을 받아 주방에 전달하고, 완성된 요리를 서빙하는 점원
• Server/DB (백엔드): 주문받은 요리를 실제로 만들고 데이터를 관리하는 주방 (Response)

여기서 핵심은 요청(Request)과 응답(Response) 사이에 물리적인 시간이 발생한다는 점이다. 프론트엔드 개발에서는 이 대기 시간을 효율적으로 처리하기 위해 비동기(Asynchronous) 프로그래밍이 필수적이다.

---

2. 백엔드 연동 전, 가상 환경 구축하기 (Mocking)

현재 프로젝트 단계상 백엔드 API와 연결되지 않은 상태였다. 하지만 프론트엔드 개발이 중단되어서는 안 되기에, Mock API(가짜 서버)를 직접 구현하여 비동기 통신 환경을 시뮬레이션했다.

자바스크립트의 Promise와 setTimeout을 활용하여 네트워크 지연 시간을 인위적으로 발생시켰다.

// src/entities/shop/api/shopApi.js

export const fetchShops = async () => {
  // 1. 실제 네트워크 통신 환경을 가정하여 0.3초(300ms)의 지연 시간 부여
  await new Promise((res) => setTimeout(res, 300));
  
  // 2. 지연 시간 이후, 준비된 맛집 데이터(SHOPS)를 반환 (Response)
  return [...SHOPS];
};

async/await 문법을 사용하여 비동기 로직을 동기 코드처럼 직관적으로 작성했으며, 이를 통해 데이터 응답을 기다리는 흐름을 제어했다.

---

3. 사용자 경험(UX)을 고려한 비동기 상태 관리

서버와 통신하는 300ms의 짧은 시간이라도, 사용자에게 아무런 피드백이 없다면 서비스 장애로 오인할 수 있다. 따라서 데이터의 로드 상태를 시각적으로 보여주는 Loading 처리가 필수적이다.

이를 위해 컴포넌트 마운트 시점에 데이터를 호출하고, 응답 상태에 따라 UI를 분기 처리했다.

// src/features/roulette/play/ui/Roulette.jsx

useEffect(() => {
  // 컴포넌트 마운트 시 데이터 요청 시작
  fetchShops()
    .then(setShops) // 성공(Success): 받아온 데이터를 상태(State)에 저장
    .catch(() => setLoadError('가게 목록을 불러오지 못했어요.')); // 실패(Error): 에러 메시지 처리
}, []);

이 과정을 통해 데이터가 준비되지 않은 시점, 데이터 수신 성공, 실패의 3가지 상태를 모두 고려하여, 사용자에게 끊김 없는 경험을 제공하는 방법을 익혔다.

---

4. 학습 회고 및 인사이트

1. 프론트엔드의 역할 재정의
   프론트엔드 개발은 단순히 화면을 그리는 것이 아니라, 서버와의 데이터 통신 과정 전체를 설계하고 예외 상황(로딩, 에러)까지 핸들링하는 역할임을 깨달았다.
2. 주도적인 개발 환경 구축
   백엔드 API가 완성될 때까지 기다리는 소극적인 태도에서 벗어나, Mock API를 활용해 선제적으로 로직을 구현함으로써 개발 생산성을 높일 수 있었다. 추후 실제 API가 연동되더라도 엔드포인트(URL)만 교체하면 즉시 동작 가능한 유연한 구조를 설계했다는 점에서 의미가 있다.