NextJS 템플릿
Next.js, Vercel 및 Back4App으로 티켓팅 앱 구축하기

30min
이 튜토리얼에서는 티켓팅 시스템을 구축할 것입니다. Next.js를 사용하고, Back4App을 백엔드 서비스로, Tailwind CSS를 스타일링에 사용할 것입니다. 이 앱은 사용자가 티켓을 생성, 업데이트, 조회 및 삭제할 수 있도록 하며, 데이터베이스 관리를 위해 Parse Server를 Back4App에서 활용합니다.
1. 필수 조건
시작하기 전에 다음 사항을 확인하세요:
Node.js가 당신의 컴퓨터에 설치되어 있어야 합니다 (Node.js 설치 가이드).
Back4App 계정이 필요합니다 (무료로 가입하기).
Vercel 배포를 위한 계정이 필요합니다 (Vercel에 가입하기).
2. Back4App 설정하기
Back4App 대시보드에 로그인하고 새 프로젝트를 생성하세요.
데이터 브라우저로 이동하여 새로운 클래스를 생성하세요. 클래스 이름은 티켓이며, 다음 스키마를 사용하세요:
필드 이름
유형
제목
문자열
설명
문자열
카테고리
문자열
우선순위
번호
진행
번호
상태
문자열
생성일
날짜 (자동 생성)
업데이트됨
날짜 (자동 생성)
3. 프론트엔드 설정 (Next.js)
3.1 새로운 Next.js 프로젝트 만들기
다음 명령어를 실행하여 새로운 Next.js 프로젝트를 생성하세요:
Bash
npx create-next-app@latest ticketing-app
cd ticketing-app
npx create-next-app@latest ticketing-app
cd ticketing-app
﻿
3.2 의존성 설치
설치 Tailwind CSS, Font Awesome, 및 Parse SDK 백엔드 작업을 위해:
Bash
npm install tailwindcss postcss autoprefixer @fortawesome/fontawesome-free parse
npx tailwindcss init -p
npm install tailwindcss postcss autoprefixer @fortawesome/fontawesome-free parse
npx tailwindcss init -p
﻿
3.3 Tailwind CSS 설정
Tailwind CSS 콘텐츠 경로를 구성하기 위해 tailwind.config.js 파일을 편집하세요:
JS
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
﻿
 styles/globals.css, Tailwind 가져오기를 추가하세요:
CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base;
@tailwind components;
@tailwind utilities;
﻿
3.4 프로젝트 구조 만들기
제공된 구조를 따라 필요한 디렉토리와 구성 요소를 만드세요.
디렉토리 구조:
Text
/app
  /tickets
    /[id]
      page.js
  layout.js
  page.js
/components
  DeleteBlock.jsx
  Nav.jsx
  PriorityDisplay.jsx
  ProgressDisplay.jsx
  StatusDisplay.jsx
  TicketCard.jsx
  TicketForm.jsx
/lib
  parseClient.js
/app
  /tickets
    /[id]
      page.js
  layout.js
  page.js
/components
  DeleteBlock.jsx
  Nav.jsx
  PriorityDisplay.jsx
  ProgressDisplay.jsx
  StatusDisplay.jsx
  TicketCard.jsx
  TicketForm.jsx
/lib
  parseClient.js
﻿
4. Parse 클라이언트 설정하기
In the /lib folder, create a parseClient.js file to configure the Parse SDK.
JS
import Parse from 'parse';

