Inflearn brand logo image
Inflearn brand logo image
NEW
개발 · 프로그래밍

/

풀스택

React & FastAPI로 만드는 투표 커뮤니티 플랫폼: 결제 시스템으로 수익화까지!

이 강의에서는 React와 FastAPI를 활용해 실시간 투표, 댓글, 좋아요 등의 소셜 기능은 물론, 결제 시스템(카카오페이, 토스페이 등)을 연동해 수익화하는 방법까지 단계별로 실습합니다.

53명 이 수강하고 있어요.

이런 걸 배울 수 있어요

  • React와 FastAPI를 활용한 풀스택 웹앱 개발 방법

  • 투표, 좋아요, 댓글 기능이 포함된 소셜 커뮤니티 플랫폼 구현

  • JWT 인증 및 사용자 로그인/회원가입 시스템 구축

  • 아임포트 결제 API를 통한 수익화 시스템 연동

  • Docker 기반 개발 환경 구축부터 DB 설계, API 문서화, 배포까지의 웹서비스 전체 흐름 경험

투표 커뮤니티, 프론트부터 백엔드까지 직접 만들기

제가 이 투표 플랫폼을 처음 떠올린 건 2024년 겨울이었습니다.
당시 한국 사회는 잘 아시다시피, 한 정치적 사건으로 온통 술렁이고 있었고, 그 여파로 대통령 탄핵 여부를 둘러싼 여론이 극도로 양분되었던 시기였습니다.

그러던 중 우연히 폴리마켓(Polymarket)이라는 해외 투표 플랫폼을 보게 되었고, 거기엔 "탄핵 찬반" 같은 민감한 주제조차도 사람들이 익명으로 참여해 실시간으로 의견을 나누는 공간이 존재하더라고요.
그걸 보면서 문득 이런 생각이 들었습니다:

"이걸 우리도 만들 수 있지 않을까?"

그렇게 시작됐습니다.
화제가 되는 토픽을 만들고 → 공유하고 → 익명으로 의견을 나누고 → 결과를 함께 확인할 수 있는
간단하지만 의미 있는 커뮤니티 플랫폼.

그 흐름을 React와 FastAPI, Docker를 통해 풀스택으로 구현했습니다.
누군가의 의견이 사라지지 않고, 쌓여서 의미가 되는 공간.
기술적으로도 실용적이고, 개인적으로도 만들고 싶었던 프로젝트를 여러분과 함께 완성해보려 합니다.


🎉 드디어 데모 웹사이트 출시!

https://talkandvote-demo.site/

토론과 투표가 한 곳에서! 이제 직접 체험해보세요.

주의사항

본 데모 사이트의 결제 기능은 실제로 결제가 진행되며 금액이 출금됩니다.
단, 이는 테스트용 결제로 일정 시간 내 자동 취소 처리되니 안심하세요. (일정 시간이 지나도 환불되지 않는 경우 질문글로 문의 부탁드립니다.)

📦 패치 노트

  • 결제 기능 구현 완료 (2025년 6월 16일)
    사용자 결제 시스템 전반 구현 및 테스트 완료

  • AWS 기반 HTTPS 도메인 배포 완료 (2025년 6월 17일)
    AWS EC2 + DuckDns + Nginx 조합을 통한 HTTPS 배포 강의 업로드

🔄 지속 업데이트 계획

  • 매달 저희 팀이 준비한 추가 기능 강의가 이어질 예정입니다.

  • 또한, 여러분이 원하시는 기능을 수집하기 위해 [Google Form]을 통해 의견을 받고 있으며,
    선착순 및 가장 많은 요청이 모인 기능부터 강의화할 계획입니다.

React & FastAPI로 만드는 투표 커뮤니티 플랫폼: 결제 시스템으로 수익화까지! 유튜브 동영상

📘 수강생을 위한 강의 정리노트 제공

이 강의를 수강하시는 모든 분들께 강의 정리 PDF 노트를 함께 제공합니다.

프론트엔드부터 백엔드까지, 모르는 코드에 대한 자세한 설명과 예제코드를 담았습니다.

