> 웹 프론트엔드 > JS 튜토리얼 > Express 및 Supabase를 사용하여 나만의 Event Scheduling API 만들기

Express 및 Supabase를 사용하여 나만의 Event Scheduling API 만들기

Patricia Arquette
풀어 주다: 2024-11-05 12:03:02
원래의
565명이 탐색했습니다.

Create your own Event Scheduling API using Express and Supabase

클럽 행사를 관리할 플랫폼이 필요하신 적이 있나요? 아니면 사무실에서 회의를 계획하시나요? 하지만 저렴한 플랫폼을 찾다가 제시된 수많은 옵션에서 길을 잃으셨나요? 아니면 인생을 더 잘 정리하고 어떤 행사에 참석해야 하는지 일정을 계획하고 싶으신가요?

이 게시물을 끝까지 따라오시면 이벤트 생성 및 등록과 같은 모든 기본 기능을 사용할 수 있는 기본 이벤트 예약 API가 제공됩니다.

이 프로젝트의 GitHub 저장소는 https://github.com/xerctia/gatherly에 있습니다

익스프레스란 무엇인가요?

Express는 GET, POST 등과 같은 다양한 종류의 요청을 처리하기 위해 서버를 설정하고 구축하기 위한 Javascript 프레임워크입니다. Express는 가장 널리 사용되는 백엔드 프레임워크 중 하나이며 초보자가 시작하기 가장 쉬운 프레임워크 중 하나이기도 합니다. . 이 블로그에서는 서버를 만들고 필요한 엔드포인트를 설정하기 위해 Express를 사용할 것입니다.

PostgreSQL이란 무엇입니까?

PostgreSQL은 신뢰성, 확장성 및 복잡한 쿼리 지원으로 잘 알려진 오픈 소스 관계형 데이터베이스 관리 시스템(RDBMS)입니다. JSON 데이터 지원, 전체 텍스트 검색, 확장성과 같은 고급 기능을 제공하므로 소규모 프로젝트와 대규모 애플리케이션 모두에 다용도로 사용할 수 있습니다. PostgreSQL은 개발자들 사이에서 인기가 높으며 강력한 성능으로 높이 평가됩니다.

웹에는 PostgreSQL 데이터베이스 사용을 허용하는 PostgreSQL 공급자가 많이 있으며, 일부는 무료이고 일부는 유료 요금제입니다. 이 프로젝트에서는 Supabase와 해당 데이터베이스를 PostgreSQL로 사용합니다.

프로젝트 설정

  • 이 프로젝트에 대한 폴더를 만듭니다. 제가 정한 이름인 Gatherly로 이름을 정하겠습니다.
  • Node 및 npm 설정: npm init -y
  • Express 및 기타 필수 패키지 설치: npm Express dotenv cors pg 설치 참고: pg는 Node.js에서 PostgreSQL을 사용하는 데 사용되는 패키지입니다.
  • 이제 다음 상용구 코드를 사용하여 index.js 파일을 만듭니다.
const exp = require('express');
const cors = require('cors');

const app = exp();
const PORT = 3000 || process.env.PORT;

app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(cors());

app.get("/", (req, res) => {
    res.send("Hello, Gatherly!");
})

app.listen(PORT, () => {
    console.log(`server started on ${PORT}`);
})
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사

축하합니다! Express에서 기본 서버를 성공적으로 설정했습니다!

프로젝트에 Supabase 설정

수파베이스 설정

  • https://supabase.com으로 이동하여 로그인하거나 계정을 만든 다음 적합하다고 생각되는 이름으로 새 프로젝트를 만드세요. (분명히) Gatherly라고 이름을 붙였습니다.
  • 이제 프로젝트 대시보드로 이동한 다음 프로젝트 설정 -> 데이터베이스.
  • 페이지 시작 부분에 "연결 문자열" 섹션이 표시됩니다. 여기에서 Node.js 탭을 클릭하고 연결 문자열을 복사하여 어딘가에 저장하세요.
  • 이제 SQL 편집기로 이동하여 다음 쿼리를 실행하여 '이벤트' 테이블을 만듭니다.
const exp = require('express');
const cors = require('cors');

const app = exp();
const PORT = 3000 || process.env.PORT;

app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(cors());

app.get("/", (req, res) => {
    res.send("Hello, Gatherly!");
})

app.listen(PORT, () => {
    console.log(`server started on ${PORT}`);
})
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사

Express에 데이터베이스 연결

  • 프로젝트 폴더로 이동하여 .env라는 파일을 만듭니다. DATABASE_URL=이라고 쓴 다음 앞서 복사한 연결 문자열(Supabase 설정: 3단계)을 붙여넣고 큰따옴표로 묶습니다. 예를 들어:
CREATE TABLE events (
  id SERIAL PRIMARY KEY,
  title VARCHAR(255) NOT NULL,
  description TEXT,
  start_time TIMESTAMP NOT NULL,
  end_time TIMESTAMP,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
로그인 후 복사
로그인 후 복사
로그인 후 복사
  • PostgreSQL 데이터베이스를 설정하고 연결하기 위해 또 다른 JS 파일 db.js를 만듭니다.
DATABASE_URL="postgresql://username:password@host:port/dbname"
로그인 후 복사
로그인 후 복사
로그인 후 복사
  • 이제 마지막으로 연결된 데이터베이스를 기본 index.js 파일로 가져와야 합니다.
const { Pool } = require('pg');
require('dotenv').config();

const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
  ssl: {
    rejectUnauthorized: false
  }
});

module.exports = pool;
로그인 후 복사
로그인 후 복사
로그인 후 복사

축하합니다. Supabase 데이터베이스를 index.js 파일에 성공적으로 연결했습니다. 이제 실제 API 엔드포인트 구축을 시작할 준비가 되었습니다.

API 엔드포인트

GET /events : 모든 이벤트 가져오기

  • 다음과 같이 새로운 GET 메서드를 만듭니다.
const exp = require('express');
const cors = require('cors');

const app = exp();
const PORT = 3000 || process.env.PORT;

app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(cors());

app.get("/", (req, res) => {
    res.send("Hello, Gatherly!");
})

app.listen(PORT, () => {
    console.log(`server started on ${PORT}`);
})
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
  • 이 함수 내에서 데이터를 가져올 실제 코드를 작성합니다. 우선, 더 나은 오류 처리를 위해 try-catch 블록을 구현해 보겠습니다.
CREATE TABLE events (
  id SERIAL PRIMARY KEY,
  title VARCHAR(255) NOT NULL,
  description TEXT,
  start_time TIMESTAMP NOT NULL,
  end_time TIMESTAMP,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
로그인 후 복사
로그인 후 복사
로그인 후 복사
  • 이 형식은 우리가 구축할 모든 엔드포인트에 대해 유지됩니다. try 블록 내에서 필요한 기능에 대한 코드를 작성하겠습니다.
  • 데이터베이스의 모든 이벤트를 가져오려면 데이터베이스를 쿼리하고 이를 변수에 저장해야 합니다. 우리는 비동기식 접근 방식을 따르고 있으므로 데이터를 올바르게 저장하려면 대기를 사용해야 합니다.
DATABASE_URL="postgresql://username:password@host:port/dbname"
로그인 후 복사
로그인 후 복사
로그인 후 복사
  • 이 쿼리의 출력, 즉 결과에는 '행'이라는 개체 배열이 있습니다. 여기서는 모든 이벤트를 반환해야 하므로 전체 '행'만 반환하겠습니다.
const { Pool } = require('pg');
require('dotenv').config();

const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
  ssl: {
    rejectUnauthorized: false
  }
});

module.exports = pool;
로그인 후 복사
로그인 후 복사
로그인 후 복사
  • 이제 첫 번째 엔드포인트가 준비되었습니다! 테스트하려면 Supabase 프로젝트 대시보드의 테이블 편집기로 이동하여 테스트 목적으로 2~3개의 이벤트를 추가하면 됩니다. 이 끝점의 전체 코드는 다음과 같습니다.
const pool = require('./db');
로그인 후 복사
로그인 후 복사

POST /events : 새 이벤트 생성

  • 먼저 엔드포인트의 기본 상용구를 설정해 보겠습니다.
app.get('/events', async (req, res) => {
  // code to be written
})
로그인 후 복사
로그인 후 복사
  • 이 경우 사용자로부터 필요한 데이터가 있으므로 try-catch 블록 외부에서 해당 데이터를 정의할 수 있습니다.
try {
  // code to be written
} catch (e) {
  console.error(e);
  res.status(500).json({error: "Database error."}); // 500 = Internal Server Error
}
로그인 후 복사
로그인 후 복사
  • 이제 try 블록 내에서 테이블에 행을 삽입하는 쿼리를 작성해야 합니다. query() 메소드를 사용하면 문자열 쿼리의 변수 값을 $1, $2 등으로 표시한 다음 해당 변수를 배열에 순서대로 제공할 수 있습니다. 이것이 사용자의 변수 입력을 쿼리에 추가하는 방법입니다.
const result = await pool.query("SELECT * FROM events");
로그인 후 복사
로그인 후 복사
  • 이전에도 마찬가지로 결과 행을 인쇄하겠습니다. 하지만 이번에는 방금 삽입한 행이 될 'rows' 배열의 첫 번째 요소만 인쇄하면 됩니다.
res.status(200).json(result.rows); // 200 = OK
로그인 후 복사
  • 만세, 새로운 이벤트를 추가하기 위해 엔드포인트를 구축했습니다! 전체 코드는 다음과 같습니다.
app.get('/events', async (req, res) => {
    try {
        // Getting all events
        const result = await pool.query("SELECT * FROM events");
        res.status(200).json(result.rows); // 200 = OK
    } catch (e) {
        console.error(e);
        res.status(500).json({error: 'Database error'}); // 500 = Internal Server Error
    }
})
로그인 후 복사