// Initialize Parse SDK
Parse.initialize('YOUR_APP_ID', 'YOUR_JS_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
import Parse from 'parse';

// Initialize Parse SDK
Parse.initialize('YOUR_APP_ID', 'YOUR_JS_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
﻿
Replace 'YOUR_APP_ID' and 'YOUR_JS_KEY' with your Back4App project credentials.
5. 주요 구성 요소 만들기
5.1 TicketForm
This component will handle both creating and updating tickets.
In /components/TicketForm.jsx, create the following:
JS
import { useState } from 'react';
import Parse from '../lib/parseClient';

export default function TicketForm({ ticket }) {
  const [title, setTitle] = useState(ticket?.title || '');
  const [description, setDescription] = useState(ticket?.description || '');

  const handleSubmit = async (e) => {
    e.preventDefault();
    const Ticket = Parse.Object.extend('Ticket');
    const newTicket = ticket || new Ticket();
    newTicket.set('title', title);
    newTicket.set('description', description);

    try {
      await newTicket.save();
      alert('Ticket saved successfully!');
    } catch (error) {
      console.error('Error saving ticket:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Title"
        required
      />
      <textarea
        value={description}
        onChange={(e) => setDescription(e.target.value)}
        placeholder="Description"
        required
      />
      <button type="submit">Save Ticket</button>
    </form>
  );
}
import { useState } from 'react';
import Parse from '../lib/parseClient';

export default function TicketForm({ ticket }) {
  const [title, setTitle] = useState(ticket?.title || '');
  const [description, setDescription] = useState(ticket?.description || '');

  const handleSubmit = async (e) => {
    e.preventDefault();
    const Ticket = Parse.Object.extend('Ticket');
    const newTicket = ticket || new Ticket();
    newTicket.set('title', title);
    newTicket.set('description', description);

    try {
      await newTicket.save();
      alert('Ticket saved successfully!');
    } catch (error) {
      console.error('Error saving ticket:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Title"
        required
      />
      <textarea
        value={description}
        onChange={(e) => setDescription(e.target.value)}
        placeholder="Description"
        required
      />
      <button type="submit">Save Ticket</button>
    </form>
  );
}
﻿
5.2 TicketCard
이 구성 요소는 개별 티켓 정보를 표시합니다.
에서 /components/TicketCard.jsx:
JS
import Link from 'next/link';
import ProgressDisplay from './ProgressDisplay';

export default function TicketCard({ ticket }) {
  return (
    <div className="border p-4">
      <h2>{ticket.title}</h2>
      <p>{ticket.description}</p>
      <ProgressDisplay progress={ticket.progress} />
      <Link href={`/tickets/${ticket.objectId}`}>Edit</Link>
    </div>
  );
}
import Link from 'next/link';
import ProgressDisplay from './ProgressDisplay';

export default function TicketCard({ ticket }) {
  return (
    <div className="border p-4">
      <h2>{ticket.title}</h2>
      <p>{ticket.description}</p>
      <ProgressDisplay progress={ticket.progress} />
      <Link href={`/tickets/${ticket.objectId}`}>Edit</Link>
    </div>
  );
}
﻿
5.3 DeleteBlock
티켓 삭제를 위한 확인 구성 요소:
에서 /components/DeleteBlock.jsx:
JS
import Parse from '../lib/parseClient';

export default function DeleteBlock({ ticketId, onDelete }) {
  const handleDelete = async () => {
    const query = new Parse.Query('Ticket');
    const ticket = await query.get(ticketId);

    try {
      await ticket.destroy();
      alert('Ticket deleted successfully');
      onDelete();
    } catch (error) {
      console.error('Error deleting ticket:', error);
    }
  };

  return (
    <button onClick={handleDelete}>Delete Ticket</button>
  );
}
import Parse from '../lib/parseClient';

export default function DeleteBlock({ ticketId, onDelete }) {
  const handleDelete = async () => {
    const query = new Parse.Query('Ticket');
    const ticket = await query.get(ticketId);

    try {
      await ticket.destroy();
      alert('Ticket deleted successfully');
      onDelete();
    } catch (error) {
      console.error('Error deleting ticket:', error);
    }
  };

  return (
    <button onClick={handleDelete}>Delete Ticket</button>
  );
}
﻿
5.4 ProgressDisplay
이 구성 요소는 진행 상황을 백분율 막대로 표시합니다:
에서 /components/ProgressDisplay.jsx:
JS
export default function ProgressDisplay({ progress }) {
  return (
    <div>
      <div className="w-full bg-gray-200 rounded">
        <div
          className="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded"
          style={{ width: `${progress}%` }}
        >
          {progress}%
        </div>
      </div>
    </div>
  );
}
export default function ProgressDisplay({ progress }) {
  return (
    <div>
      <div className="w-full bg-gray-200 rounded">
        <div
          className="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded"
          style={{ width: `${progress}%` }}
        >
          {progress}%
        </div>
      </div>
    </div>
  );
}
﻿
5.4 ProgressDisplay
6. 페이지 및 라우팅
6.1 티켓 목록
에서 /app/page.js, 티켓 목록을 표시합니다:
JS
import { useEffect, useState } from 'react';
import Parse from '../lib/parseClient';
import TicketCard from '../components/TicketCard';

export default function Home() {
  const [tickets, setTickets] = useState([]);

  useEffect(() => {
    const fetchTickets = async () => {
      const query = new Parse.Query('Ticket');
      const results = await query.find();
      setTickets(results);
    };
    fetchTickets();
  }, []);

  return (
    <div>
      <h1>Tickets</h1>
      {tickets.map(ticket => (
        <TicketCard key={ticket.id} ticket={ticket} />
      ))}
    </div>
  );
}
import { useEffect, useState } from 'react';
import Parse from '../lib/parseClient';
import TicketCard from '../components/TicketCard';

export default function Home() {
  const [tickets, setTickets] = useState([]);

  useEffect(() => {
    const fetchTickets = async () => {
      const query = new Parse.Query('Ticket');
      const results = await query.find();
      setTickets(results);
    };
    fetchTickets();
  }, []);

  return (
    <div>
      <h1>Tickets</h1>
      {tickets.map(ticket => (
        <TicketCard key={ticket.id} ticket={ticket} />
      ))}
    </div>
  );
}
﻿
6.2 티켓 세부정보 및 편집
에서 /app/tickets/[id]/page.js:
JS
import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import Parse from '../../../lib/parseClient';
import TicketForm from '../../../components/TicketForm';
import DeleteBlock from '../../../components/DeleteBlock';

export default function TicketDetail() {
  const router = useRouter();
  const { id } = router.query;
  const [ticket, setTicket] = useState(null);

  useEffect(() => {
    if (!id) return;
    const fetchTicket = async () => {
      const query = new Parse.Query('Ticket');
      const result = await query.get(id);
      setTicket(result);
    };
    fetchTicket();
  }, [id]);

  const handleDelete = () => {
    router.push('/');
  };

  if (!ticket) return <div>Loading...</div>;

  return (
    <div>
      <TicketForm ticket={ticket} />
      <DeleteBlock ticketId={ticket.id} onDelete={handleDelete} />
    </div>
  );
}
import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import Parse from '../../../lib/parseClient';
import TicketForm from '../../../components/TicketForm';
import DeleteBlock from '../../../components/DeleteBlock';

export default function TicketDetail() {
  const router = useRouter();
  const { id } = router.query;
  const [ticket, setTicket] = useState(null);

  useEffect(() => {
    if (!id) return;
    const fetchTicket = async () => {
      const query = new Parse.Query('Ticket');
      const result = await query.get(id);
      setTicket(result);
    };
    fetchTicket();
  }, [id]);

  const handleDelete = () => {
    router.push('/');
  };

  if (!ticket) return <div>Loading...</div>;

  return (
    <div>
      <TicketForm ticket={ticket} />
      <DeleteBlock ticketId={ticket.id} onDelete={handleDelete} />
    </div>
  );
}
﻿
7. Vercel에 배포하기 
7.1: Vercel 계정 만들기
Vercel 계정이 없다면, vercel.com로 가서 계정을 만드세요.
GitHub, GitLab 또는 Bitbucket으로 가입할 수 있습니다. Vercel은 배포를 위해 리포지토리를 직접 연결하는 것을 쉽게 만들어 줍니다.
7.2: 코드를 GitHub에 푸시하기
Vercel에 앱을 배포하려면 GitHub (또는 GitLab/Bitbucket)과 같은 버전 관리 플랫폼에 프로젝트가 호스팅되어 있어야 합니다.
프로젝트가 아직 GitHub에 없다면, 다음 단계를 따르세요:
프로젝트 디렉토리에서 git을 초기화하세요:
bashCopy codegit init
프로젝트를 GitHub에 추가하세요:
bashCopy codegit add .
git commit -m "초기 커밋"
git branch -M main
git remote add origin https://github.com/YOUR_GITHUB_USERNAME/ticketing-app.git
git push -u origin main
7.3: Vercel CLI 설치 (선택 사항) 
명령줄에서 직접 배포하는 것을 선호한다면, Vercel CLI를 전역으로 설치하세요:
bashCopy codenpm install -g vercel
또는 Vercel의 대시보드를 통해 배포할 수 있으며, 다음에 다룰 것입니다.
7.4: GitHub 리포지토리를 Vercel에 연결하기
이동하십시오 Vercel.
클릭하십시오 새 프로젝트.
당신의 Next.js 프로젝트가 포함된 Git 저장소를 선택하십시오.
프로젝트를 구성하십시오:
Vercel은 자동으로 이것이 Next.js 프로젝트임을 감지하고 올바른 빌드 설정을 적용합니다.
 루트 디렉토리를 프로젝트의 폴더로 설정하십시오 (필요한 경우).
7.5: 환경 변수 설정 
당신은 Back4App 자격 증명 및 Vercel의 다른 환경 변수를 구성해야 합니다.
Vercel의 프로젝트 설정, 환경 변수 섹션으로 이동하십시오.
다음 환경 변수를 추가하십시오:
7.6: .env.local에서 Parse 구성 설정 (선택 사항)
개발 중에 로컬 환경 변수를 사용하는 경우, 다음 변수를 포함하여 루트 프로젝트 디렉토리에 .env.local 파일을 생성해야 합니다.
bashCopy codeNEXT_PUBLIC_PARSE_APP_ID=YOUR_APP_ID
NEXT_PUBLIC_PARSE_JS_KEY=YOUR_JS_KEY
NEXT_PUBLIC_PARSE_SERVER_URL=https://parseapi.back4app.com
이 환경 변수는 Vercel 대시보드에 설정되면 Vercel에서도 사용됩니다.
7.7: 빌드 설정 구성 (선택 사항)
다음 사항을 확인하십시오: Node.js 버전 및 빌드 명령이 올바르게 구성되어 있습니다 (Vercel이 자동으로 감지합니다).
 Next.js 앱의 경우 기본 설정은 다음과 같아야 합니다:
빌드 명령: npm run build
출력 디렉토리: .next/
7.8: 프로젝트 배포
GitHub 리포지토리를 연결하면 Vercel이 자동으로 빌드 및 배포 프로세스를 트리거합니다.
Vercel 대시보드에서 빌드 상태를 확인할 수 있습니다.
7.9: 배포 로그 확인 
배포 중 문제가 발생하면 배포 로그를 검사하여 디버깅할 수 있습니다.
7.10: 배포된 앱에 접근하기 
배포가 성공하면 Vercel이 Next.js 앱이 실시간으로 실행되는 고유한 URL을 제공합니다. 이 URL을 방문하여 배포된 티켓팅 앱에 접근할 수 있습니다.
예: https://your-app-name.vercel.app/
8. 원활한 배포 보장
Back4App 자격 증명: Back4App 환경 변수가 .env.local(로컬 개발용) 및 Vercel 대시보드(프로덕션용)에 올바르게 설정되어 있는지 다시 확인하세요.
CORS (교차 출처 리소스 공유): Back4App이 CORS 설정에서 Vercel URL을 허용하는지 확인하세요. 이는 Back4App 대시보드의 보안에서 구성할 수 있습니다.
API 테스트: 배포하기 전에 Back4App API 상호작용을 로컬에서 테스트하여 모든 것이 원활하게 작동하는지 확인하세요.
﻿
9. 결론
이 단계들을 통해 Next.js 티켓팅 앱이 이제 Vercel, Back4App을 백엔드로 사용하여 배포되었습니다. 이는 Back4App 설정, Next.js에서 프론트엔드 생성, Vercel에서 앱을 실시간으로 배포하는 전체 개발 사이클을 완료합니다.
업데이트를 원하시면 GitHub 리포지토리에 변경 사항을 푸시하면 Vercel이 자동으로 새로운 배포를 트리거합니다.
필드 이름	유형
제목	문자열
설명	문자열
카테고리	문자열
우선순위	번호
진행	번호
상태	문자열
생성일	날짜 (자동 생성)
업데이트됨	날짜 (자동 생성)
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
리액트JS를 위한 백엔드를 구축하는 방법?
Next.js, Vercel 및 Back4app을 사용한 청구서 앱 튜토리얼