[DevCourse] 생성형 AI 활용 백엔드 데브코스 14일차

오늘은 드디어 React로 외부 API를 불러오고, 실제 데이터를 화면에 출력해 보는 실습을 진행했다.

뉴스 API를 연동해서 카테고리별 뉴스를 보여주는 뉴스 뷰어 페이지를 직접 만들면서,

그동안 배워왔던 개념들이 어떻게 연결되는지를 실감할 수 있었다.

---

📌 오늘 배운 주요 내용 정리

1. 비동기 처리의 개념과 흐름

• setTimeout으로 구현된 콜백 패턴 → Promise → async/await 순으로 비동기 처리 방식의 흐름을 정리했다.
• async/await를 활용하면 복잡한 비동기 로직도 동기 코드처럼 읽히기 쉽게 작성할 수 있어, 실제로 써보니 정말 깔끔하다는 인상을 받았다.

2. 뉴스 API 연동 실습

• axios를 이용해 뉴스 데이터를 비동기적으로 불러오고,
• 카테고리 선택에 따라 데이터를 조건부로 출력하는 뉴스 뷰어 앱을 만들었다.
• useEffect 훅으로 API 호출 타이밍을 제어하고,
• 커스텀 훅(usePromise)으로 비동기 호출 로직을 재사용 가능하게 추출하는 방법도 함께 배웠다.

---

🧪 실습 소감

처음으로 외부 데이터를 불러와 실제로 화면에 보여주는 작업을 해봤다는 점에서

오늘은 굉장히 인상 깊은 하루였다.

 

처음엔 useEffect, axios, async/await 흐름이 머릿속에서 연결이 잘 안 됐지만,

실제로 뉴스를 받아와 화면에 렌더링 되는 걸 확인하면서

내가 어떤 흐름으로 코드를 짜고 있는지를 점점 더 명확하게 이해하게 되었다.

 

특히 usePromise 커스텀 훅을 작성하면서

React에서 로직을 컴포넌트 단위로 재사용할 수 있는 구조에 대해서도 실감할 수 있었고,

그동안 단순하게 컴포넌트를 나누는 것과는 또 다른 개념의 확장을 경험한 느낌이었다.

 

아직 문법이 익숙하지 않아 조금 헤매기도 했지만 재미있었다.

---

🧡 느낀 점

오늘은 단순한 UI 컴포넌트를 넘어서,

React로 실제 서비스에 가까운 기능을 구현해 본 첫날이라고 할 수 있을 것 같다.

 

API를 직접 연동해 데이터를 가져오고, 카테고리를 클릭하면 조건에 맞는 뉴스가 바뀌는 과정을 보면서

“아, 진짜 웹앱을 만들고 있구나” 하는 실감이 들었다.

 

오늘처럼 직접 만들어보며 익히는 흐름이 나랑 잘 맞는 것 같다 :)