NextJS 템플릿
Back4App, Next.js 및 Vercel을 이용한 회의실 예약 앱 튜토리얼

23min
이 튜토리얼에서는 Bookit, 회의실 예약 시스템을 구축할 것입니다. 프론트엔드 프레임워크로는 Next.js를 사용하고, 백엔드 서비스로는 Back4App을 사용합니다. 사용자 인증, 방 관리 및 예약 기능을 구현하고, 앱을 Vercel에 배포할 것입니다.
1. 필수 조건
이 튜토리얼을 완료하려면 다음이 필요합니다:
Back4App 계정 (가입은 Back4App)
Back4App 프로젝트 ( 이 가이드)
로컬 머신에 Node.js 설치 (설치 가이드)
JavaScript, Next.js 및 REST API에 대한 기본 지식 (필요한 경우, JavaScript 기초)
2. Back4App 설정하기
Back4App 계정에 로그인하고 프로젝트 대시보드로 이동합니다.
왼쪽 사이드바에서 데이터베이스를 클릭하여 데이터 브라우저에 접근합니다.
데이터 모델링을 위해 다음 클래스를 생성해야 합니다:
2.1. 사용자 클래스 생성하기
기본적으로 Parse는 사용자 인증을 처리하므로 이 클래스를 수동으로 생성할 필요가 없습니다. Parse는 다음 필드를 자동으로 관리합니다:
이메일: 로그인용 이메일 주소
비밀번호: 비밀번호 (해시됨)
사용자 이름: 선택적 사용자 이름
2.2. 방 클래스 만들기
데이터 브라우저에서 Data Browser, 클릭하여 클래스 만들기, 선택하고 사용자 정의, 그리고 클래스를 룸, 이름을 지정합니다.
다음 열을 추가합니다:
열 이름
유형
설명
이름
문자열
방 이름
설명
문자열
방 설명
용량
번호
방이 수용할 수 있는 인원 수
편의 시설
배열
편의 시설 목록 (TV, WiFi 등)
가격
번호
시간당 가격
이미지
파일
이미지 URL
소유자
포인터
지점을 사용자 클래스
2.3. 예약 클래스 만들기
또 다른 사용자 정의 클래스를 만들기: 예약.
다음 열을 추가하세요:
열 이름
유형
설명
방
포인터
다음으로 가리킴: Room 클래스
사용자
포인터
다음으로 가리킴: User 클래스
체크인
날짜
예약의 시작 날짜/시간
체크아웃
날짜
예약의 종료 날짜/시간
3. Next.js 및 Parse SDK 설정하기
새로운 Next.js 프로젝트 생성하기:
Bash
npx create-next-app bookit-app
cd bookit-app
npx create-next-app bookit-app
cd bookit-app
﻿
Parse JS SDK 설치하기:
Bash
npm install parse
npm install parse
﻿
 pages/_app.js 파일에서 Back4App 자격증명으로 Parse 초기화하기:
JS
import Parse from 'parse';

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

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp;
import Parse from 'parse';

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

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp;
﻿
 'YOUR_APP_ID' 및 'YOUR_JAVASCRIPT_KEY'를 Back4App 앱 자격증명으로 교체하세요.
4. 사용자 인증 구현하기
4.1. 사용자 등록
등록 양식이 있는 새 페이지 pages/signup.js 생성하기:
JS
import { useState } from 'react';
import Parse from 'parse';

export default function Signup() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSignup = async (e) => {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', email);
    user.set('email', email);
    user.set('password', password);

    try {
      await user.signUp();
      alert('Signup successful!');
    } catch (error) {
      alert('Error: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleSignup}>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
      <button type="submit">Sign Up</button>
    </form>
  );
}
import { useState } from 'react';
import Parse from 'parse';

export default function Signup() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSignup = async (e) => {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', email);
    user.set('email', email);
    user.set('password', password);

    try {
      await user.signUp();
      alert('Signup successful!');
    } catch (error) {
      alert('Error: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleSignup}>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
      <button type="submit">Sign Up</button>
    </form>
  );
}
﻿
4.2. 사용자 로그인
사용자 로그인을 위한 pages/login.js 생성하기:
JS
import { useState } from 'react';
import Parse from 'parse';

export default function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      await Parse.User.logIn(email, password);
      alert('Login successful!');
    } catch (error) {
      alert('Error: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleLogin}>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
      <button type="submit">Login</button>
    </form>
  );
}
import { useState } from 'react';
import Parse from 'parse';

export default function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      await Parse.User.logIn(email, password);
      alert('Login successful!');
    } catch (error) {
      alert('Error: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleLogin}>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
      <button type="submit">Login</button>
    </form>
  );
}
﻿
4.3. 보호된 경로
보호된 경로의 경우, Next.js API 경로를 사용하고 사용자가 인증되었는지 확인할 수 있습니다:
JS
import Parse from 'parse';

