Product Hunt 레이스 추적 사이드패널 만들기
중급45분2026-06-13
Product Hunt 오늘의 랭킹을 백그라운드에서 주기적으로 스냅샷으로 저장하고, 투표 속도와 순위 변동을 계산해 Chrome 사이드패널에서 보여주는 확장 프로그램 프로젝트를 만듭니다. Product Hunt 토큰이 없어도 샘플 데이터로 전체 흐름을 검증하면서, 최종적으로는 랭킹 카드·빠른 상승 제품·헌터별 묶음·watch rule 알림을 보여주는 사이드패널 화면을 완성합니다.
이 실습은 터미널에서 진행됩니다
오른쪽 패널에서 설치 명령어를 복사하세요이런 걸 배워요
- Product Hunt 랭킹을 스냅샷 단위로 저장하는 구조를 설계할 수 있습니다.
- 투표 속도와 순위 변동을 계산해 런치 레이스를 해석할 수 있습니다.
- 사이드패널 UI에서 랭킹, 빠른 상승 제품, 헌터별 묶음을 표시할 수 있습니다.
- watch rule 조건을 설정해 중요한 변화를 놓치지 않는 알림 흐름을 만들 수 있습니다.
어떻게 진행해요
1. 환경 확인하기
2. 확장 프로그램 뼈대 만들기
3. Product Hunt 연결 준비하기
4. 로컬 설정 파일 분리하기
5. 백그라운드 수집기 작성하기
6. 투표 속도와 알림 계산하기
7. 사이드패널 대시보드 작성하기
8. 로컬 검증 실행하기
AI 튜터가 각 단계를 하나씩 안내해줄 거예요