개발자들을 위한 기술 뉴스 큐레이션 웹앱, TechScope 만들기

썸네일 이미지 본 홈페이지와 무관

📰 개발자들을 위한 기술 뉴스 큐레이션 웹앱, TechScope 만들기

기술 트렌드는 너무 빠르게 바뀌고, 다양한 블로그나 뉴스가 흩어져 있어서 한눈에 보기 어렵습니다.
"개발자들이 한 곳에서 최신 기술 뉴스를 확인할 수 있으면 어떨까?"
라는 생각으로 시작한 프로젝트가 바로 TechScope입니다.

---

🧠 기획 의도

기술 뉴스도 넷플릭스처럼 "카테고리별로 쉽게", "무한으로 탐색 가능하게" 보고 싶었다!

• 다양한 기술 블로그/뉴스 API를 통합하여
• 프론트엔드, 백엔드, AI 등 분야별 뉴스 제공
• 태그 기반 필터링 + 키워드 검색으로 최신 트렌드를 한눈에

---

🛠 사용 기술 스택

범주	기술 스택
프레임워크	Next.js 15 (pages 디렉토리 기반)
스타일링	Tailwind CSS
데이터 페칭	React Query (@tanstack/react-query)
API	Dev.to API (기술 블로그 기사 제공)
상태 관리	React useState, useEffect
배포	Vercel

---

🔍 주요 기능 소개

✅ 1. 카테고리별 뉴스 보기

WebDev, AI, Cloud, Design 등 다양한 기술 태그를 선택해 뉴스 필터링

🔄 2. 무한 스크롤

React Query의 useInfiniteQuery로 페이지네이션 없이 자연스럽게 로딩

🔎 3. 검색 기능

키워드 입력 시 관련 뉴스만 필터링 가능

📄 4. 뉴스 상세 보기

뉴스 카드 클릭 시 /news/[id] 페이지로 이동하여 전체 기사 보기

---

📁 폴더 구조

/src
┣ app/
┃ ┣ page.js             # 홈 페이지
┃ ┣ news/[id]/page.js   # 뉴스 상세 페이지
┣ components/           # UI 컴포넌트
┣ lib/
┃ ┗ api.js              # 뉴스 Fetch 함수 정의
┣ styles/               # Tailwind 설정 및 글로벌 스타일

---

📌 향후 확장 아이디어

• 북마크 수 기반 정렬 (API 미지원)
• 뉴스 모달 상세 보기
• 기사 공유(SNS, 클립보드 등)
• 북마크 기능: 로컬 스토리지 or Supabase 같은 DB 연동

---

🚀 데모

👉 https://tech-nine-rust.vercel.app/

---

🙋 프로젝트를 마치며

이번 프로젝트에서는 다음과 같은 점들을 직접 구현해보았습니다:

• Dev.to API를 활용한 실시간 뉴스 연동
• 무한 스크롤과 캐싱 처리
• 카테고리 필터링 & 검색 UX 구성
• Next.js 15 디렉토리 구조와 라우팅 경험

작지만 실제 서비스처럼 동작하는 프로젝트였기에
프론트엔드로서 데이터 흐름과 사용자 경험을 설계하는 데 큰 도움이 되었습니다.

---

 

 

🧑‍💻 React Query 직접 써보고 느낀 점

useEffect + axios로 직접 상태를 관리하던 방식에 비해 훨씬 효율적이었다!

• 무한 스크롤 구현 시 useInfiniteQuery가 페이지네이션을 자동으로 처리해줘서 코드가 간결해졌음
• 요청 결과에 따른 상태값(isLoading, hasNextPage 등)을 쉽게 사용할 수 있어 UX 흐름 관리가 쉬웠음
• 데이터가 캐시에 저장되기 때문에 같은 데이터를 다시 불러올 때 속도가 빠르고 중복 요청이 줄어듦
• Dev.to API처럼 외부 API를 사용할 때도 별다른 전역 상태 관리 도구 없이도 효율적인 구성이 가능했음

 

감사합니다!