export default async function handler(req, res) {
  const user = Parse.User.current();
  if (!user) {
    return res.status(401).json({ message: 'Unauthorized' });
  }
  // Proceed with the request
}
import Parse from 'parse';

export default async function handler(req, res) {
  const user = Parse.User.current();
  if (!user) {
    return res.status(401).json({ message: 'Unauthorized' });
  }
  // Proceed with the request
}
﻿
5. 방 관리
5.1. 사용 가능한 방 표시
다음과 같이 사용 가능한 방을 나열하기 위해 pages/index.js를 생성하세요:
JS
import { useEffect, useState } from 'react';
import Parse from 'parse';

export default function Home() {
  const [rooms, setRooms] = useState([]);

  useEffect(() => {
    const fetchRooms = async () => {
      const Room = Parse.Object.extend('Room');
      const query = new Parse.Query(Room);
      const results = await query.find();
      setRooms(results);
    };
    fetchRooms();
  }, []);

  return (
    <div>
      <h1>Available Rooms</h1>
      {rooms.map(room => (
        <div key={room.id}>
          <h2>{room.get('name')}</h2>
          <img src={room.get('image').url()} alt={room.get('name')} />
          <p>Capacity: {room.get('capacity')}</p>
          <p>Price: ${room.get('price')} per hour</p>
        </div>
      ))}
    </div>
  );
}
import { useEffect, useState } from 'react';
import Parse from 'parse';

export default function Home() {
  const [rooms, setRooms] = useState([]);

  useEffect(() => {
    const fetchRooms = async () => {
      const Room = Parse.Object.extend('Room');
      const query = new Parse.Query(Room);
      const results = await query.find();
      setRooms(results);
    };
    fetchRooms();
  }, []);

  return (
    <div>
      <h1>Available Rooms</h1>
      {rooms.map(room => (
        <div key={room.id}>
          <h2>{room.get('name')}</h2>
          <img src={room.get('image').url()} alt={room.get('name')} />
          <p>Capacity: {room.get('capacity')}</p>
          <p>Price: ${room.get('price')} per hour</p>
        </div>
      ))}
    </div>
  );
}
﻿
5.2. 방 추가하기
새 방을 추가하기 위해 pages/add-room.js를 생성합니다 (권한이 있는 사용자용):
JS
import { useState } from 'react';
import Parse from 'parse';

