내 제출물 개요

Collab은 한 사용자가 다른 사용자와 협력하여 동시에 코드를 작성할 수 있는 실시간 코드 동기화 도구입니다. 이 외에도 사용자는 웹사이트에서 프로필을 생성하여 작성된 코드 스니펫을 웹사이트에 저장할 수 있습니다. Why don't you try it yourself 👉 ? open website

인터뷰에 출연하면서(특히 코딩 라운드를 하면서) 구글 독스로 코드를 작성하는 분들을 많이 봤습니다. 그래서 저는 이 문제를 해결하기 위한 프로젝트를 구축하려고 생각했습니다. 동시에 개발자 커뮤니티는 해커톤을 발표했고 저는 지금이 궁극적으로 collab을 탄생시킨 프로젝트를 구축할 적기라고 생각했습니다.

이 외에도 해커톤이 이 애플리케이션을 구축하는 이유 중 하나입니다!

제출 카테고리:

프로젝트 제출 카테고리는 MEAN/MERN Mavericks입니다.

내 프로젝트를 설명하는 비디오

사용 언어

애플리케이션 구축을 위해 Node.js 런타임 환경을 사용했습니다.
이 외에도 Collab은 다음 기술 및 패키지로 구축됩니다.

React JS(프런트엔드)

Redis OM(Redis JSON, Redis 검색)

Socket.io (실시간 통신용)

궁극적으로 프로젝트의 내 기술 스택은 RERN (Redis, Express, React, Node) 입니다.

코드 링크

라제쉬카드카200 / 콜라보

실시간 코드 동기화 도구인 Collab은 전 세계의 다른 개발자와 공동 작업을 원하는 모든 개발자 또는 코드 애호가를 위한 플랫폼입니다.

Colab - 실시간 코드 협업 도구를 소개합니다.

Collab은 사용자가 다른 개발자와 공동 작업하여 동시에 코드를 작성할 수 있는 실시간 코드 동기화 도구입니다. 이 외에도 사용자는 웹사이트에서 프로필을 생성하여 작성된 코드 스니펫을 웹사이트에 저장할 수 있습니다.

개요 비디오

작동 원리

애플리케이션의 워크플로우는 다음 아키텍처 다이어그램으로 설명됩니다.

처음에는 클라이언트를 통해 소켓 연결이 설정됩니다. 사용자가 소켓에 연결되면 사용자는 Editor에서 코드를 작성합니다. 그리고 편집기에서 작성된 코드는 redis에 Redis JSON로 저장됩니다.

데이터 저장 방법:

Collab의 데이터는 RediJSON을 기반으로 JSON 형식으로 저장됩니다. 데이터의 전체 매핑은 Redis-Om Node js 패키지로 구성됩니다.
Redis Cloud에서 다음을 통해 처음 연결을 설정해야 합니다.

import { Client } from "redis-om";
const url = process.

…


View on GitHub

추가 리소스/정보

홈페이지 : Collab

collab의 아키텍처 다이어그램:

응용 프로그램의 일부 스크린샷:

홈페이지

방 페이지에 참여하기

편집기 페이지

프로필 페이지

포함된 기능:

협업을 위해 다른 사용자를 초대할 수 있습니다.

첫 번째 로드 시 자동 동기화 코드.

사용자(참가, 연결 해제, 퇴장)가 방에 있는 경우 방에 연결된 모든 클라이언트에 알림을 브로드캐스트합니다.

무제한 사용자가 방에 참여할 수 있도록 지원합니다.

Redis를 다중 모델 데이터베이스로 사용하기 위한 클라이언트 라이브러리인 Redis OM을 확인하십시오.

RedisInsight을 사용하여 Redis에서 데이터를 시각화합니다.

free Redis database에 가입하세요 .