Vibe Coding 워크플로우 풀스택 앱 빠르게 만들기 (Wasp 활용)

A Structured Workflow for Vibe Coding Full-Stack Apps (with Wasp)

  # Wasp 설치 (아직 안 했다면)
curl -sSL https://get.wasp-lang.dev/installer.sh | sh 
  # 새 Wasp 프로젝트 생성
wasp new MyAwesomeApp
cd MyAwesomeApp

// main.wasp
app MyAwesomeApp {
  wasp: {
    version: "^0.13.0" // Wasp 버전 명시
  },
  title: "My Awesome To-Do App", // 앱 제목
  auth: { // 사용자 인증 기능 설정
    userEntity: User, // 사용자 정보를 담을 엔티티 (아래 정의)
    methods: {
      usernameAndPassword: {} // 아이디/비밀번호 방식 사용
    },
    onAuthFailedRedirectTo: "/login"
  },
  // 이메일 발송 기능 사용 여부 (여기서는 예시로 false)
  emailSender: {
    type: "dummy", // 개발 중에는 실제 이메일 대신 콘솔에 출력
    fromAddress: "noreply@example.com"
  }
}
 
// 사용자 데이터 모델 정의
entity User {
  username: String @unique,
  password: String,
  tasks: [Task] @relation(name: "UserTasks") // 사용자와 할 일(Task) 관계 정의
}
 
// 할 일(Task) 데이터 모델 정의 (Prisma 스키마와 유사)
entity Task {
  description: String,
  isDone: Boolean @default(false), // 기본값은 false
  user: User @relation(name: "UserTasks", fields: [userId], references: [id]), // Task는 User에 속함
  userId: Int
}
 
// 라우트 정의 (웹 페이지 경로)
route RootRoute { path: "/", to: MainPage } // 루트 경로는 MainPage 컴포넌트로 연결
page MainPage { // MainPage 정의
  component: import { MainPage } from "@src/MainPage.tsx", // 실제 React 컴포넌트 파일 경로
  authRequired: true // 이 페이지는 로그인 필요
}
 
route LoginRoute { path: "/login", to: LoginPage }
page LoginPage {
  component: import { LoginPage } from "@src/LoginPage.tsx"
}
// ... 기타 페이지 및 라우트 정의

import { HttpError } from '@wasp/core/HttpError.js'; // Wasp가 제공하는 HttpError 클래스
import { type Task } from '@wasp/entities'; // .wasp 파일에서 정의한 Task 엔티티 타입
import { type CreateTask } from '@wasp/actions/types'; // Wasp가 생성해주는 Action 타입
 
// CreateTask 타입은 입력(args)과 반환값(Task)의 타입을 지정합니다.
export const createTask: CreateTask<{ description: string }, Task> = async (args, context) => {
  // context.user를 통해 현재 로그인한 사용자 정보에 접근 가능 (auth 설정 시)
  if (!context.user) {
    throw new HttpError(401); // 로그인하지 않은 사용자는 에러 발생
  }
 
  // context.entities를 통해 Prisma Client처럼 데이터베이스와 상호작용 가능
  const newTask = await context.entities.Task.create({
    data: {
      description: args.description,
      user: { connect: { id: context.user.id } } // 현재 사용자와 Task 연결
    }
  });
  return newTask;
};

import { HttpError } from '@wasp/core/HttpError.js';
import { type Task } from '@wasp/entities';
import { type GetTasks } from '@wasp/queries/types'; // Wasp가 생성해주는 Query 타입
 
// GetTasks 타입은 입력(args)이 없고, Task 배열을 반환함을 지정합니다.
export const getTasks: GetTasks<void, Task[]> = async (args, context) => {
  if (!context.user) {
    throw new HttpError(401);
  }
  return context.entities.Task.findMany({
    where: { user: { id: context.user.id } }, // 현재 사용자의 할 일만 가져오기
    orderBy: { id: 'desc' } // 최신순으로 정렬
  });
};

import React, { useState } from 'react';
import { useQuery } from '@wasp/queries';         // Wasp가 생성한 useQuery 훅
import { useAction } from '@wasp/actions';       // Wasp가 생성한 useAction 훅
import getTasks from '@wasp/queries/getTasks';   // 위에서 정의한 Query 임포트
import createTask from '@wasp/actions/createTask'; // 위에서 정의한 Action 임포트
import logout from '@wasp/auth/logout.js';      // Wasp가 제공하는 로그아웃 Action
 
export function MainPage() {
  // getTasks Query 호출 (데이터, 로딩 상태, 에러 객체 반환)
  const { data: tasks, isLoading, error: tasksError } = useQuery(getTasks);
  // createTask Action 사용 준비
  const createTaskFn = useAction(createTask);
  // 새 할 일 입력을 위한 상태
  const [newTaskDescription, setNewTaskDescription] = useState('');
 
  const handleCreateTask = async () => {
    if (!newTaskDescription) return;
    try {
      await createTaskFn({ description: newTaskDescription }); // Action 실행
      setNewTaskDescription(''); // 입력창 비우기
    } catch (err: any) {
      window.alert('Error: ' + (err.message || 'Failed to create task'));
    }
  };
 
  if (isLoading) return <div>Loading...</div>;
  if (tasksError) return <div>Error: {tasksError.message}</div>;
 
  return (
    <div className="p-4">
      <button 
        onClick={logout} 
        className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded float-right"
      >
        Logout
      </button>
      <h1 className="text-2xl font-bold mb-4">My To-Do List</h1>
      <div className="flex mb-4">
        <input
          type="text"
          className="border rounded-l px-4 py-2 w-full"
          placeholder="Enter new task..."
          value={newTaskDescription}
          onChange={(e) => setNewTaskDescription(e.target.value)}
        />
        <button
          onClick={handleCreateTask}
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-r"
        >
          Add Task
        </button>
      </div>
      <ul>
        {tasks?.map((task) => (
          <li key={task.id} className={`p-2 mb-2 border rounded ${task.isDone ? 'line-through bg-green-100' : 'bg-white'}`}>
            {task.description}
            {/* 여기에 완료/미완료 처리 버튼 등을 추가할 수 있습니다. */}
          </li>
        ))}
      </ul>
    </div>
  );
}