export default function AddRoom() {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const [capacity, setCapacity] = useState(0);
  const [price, setPrice] = useState(0);

  const handleAddRoom = async (e) => {
    e.preventDefault();
    const Room = Parse.Object.extend('Room');
    const room = new Room();
    room.set('name', name);
    room.set('description', description);
    room.set('capacity', capacity);
    room.set('price', price);

    try {
      await room.save();
      alert('Room added successfully!');
    } catch (error) {
      alert('Error: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleAddRoom}>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Room Name" />
      <textarea value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Description"></textarea>
      <input type="number" value={capacity} onChange={(e) => setCapacity(parseInt(e.target.value))} placeholder="Capacity" />
      <input type="number" value={price} onChange={(e) => setPrice(parseInt(e.target.value))} placeholder="Price" />
      <button type="submit">Add Room</button>
    </form>
  );
}
import { useState } from 'react';
import Parse from 'parse';

export default function AddRoom() {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const [capacity, setCapacity] = useState(0);
  const [price, setPrice] = useState(0);

  const handleAddRoom = async (e) => {
    e.preventDefault();
    const Room = Parse.Object.extend('Room');
    const room = new Room();
    room.set('name', name);
    room.set('description', description);
    room.set('capacity', capacity);
    room.set('price', price);

    try {
      await room.save();
      alert('Room added successfully!');
    } catch (error) {
      alert('Error: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleAddRoom}>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Room Name" />
      <textarea value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Description"></textarea>
      <input type="number" value={capacity} onChange={(e) => setCapacity(parseInt(e.target.value))} placeholder="Capacity" />
      <input type="number" value={price} onChange={(e) => setPrice(parseInt(e.target.value))} placeholder="Price" />
      <button type="submit">Add Room</button>
    </form>
  );
}
﻿
5.3. 방 세부정보
방에 대한 자세한 정보를 보려면 pages/rooms/[id].js를 생성합니다:
JS
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import Parse from 'parse';

export default function RoomDetails() {
  const router = useRouter();
  const { id } = router.query;
  const

 [room, setRoom] = useState(null);

  useEffect(() => {
    if (!id) return;
    const fetchRoom = async () => {
      const Room = Parse.Object.extend('Room');
      const query = new Parse.Query(Room);
      query.equalTo('objectId', id);
      const result = await query.first();
      setRoom(result);
    };
    fetchRoom();
  }, [id]);

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

  return (
    <div>
      <h1>{room.get('name')}</h1>
      <img src={room.get('image').url()} alt={room.get('name')} />
      <p>{room.get('description')}</p>
      <p>Capacity: {room.get('capacity')}</p>
      <p>Price: ${room.get('price')} per hour</p>
    </div>
  );
}
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import Parse from 'parse';

export default function RoomDetails() {
  const router = useRouter();
  const { id } = router.query;
  const

 [room, setRoom] = useState(null);

  useEffect(() => {
    if (!id) return;
    const fetchRoom = async () => {
      const Room = Parse.Object.extend('Room');
      const query = new Parse.Query(Room);
      query.equalTo('objectId', id);
      const result = await query.first();
      setRoom(result);
    };
    fetchRoom();
  }, [id]);

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

  return (
    <div>
      <h1>{room.get('name')}</h1>
      <img src={room.get('image').url()} alt={room.get('name')} />
      <p>{room.get('description')}</p>
      <p>Capacity: {room.get('capacity')}</p>
      <p>Price: ${room.get('price')} per hour</p>
    </div>
  );
}
﻿
6. 예약 시스템
6.1. 방 예약하기
예약 양식을 추가하여 pages/rooms/[id].js에 예약 기능을 추가하세요:
JS
const [checkIn, setCheckIn] = useState('');
const [checkOut, setCheckOut] = useState('');

const handleBooking = async () => {
  const Booking = Parse.Object.extend('Booking');
  const booking = new Booking();
  booking.set('room', room);
  booking.set('user', Parse.User.current());
  booking.set('checkIn', new Date(checkIn));
  booking.set('checkOut', new Date(checkOut));

  // Check for double booking (example logic)
  const query = new Parse.Query(Booking);
  query.equalTo('room', room);
  query.greaterThanOrEqualTo('checkIn', new Date(checkIn));
  query.lessThanOrEqualTo('checkOut', new Date(checkOut));
  const overlap = await query.first();

  if (!overlap) {
    try {
      await booking.save();
      alert('Booking successful!');
    } catch (error) {
      alert('Error: ' + error.message);
    }
  } else {
    alert('Room is already booked for the selected time range.');
  }
};
const [checkIn, setCheckIn] = useState('');
const [checkOut, setCheckOut] = useState('');

const handleBooking = async () => {
  const Booking = Parse.Object.extend('Booking');
  const booking = new Booking();
  booking.set('room', room);
  booking.set('user', Parse.User.current());
  booking.set('checkIn', new Date(checkIn));
  booking.set('checkOut', new Date(checkOut));

  // Check for double booking (example logic)
  const query = new Parse.Query(Booking);
  query.equalTo('room', room);
  query.greaterThanOrEqualTo('checkIn', new Date(checkIn));
  query.lessThanOrEqualTo('checkOut', new Date(checkOut));
  const overlap = await query.first();

  if (!overlap) {
    try {
      await booking.save();
      alert('Booking successful!');
    } catch (error) {
      alert('Error: ' + error.message);
    }
  } else {
    alert('Room is already booked for the selected time range.');
  }
};
﻿
6.2. 예약 보기 및 취소하기
예약을 보기 위해 pages/my-bookings.js를 생성하세요:
JS
import { useEffect, useState } from 'react';
import Parse from 'parse';

export default function MyBookings() {
  const [bookings, setBookings] = useState([]);

  useEffect(() => {
    const fetchBookings = async () => {
      const Booking = Parse.Object.extend('Booking');
      const query = new Parse.Query(Booking);
      query.equalTo('user', Parse.User.current());
      const results = await query.find();
      setBookings(results);
    };
    fetchBookings();
  }, []);

  const handleCancel = async (id) => {
    const booking = bookings.find(b => b.id === id);
    if (booking) {
      await booking.destroy();
      setBookings(bookings.filter(b => b.id !== id));
    }
  };

  return (
    <div>
      <h1>My Bookings</h1>
      {bookings.map(booking => (
        <div key={booking.id}>
          <p>Room: {booking.get('room').get('name')}</p>
          <p>Check-In: {new Date(booking.get('checkIn')).toLocaleString()}</p>
          <p>Check-Out: {new Date(booking.get('checkOut')).toLocaleString()}</p>
          <button onClick={() => handleCancel(booking.id)}>Cancel Booking</button>
        </div>
      ))}
    </div>
  );
}
import { useEffect, useState } from 'react';
import Parse from 'parse';

export default function MyBookings() {
  const [bookings, setBookings] = useState([]);

  useEffect(() => {
    const fetchBookings = async () => {
      const Booking = Parse.Object.extend('Booking');
      const query = new Parse.Query(Booking);
      query.equalTo('user', Parse.User.current());
      const results = await query.find();
      setBookings(results);
    };
    fetchBookings();
  }, []);

  const handleCancel = async (id) => {
    const booking = bookings.find(b => b.id === id);
    if (booking) {
      await booking.destroy();
      setBookings(bookings.filter(b => b.id !== id));
    }
  };

  return (
    <div>
      <h1>My Bookings</h1>
      {bookings.map(booking => (
        <div key={booking.id}>
          <p>Room: {booking.get('room').get('name')}</p>
          <p>Check-In: {new Date(booking.get('checkIn')).toLocaleString()}</p>
          <p>Check-Out: {new Date(booking.get('checkOut')).toLocaleString()}</p>
          <button onClick={() => handleCancel(booking.id)}>Cancel Booking</button>
        </div>
      ))}
    </div>
  );
}
﻿
7. Vercel에 배포하기
Vercel CLI 설치:
Bash
npm install -g vercel
npm install -g vercel
﻿
다음.js 앱을 배포하려면:
Bash
vercel
vercel
﻿
프롬프트에 따라 앱을 Vercel에 배포하세요. 배포가 완료되면, 앱은 공개 URL에서 실시간으로 제공됩니다.
8. 결론
이 튜토리얼에서는 Bookit 앱을 Next.js를 프론트엔드로 사용하고 Back4App을 백엔드로 사용하여 구축했습니다. 사용자 인증, 방 관리 및 예약 기능을 구현했습니다. 마지막으로, 앱을 Vercel에 배포했습니다. 이제 검색, 결제 통합 또는 알림과 같은 추가 기능으로 앱을 확장할 수 있습니다.
열 이름	유형	설명
이름	문자열	방 이름
설명	문자열	방 설명
용량	번호	방이 수용할 수 있는 인원 수
편의 시설	배열	편의 시설 목록 (TV, WiFi 등)
가격	번호	시간당 가격
이미지	파일	이미지 URL
소유자	포인터	지점을 사용자 클래스
열 이름	유형	설명
방	포인터	다음으로 가리킴: Room 클래스
사용자	포인터	다음으로 가리킴: User 클래스
체크인	날짜	예약의 시작 날짜/시간
체크아웃	날짜	예약의 종료 날짜/시간
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
Next.js, Vercel 및 Back4app을 사용한 청구서 앱 튜토리얼
Flutter와 Back4app을 사용하여 멀티플랫폼 게임 구축하기