ReactJS 및 Back4App을 사용한 Slack 클론 – NoCode

이 문서에서는 Back4App을 백엔드로 사용하여 Vercel에 Slack 클론 앱을 배포하는 방법에 대해 알아봅니다.

Slack Clone 앱은 인증, 실시간 및 관계형 쿼리와 같은 몇 가지 주요 Parse 기능을 사용하여 React (프론트엔드) 및 Back4App(백엔드)으로 빌드됩니다. 이 애플리케이션은 아래 단계를 사용하여 코드 없이 Vercel에 쉽게 배포할 수 있습니다.

언제든지 이 버튼을 사용하여 Vercel에 Slack 클론을 배포할 수 있습니다:

Slack 개요

Slack은 비즈니스 커뮤니케이션에 필요한 올인원 플랫폼으로 사용할 수 있는 효과적이고 효율적인 비즈니스 커뮤니케이션 애플리케이션입니다. 가장 중요한 것은 다음과 같은 놀라운 기능을 제공한다는 점입니다:

• 실시간 메시징

• 파일 보관

• 검색

• 파일 공유 등

이 플랫폼은 현대의 팀을 위해 특별히 설계되었습니다. 따라서 팀은 단일 공간에서 전체 온라인 커뮤니케이션을 관리할 수 있습니다. 뿐만 아니라, 이곳의 대화는 어떤 기기를 사용하든 즉시 검색하고 액세스할 수 있습니다.

다행히도 Slack은 1,500개 이상의 외부 서비스 및 애플리케이션과 협력하여 최상의 방식으로 유연하고 확장 가능한 플랫폼을 제공하고 있습니다.

Slack 커뮤니티

Statista에 따르면 2019년 10월 현재 Slack은 매일 1,200만 명 이상의 활성 사용자에게 서비스를 제공하고 있습니다. Slack은 미국의 협업 허브로, 2013년 출시 이후 사용자 기반을 크게 확장하고 있습니다.

놀랍게도 Slack 사용자의 대부분은 일본, 프랑스, 독일, 영국 및 호주와 같은 상위 시장을 포함하여 미국 이외의 지역에서 왔습니다.

이뿐만 아니라 Slack은 2019년부터 유료 사용자도 크게 증가하고 있습니다. 이는 주로 팀 커뮤니케이션 측면에서 Slack이 사용자에게 제공하는 편의성 때문입니다. 또한 Slack이 팀 문화를 개선하려는 태도도 한몫했습니다.

전반적으로 Slack의 놀라운 기능과 혜택은 Slack의 전체 유료 사용자 기반을 최상의 방식으로 개선하는 데 도움이 되고 있습니다.

Slack 기능

Slack은 주제별로 구성된 영구 채팅방, 다이렉트 메시징, 중요한 토론을 위한 비공개 그룹 등 다양한 IRC 스타일의 기능을 제공해 왔습니다. 가장 중요한 점은 대화나 파일 등 Slack에서 제공되는 모든 콘텐츠를 검색할 수 있다는 점입니다.

더 나아가, 사용자들은 채팅에 이모티콘 버튼을 포함할 수 있습니다. 다른 사용자들은 이러한 이모티콘을 클릭하여 반응을 보일 수 있습니다.

이뿐만 아니라 무료 버전의 Slack도 모든 필수 기능을 제공합니다. 심지어 최근 10,000개의 메시지에서 채팅과 파일을 검색할 수 있습니다. 뿐만 아니라 Slack은 사용자 경험을 최상의 방식으로 개선하기 위해 플랫폼을 새롭게 디자인했습니다.

이제 여러분도 Slack의 가장 놀라운 기능 중 일부를 즐길 수 있게 되었습니다. 아래에서 Slack의 흥미로우면서도 핵심적인 기능에 대해 자세히 알아보고 이에 대해 더 잘 이해해 보시기 바랍니다.

자, 시작하겠습니다:

팀

Slack 팀은 소유자 또는 팀 관리자가 보낸 특정 초대를 통해 이 플랫폼을 사용하여 워크스페이스에 참여할 수 있도록 합니다. 이 플랫폼은 비즈니스 커뮤니케이션 도구로 개발되었지만 시간이 지남에 따라 커뮤니티 플랫폼으로 채택되었습니다.

통합

Slack은 또한 Tello, Google Drive, Dropbox, GitHub, Crashlytics 등 수많은 타사 앱 및 서비스와 통합하고 있습니다. Slack은 사용자가 Slack 소프트웨어 디렉터리에서 이러한 모든 애플리케이션을 쉽게 설치할 수 있도록 지원합니다.

메시징

공개 채널을 사용하면 그룹 SMS나 이메일을 사용하지 않고도 팀이 상호 작용할 수 있습니다. 공개 채널은 직장의 모든 사람이 사용할 수 있도록 개방되어 있기 때문입니다.

하지만 비공개 대화의 경우, 사용자는 비공개 채널을 만들 수 있습니다. 이러한 채널은 대규모 팀을 쉽게 관리하는 데에도 사용할 수 있습니다.

필요할 때마다 그룹이 아닌 특정 사용자에게 쪽지를 보낼 수도 있습니다.

API

Slack은 또한 사용자가 앱을 만들고 사람의 입력에 따라 자동으로 메시지를 보내거나 특정 조건에 대한 알림 알림을 보내거나 내부 지원 티켓을 자동으로 생성하는 등 프로세스를 자동화할 수 있는 API를 제공합니다.

Slack 클론 배포

Back4App 템플릿 복제

데이터베이스 허브로 이동하여 Slack 템플릿 백엔드를 복제합니다.

키 받기

Back4App 대시보드에서 “앱 설정 -> 보안 및 키”로 이동하여 애플리케이션 ID와 자바스크립트 키 값을 복사합니다.

실시간 활성화

“앱 설정 -> 서버 설정 -> 서버 URL 및 라이브 쿼리”로 이동합니다. 무료 Back4App 하위 도메인을 활성화한 다음 채널 및 메시지 클래스에서 활성화하는 것을 잊지 말고 라이브 쿼리를 활성화합니다. 전체 Back4App 하위 도메인 URL을 복사합니다.

Vercel에 배포

아래 배포 버튼을 클릭합니다:

Vercel에서는 이전 단계에서 복사한 3가지 변수를 알려줘야 합니다: 애플리케이션 ID, 자바스크립트 키, 라이브 쿼리 URL(하위 도메인 URL)입니다.

배포를 클릭합니다. 이제 Vercel에서 Slack 클론 앱이 실행 중입니다!

코드

템플릿을 더 잘 이해하려면 아래 링크에 액세스하세요:

기술 가이드 – Slack 클론 템플릿의 작동 방식

ReactJS 코드 – 자바스크립트

타입스크립트 코드 – 타입스크립트

결론

이 문서에서는 Slack, 핵심 기능 및 유료 사용자에 대한 개요를 제공했습니다. 또한 Back4app 및 Vercel과 같은 로우코드 도구를 사용하여 Slack 클론 앱을 배포하는 방법에 대해서도 설명했습니다.

자주 묻는 질문