GET /event/:id : 개별 이벤트의 세부정보를 가져옵니다.

  • 당신은 모든 엔드포인트에 대한 기본 기능을 설정할 수 있을 만큼 똑똑하다고 확신하므로 매번 보여주지는 않겠습니다.
  • 여기서 우리의 목표는 'id' 값이 계속 변하는 동적 엔드포인트를 만드는 것입니다. 따라서 이를 :id로 표시했으며 다음과 같이 해당 값에 액세스할 수 있습니다.
app.post("/events", async (req, res) => {
  try {
    // code to be written
  } catch (e) {
    console.error(e);
    res.status(500).json({error: "Failed to create event."}); // 500 = Internal Server Error
  }
})
로그인 후 복사

이전 엔드포인트의 입력 값과 마찬가지로 try-catch 외부에서도 수행할 수 있습니다.

  • 이제 try 블록 내에서 'id' 필드가 제공된 ID와 동일한 행을 선택하는 쿼리를 작성해야 합니다. 결과가 없으면 이 ID를 가진 이벤트가 존재하지 않는다는 의미이므로 404 오류가 반환될 수 있습니다.
const exp = require('express');
const cors = require('cors');

const app = exp();
const PORT = 3000 || process.env.PORT;

app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(cors());

app.get("/", (req, res) => {
    res.send("Hello, Gatherly!");
})

app.listen(PORT, () => {
    console.log(`server started on ${PORT}`);
})
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
  • 그렇지 않다면 이벤트가 존재한다는 의미입니다. 하지만 'rows'는 배열이므로 하나의 요소를 포함하더라도 행[0]으로 액세스해야 합니다. 따라서 필요한 행은 행[0]에 있습니다.
CREATE TABLE events (
  id SERIAL PRIMARY KEY,
  title VARCHAR(255) NOT NULL,
  description TEXT,
  start_time TIMESTAMP NOT NULL,
  end_time TIMESTAMP,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
로그인 후 복사
로그인 후 복사
로그인 후 복사
  • 그리고 짜잔! 이제 특정 이벤트의 세부정보를 성공적으로 얻을 수 있습니다! 전체 코드는 다음과 같습니다.
DATABASE_URL="postgresql://username:password@host:port/dbname"
로그인 후 복사
로그인 후 복사
로그인 후 복사

사용자 등록

수파베이스

이 기능을 구현하려면 먼저 Supabase에서 새 테이블을 생성해야 합니다.

SQL 편집기로 이동하여 다음 쿼리를 실행하세요.

const { Pool } = require('pg');
require('dotenv').config();

const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
  ssl: {
    rejectUnauthorized: false
  }
});

module.exports = pool;
로그인 후 복사
로그인 후 복사
로그인 후 복사

POST /이벤트/:ID/등록

  • try-catch 외부에서 매개변수 값뿐만 아니라 입력 값도 사용할 수 있습니다.
const pool = require('./db');
로그인 후 복사
로그인 후 복사
  • 이제 먼저 'id'가 포함된 이벤트가 있는지 확인하겠습니다. 이를 위해 GET /event/:id 접근 방식을 따르고 행.길이가 0이 아닌지, 즉 몇 가지 결과가 있는지 확인합니다.
app.get('/events', async (req, res) => {
  // code to be written
})
로그인 후 복사
로그인 후 복사
  • 이제 이벤트가 존재하므로 방금 생성한 새 테이블(예: 'registrations')에 데이터베이스에 대한 등록을 실제로 추가하기 위한 쿼리를 작성할 수 있습니다.
try {
  // code to be written
} catch (e) {
  console.error(e);
  res.status(500).json({error: "Database error."}); // 500 = Internal Server Error
}
로그인 후 복사
로그인 후 복사
  • 그래서 이벤트에 사용자를 등록하는 기능도 구현했습니다! 전체 코드는 다음과 같습니다.
const result = await pool.query("SELECT * FROM events");
로그인 후 복사
로그인 후 복사

GET /event/:id/registrations : 특정 이벤트에 대한 모든 등록을 가져옵니다.

이건 여러분의 숙제입니다. (화내지 마세요. 시도해도 안 되더라도 GitHub 코드는 항상 사용 가능합니다.)
힌트: POST /event/:id/register에서와 동일한 방식으로 이벤트가 존재하는지 확인할 수 있습니다. 그런 다음 등록 테이블에 대한 SELECT 쿼리를 작성하여 지정된 event_id가 있는 모든 행을 가져와야 합니다.

마찬가지로 DELETE /event/:id 와 같이 특정 이벤트를 삭제하기 위한 엔드포인트를 구축할 수도 있습니다.

마무리

축하합니다! 이벤트 예약 및 사용자 등록 관리를 위한 자체 API를 성공적으로 생성했습니다. 먼 길을 오셨습니다.

end_time이 지난 이벤트가 자동으로 삭제되도록 크론 작업을 추가하는 등의 기능을 더 추가할 수 있습니다.

이 게시물이 마음에 드셨다면 좋아요를 눌러주시고 궁금한 점이 있거나 관련 채팅을 하고 싶으시면 댓글을 남겨주세요. LinkedIn에서도 저를 팔로우하세요: https://www.linkedin.com/in/amartya-chowdhury/

위 내용은 Express 및 Supabase를 사용하여 나만의 Event Scheduling API 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