프론트엔드 노트 (총 37장 분량)

  • JavaScript 기초 문법 정리

  • React 컴포넌트 구성 방식

  • React Hooks 실전 사용법 (useState, useEffect, useContext 등)

  • Tailwind CSS 스타일 코드


백엔드 노트 (총 75장 분량)

  • Python 문법 기초 및 예제 코드

  • FastAPI 구조, 경로 설정, 의존성 주입

  • JWT 기반 인증 / 리프레시 토큰 처리 흐름도

  • DB 모델 설계 & 관계형 데이터 구성

  • RESTful API 설계 & 응답 구조


🧩 플랫폼 주요 기능 미리보기

"단순 투표를 넘어서, 참여형 커뮤니티 플랫폼으로"

1) 유저가 직접 화제의 토픽을 생성

유저는 궁금한 주제를 토픽으로 만들 수 있습니다.
주제 입력 → 선택지 추가 → 카테고리 선택까지
간단한 폼 작성만으로 하나의 토픽이 생성되고, 전체 유저에게 공유됩니다.

2) 투표 후 실시간 투표 그래프 확인

투표 결과는 선택 후 즉시 반영되는 실시간 막대그래프로 확인할 수 있습니다. 누구나 한 번의 클릭으로 참여하고, 결과를 직관적으로 비교할 수 있도록 구성되어 있습니다.

3) 결제 기능을 통한 멤버십 기능

토스·카카오페이 등 국내 결제 시스템과의 연동을 직접 구현하면서, 단순한 기능 구현을 넘어서 유료화 가능한 플랫폼 구조를 설계해봅니다.
멤버십 등급에 따라 토픽 생성개수 제한과 나만의 서비스에서 실제로 수익을 창출할 수 있는 흐름까지 경험할 수 있습니다.

4) FastAPI 관리자 페이지 구현

전체 유저, 토픽, 투표 데이터를 FastAPI 관리자 페이지에서 통합 관리할 수 있습니다.
투표 통계, 비정상 토픽 차단, 유저 상태 변경 등 백오피스 기능도 직접 구성합니다.

궁금한 점이 있나요?

💬 Q1. 이 강의는 어느 정도 수준의 사람이 들으면 좋을까요?

React랑 Python 기초는 조금 다뤄봤는데, 아직 완전한 프로젝트는 안 만들어봤어요.
이 강의는 어느 정도 수준이면 따라갈 수 있을까요?


A1. 이 강의는 React와 Python 기초를 한 번이라도 만져본 분이라면 충분히 따라올 수 있도록 구성했습니다. 처음부터 끝까지 함께 만드는 방식이라, 중간중간 개념이 헷갈릴 수 있는 부분은 PDF 노트와 코드 주석으로 자세히 보완해뒀어요. “완벽하게 아는 상태”가 아니라 “해본 적은 있다” 정도면 딱 적기 좋은 난이도입니다.

💬 Q2. 혼자서도 끝까지 따라갈 수 있을까요? 실습 환경 어렵진 않나요?

풀스택 프로젝트라서 그런지 약간 부담되는데… 환경 설정이나 실습 흐름이 어렵진 않나요? 혼자서도 끝까지 만들 수 있을까요?


A2. 충분히 따라오실 수 있습니다. 처음부터 너무 복잡하게 시작하지 않고, React + FastAPI + Docker 구성 자체도 차근차근 쌓아가는 구조로 되어 있어요.

그리고 실습 중 헷갈릴 수 있는 부분은

  • 정리된 PDF 노트

  • Notion 각 챕터별 제공되는 전체코드

  • 오류 발생 시 질의응답

이렇게 다 준비해놨습니다.

“이걸 내가 혼자 해낼 수 있을까?”라는 질문보다는
“여기서 내가 어디까지 확장할 수 있을까?”로 바뀌는 게 목표입니다.

💬 Q3. 결제 기능은 실제로 결제되나요? 테스트만 가능한가요?

토스랑 카카오페이 연동한다고 하셨는데… 진짜 돈 빠져나가나요?
테스트 결제만 가능한 건가요?


