GigFlow 구축: 실시간 프리랜스 마켓플레이스와 보안 채용 로직

발행: (2026년 1월 16일 오후 03:35 GMT+9)
6 min read
원문: Dev.to

I’m sorry, but I can’t retrieve the article from the link you provided. If you paste the text you’d like translated here, I’ll be happy to translate it into Korean while preserving the original formatting, markdown, and code blocks.

Introduction

현대 마켓플레이스는 단순히 CRUD API만을 의미하는 것이 아니라, 정확성, 신뢰, 그리고 실시간 피드백을 의미합니다. 이 포스트에서는 클라이언트가 작업을 게시하고, 프리랜서가 입찰하며, 채용이 원자적으로 실시간으로 이루어지는 풀스택 프리랜스 마켓플레이스 GigFlow를 어떻게 구축했는지 살펴보겠습니다.

프로젝트 초점

  • 보안 인증
  • 정확한 채용 로직
  • 경쟁 상태 방지
  • Socket.io를 사용한 실시간 업데이트

GigFlow 개요

  • 인증된 모든 사용자는 gig(클라이언트 역할)를 게시할 수 있습니다
  • 모든 사용자는 gig에 입찰할 수 있습니다(프리랜서 역할)
  • 클라이언트는 각 gig당 정확히 한 명의 프리랜서를 고용할 수 있으며, 다른 모든 입찰은 자동으로 거부됩니다
  • 고용된 프리랜서는 실시간 알림을 받습니다

Tech Stack

LayerTechnology
프론트엔드React (Vite), Tailwind CSS, Context API, Socket.io 클라이언트, 자격 증명이 포함된 Fetch API
백엔드Node.js + Express, MongoDB + Mongoose, JWT 인증 (HttpOnly 쿠키), Socket.io, MongoDB 트랜잭션
배포프론트엔드: Vercel, 백엔드: Render, 데이터베이스: MongoDB Atlas

인증

Authentication uses JWT stored in HttpOnly cookies, which:

  • Prevents access from JavaScript (XSS‑safe)
  • Works cleanly with credentials: "include"

Each request:

  1. Verifies the JWT
  2. Attaches the authenticated user to req.user

This enables a role‑less design: users can act as both client and freelancer without separate accounts.

데이터 모델

// User
{
  "name": "String",
  "email": "String",
  "password": "HashedString"
}
// Gig
{
  "title": "String",
  "description": "String",
  "budget": "Number",
  "ownerId": "ObjectId",
  "status": "open | assigned",
  "assignedTo": "ObjectId | null"
}
// Bid
{
  "gigId": "ObjectId",
  "freelancerId": "ObjectId",
  "message": "String",
  "price": "Number",
  "status": "pending | hired | rejected"
}

고용 로직 (핵심 과제)

규칙: gig당 한 명의 프리랜서만 고용할 수 있습니다 — 절대적으로.

엣지 케이스

두 명의 클라이언트(또는 두 개의 브라우저 탭)가 동시에 Hire 버튼을 클릭합니다. 보호 조치가 없으면 두 입찰 모두가 고용된 것으로 표시될 수 있습니다.

해결책: MongoDB 트랜잭션

  1. 세션 시작
  2. 검사 gig이 아직 열려 있는지 확인
  3. gig 업데이트statusassigned로, assignedTo를 선택된 프리랜서로 설정
  4. 선택된 입찰 표시hired
  5. 다른 모든 입찰 표시rejected
  6. 트랜잭션 커밋

어떤 단계가 실패하면 트랜잭션이 롤백되어 보장됩니다:

  • 정확히 한 명의 프리랜서만 고용됨
  • 부분적이거나 일관성 없는 상태가 없음

실시간 알림

프리랜서가 고용될 때:

  1. 백엔드가 해당 프리랜서의 Socket.io 방에 hired 이벤트를 전송합니다.
  2. 프리랜서 대시보드가 즉시 업데이트됩니다—폴링도, 페이지 새로고침도 필요 없습니다.

사용자 흐름

  1. Create gig → gig 상태 open
  2. View bids → 프리랜서가 입찰을 제출합니다
  3. Click Hire → gig이 assigned 상태가 됩니다
  4. **Freelancer receives real‑time hire notification** → 프리랜서가 실시간 고용 알림을 받음

Context API를 사용하여 상태를 최소화하고 예측 가능하게 유지합니다.

배포 고려 사항

  • 모든 필수 환경 변수를 명시적으로 설정합니다.
  • 배포된 프런트엔드 도메인을 허용하도록 CORS를 구성합니다; Socket.io는 Express와 동일한 CORS 설정을 공유합니다.
  • API 기본 URL은 배포된 백엔드를 가리켜야 합니다.
  • Fetch 요청에는 자격 증명을 포함해야 합니다.

핵심 원칙

  • 올바른 API 설계
  • 안전한 인증
  • 트랜잭션 무결성
  • 실시간 통신
  • 프로덕션 배포 인식

라이브 데모 및 소스 코드

  • 라이브 앱:
  • GitHub 저장소:

최종 생각

전체 스택 개발에서 가장 어려운 부분은 코드를 작성하는 것이 아니라, 여러 작업이 동시에 발생할 때 시스템이 올바르게 동작하도록 보장하는 것입니다. GigFlow는 이러한 원칙을 염두에 두고 구축되었습니다.

Back to Blog

관련 글

더 보기 »

기술은 구원자가 아니라 촉진자다

왜 사고의 명확성이 사용하는 도구보다 더 중요한가? Technology는 종종 마법 스위치처럼 취급된다—켜기만 하면 모든 것이 개선된다. 새로운 software, ...

에이전틱 코딩에 입문하기

Copilot Agent와의 경험 나는 주로 GitHub Copilot을 사용해 인라인 편집과 PR 리뷰를 수행했으며, 대부분의 사고는 내 머리로 했습니다. 최근 나는 t...