Postgres 및 React Hooks로 기본 Slack 클론 만들기

세상이 재택근무를 하는 동안 . 번성하는 시장을 위한 도구를 만들고 싶다면 Slack과 같은 협업 도구는 어떻습니까? 방법은 다음과 같습니다!

내용물

Introduction

Tech stack

Get the code

Backend

Frontend

---

소개

이것은 빠르고 더러운 "실행 포스트"입니다. 단계별 가이드를 원하시면 series of posts on our blog 을(를) 게시할 것입니다.

이 안내서에는 한 가지 작은 전제 조건이 있습니다. 백엔드를 실행하려면 Docker이 필요합니다. Docker 설치 지침으로 이 게시물을 복잡하게 만들고 싶지 않습니다. 설치했다면 이 가이드를 따라하는 것이 매우 간단할 것입니다! 하나의 docker 명령( docker-compose up )만 있습니다.

---

코드 받기

예제 코드는 Supabase examples folder 에 있습니다. 필요한 폴더를 복제하는 데 사용할 수 있도록 전체 저장소가 필요하지 않습니다.

# Copy the repo to your machine
git clone --no-checkout https://github.com/supabase/supabase
cd supabase

# Checkout the Slack example!
git sparse-checkout init --cone
git sparse-checkout set examples/slack-clone-basic
cd examples/slack-clone-basic

프로젝트는 여러 파일 및 폴더에 걸쳐 설정됩니다.

├── components              # Frontend: React/Next.js
├── lib                     # Frontend: React/Next.js
├── pages                   # Frontend: React/Next.js
├── next.config.js          # Frontend: React/Next.js
├── db                      # Backend: Postgres
├── docker-compose.yml      # Backend: Postgres + Supabase
└── styles                  # Tailwind

---

기술 스택

Slack 클론은 4가지 핵심 기술을 사용합니다.

Postgres - 세계의 best database

Supabase - Postgres를 실시간 데이터베이스로 전환합니다! 그리고 Postgres용 즉각적인 RESTful API를 제공하므로 CRUD 기능을 수동으로 코딩할 필요가 없습니다

.

Next.js - 서버 렌더링 앱을 구축하기 위한 React 프레임워크

Tailwind - 프런트엔드의 스타일을 빠르게 지정하기 위한 유틸리티 CSS 프레임워크

---

백엔드

이것은 가장 간단한 부분입니다. 터미널을 열고 다음 명령을 실행합니다.

docker-compose up

그게 다야! 이 명령은 docker-compose 파일을 보고 Postgres 및 Supabase를 풀다운한 다음 실행합니다.



blog series에서 백엔드가 작동하는 방식에 대해 이야기하지만 요약하면 다음과 같습니다.

Docker 시작 시 db 폴더를 마운트하여 스키마 및 데이터로 Postgres를 시작합니다

.

Supabase는 Postgres를 검사하여 REST 및 실시간 API를 자동으로 제공합니다. 이렇게 하면 엄청난 시간이 절약됩니다(그리고 훨씬 적은 코드를 작성하게 됩니다).

---

프런트엔드

다른 React 앱과 마찬가지로 프런트엔드를 시작합니다.

# 1. Install all dependencies:
npm install

#2. Run
npm run dev

그게 다야! https://localhost:3000을(를) 방문하면 로그인 화면이 표시됩니다.



참고: 이 간단한 예제의 범위를 넘어서는 전체 로그인 및 인증 시스템을 생성하지만 관심이 있는 경우 반드시 구독하십시오. 이는 확실히 앞으로 다룰 내용입니다.

사용자 이름을 입력하고 로그인을 클릭하면 매우 간단한 Slack과 유사한 인터페이스가 표시됩니다.



탭 두 개를 열면 한 탭에서 메시지를 보낼 때마다 다른 탭에 자동으로 나타나는 것을 볼 수 있습니다!



그리고 그게 다야! 다음 프로젝트를 시작하기 위한 기본 Slack 클론입니다. 행복한 해킹!

도움이 필요하다?

막히면 아래에 의견을 남겨 주시면 도와 드리겠습니다.

실시간 앱 구축을 위한 더 많은 예제를 출시할 예정입니다. 다음 기사 "기본 WhatsApp 클론 구축"에 대한 알림을 받으려면 저희를 팔로우하세요.