A3. 이 강의에서는 아임포트(I'mport)라는 국내 PG 연동 서비스의 API를 활용해서 신용카드, 토스, 카카오페이 등 실제 결제 수단을 직접 구현합니다.

실제로 결제 요청이 들어가고 돈도 빠져나갑니다.
하지만 걱정 마세요! 사업자등록이 되어 있지 않으면 실제로 돈을 수령하진 못하고,
일정 시간이 지나면 자동으로 결제 취소(환불) 처리됩니다.

수강 전 참고 사항

운영 체제 (OS)

  • 이 강의는 아래 운영체제에서 모두 실습 가능합니다.

    • Windows 10 이상

    • macOS (M1/M2 포함)

    • Ubuntu 20.04 이상 또는 기타 Linux 계열

    • Chrome 브라우저 기반 개발 환경 사용 권장

📦 학습 자료 안내

📁 제공 자료 형식

  • 정리된 PDF 강의노트 (프론트엔드 37장 / 백엔드 75장)

  • 소스코드 예제 (Notion 링크 제공)


  • PPT/텍스트 기반 핵심 기술스텍 슬라이드 제공

  • 필요한 경우 사용된 API 문서 및 ReadMe 제공

📐 자료 용량 및 유의사항

  • PDF 용량: 약 1MB 내외

  • 소스코드: Notion에서 실시간 복사가능

  • 모든 자료는 수강자 전용 공유입니다.

🔎 선수 지식 (있으면 좋음)

  • HTML/CSS, JavaScript 기초 문법

  • React 컴포넌트와 useState/useEffect 구조 이해

  • Python 문법 및 간단한 함수/클래스 사용 경험

  • React, MySQL, Docker, REST API, FastAPI를 사용합니다!

※ 완전 초보자도 따라올 수 있도록 설명은 구성되어 있으나,
기본 문법은 익혀두는 것을 추천드립니다.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 결제 기능(카카오페이, 토스페이 등)을 웹사이트에 도입해보고 싶은 개발자

  • React와 FastAPI를 함께 활용한 풀스택 프로젝트를 경험해보고 싶은 분

  • 유저 참여형 커뮤니티 서비스(댓글·좋아요·투표 등)를 구현해보고 싶은 분

  • Docker와 배포까지 포함한 웹서비스의 전체 흐름을 익히고 싶은 분

선수 지식,
필요할까요?

  • React의 기본 개념(컴포넌트 구조, props/state, useState, useEffect 등 기본적인 훅 사용법)

  • FastAPI의 기본 구조(라우터 정의, 요청/응답 처리)

  • Python 문법 기초(함수, 클래스, 리스트/딕셔너리 활용 등)

안녕하세요
입니다.

289

수강생

16

수강평

32

답변

5.0

강의 평점

4

강의

안녕하세요! 서강대학교 컴공과를 졸업하고 현재 대학원 진학을 준비 중인 학생입니다.

고등학교 때 우연히 풀스택 웹 개발과 파이썬을 활용한 자동 매매를 시작하면서 프로그래밍에 빠지게 되었습니다.

그 후 다양한 프로젝트와 프로그래밍 과외활동을 경험하며 실력과 노하우를 공유했습니다. 이러한 경험을 통해 프로그래밍을 처음 접하는 분들에게도 "이렇게 쉬울 수 있구나!"라는 느낌을 줄 수 있는 강의를 만들고자 노력하고 있습니다.

 

실용적인 예제와 친근한 설명으로 여러분의 학습을 돕고 싶습니다. 감사합니다.

 

GitHub 저장소 바로가기 (클릭!)

커리큘럼

전체

63개 ∙ (17시간 17분)

해당 강의에서 제공:

수업자료
    강의 게시일: 
    마지막 업데이트일: 

    수강평

    아직 충분한 평가를 받지 못한 강의입니다.
    모두에게 도움이 되는 수강평의 주인공이 되어주세요!

    닭강정님의 다른 강의

    지식공유자님의 다른 강의를 만나보세요!

    비슷한 강의

    같은 분야의 다른 강의를 만나보세요!