디스코드 클론 코딩

 

update 3/14

planetscale의 가격정책이 변경되어  1)db(mysql )는 railway로 이동 2) 배포는 railway에서 vercel로 옮겨서 재배포했다.  
team-chat-application-sage.vercel.app

Team Chat Application

 

 

---

 

 

드디어 아기다리고기자리던 새로운 주경야독( Discord clone coding) 결과물 배포를 할 수 있게 되었다. 여러가지 동시에 시작되던 일들이 많아서.. 우여곡절 끝에 오늘에야 배포를 할 수 있었다. 쫒기듯? 해서 수정할 부분이 많지만.. 여튼 새로운 툴과 새로운 이슈들을 경험할 수 있던 의미있었던 시간이었다.

https://teamchatapplication-production.up.railway.app/

 

 

더불어 배포 과정에서 눈길을 끌던 아티클 하나도 함께 포스팅으로 남겨본다.

https://ritza.co/articles/gen-articles/render-vs-heroku-vs-vercel-vs-railway-vs-fly-io-vs-aws/

render vs. heroku vs. vercel vs. railway vs. fly.io vs. aws - Ritza Articles

 

 

 

---

어제를 기준으로 배포까지를 기준으로 절반 정도 진행된 것 같다.  퇴근 후 30-60분 정도 나눠서 주경야딩하다보니 생각보다 오래 걸리는 거 같다. 예전같으면 넥플릭스 정주행하듯 날 잡아서 빡- 했을텐데.. 요즘엔 왠지 무용하다는 느낌에 그렇게까진 안하고 있는거 같다.

주경야딩 예제는 되로록 최신 스팩을 기준으로 구성된 예제를 찾고 있다. 그러면서 일부 기능들은 실무에도 차용할 만한 부분들을 포함하면서,  되도록 단순히 코드가 아닌 상시 배포 가능한 결과물을 만들 수 있는 것들로 선정하고 있다. 

이번 예제는 디스코드이다. 최근 개인과 기업간 커뮤니케이션 또는 커뮤니티 채널이 디스코드로도 많이 이동 확장하고 있는 것 같다. 새로운? 점은 단순 이동이라기 보다 병행같지 않은 병행이다. 마치 거실 쇼파에서 TV를 틀어놓고 패드로 넷플릭스를 보면서 스마트폰으로 쇼핑을 하는 것 처럼 말이다. 왠지 키치(Kitsch)하면서 키치하지 않은 듯한 이런 류의 채널에 대해 구조적으로 이해할 수 있는 계기가 되길 바라는 마음과 T3-stack으로 구성된 배포 데모를 갖고자 하는 개인적인 디지털 제품 소유를 위해 이번 실습을 진행하게 되었다. 

 

vercel로 기본적인 T3-stack을 구성하고, Clerk으로 인증절차 만들고 대부분의 GUI는 shadcn를 기반으로 구성하였다. DB는 planetscale를 통해 MySQL로 구성했다.

로그인을 하고 개인 프로필을 관리(crud)하고 개인 채널을 관리(crud)하고 채널 접속 링크를 생성해서 다른 이들을 초대하고 채널을 검색하는 기능까지 구현되었다.(1008, 51% 기준) 상세한 과정은 맨아래 노션 링크, 깃헙에 기록 중이다. 

 

---

Environment Setup

긴 연휴간 디스코드 클론 코딩을 진행 중이다.. 명절 지내고 드라마 정주행하다보니.. 아직 1/3정도만 진행되어 일단 활용하고 있는 라이브러리 및 api들을 먼저 정리해본다. 

 

shadcn
Radix UI 와 Tailwind CSS로 구성되었다. 재사용 가능한 컴포넌트(구성 요소)를 제공. 단 라이브러리가 아니기 때문에 의존(종속)성이 낮다. 덕분에 필요한 컴포넌트만 선택적으로 가져올 수 있고 쉽고 자유롭게 커스텀 할 수 있다.

shadcn/ui

 

 

nextjs  
풀스택 웹 애플리케이션을 구축하기 위한 React 프레임워크. 개발자 경험 향상(번들링, 컴파일 등과 같이 React에 필요한 도구를 추상화하고 자동으로 구성해줌으로써 개발자는 애플리케이션 구축에 집중할 수 있도록 함)특징

Next.js by Vercel - The React Framework

https://nextjs.org/docs/app/building-your-application/routing	레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 서버 구성 요소 위에 구축된 파일 시스템 기반 라우터입니다.
https://nextjs.org/docs/app/building-your-application/rendering	클라이언트 및 서버 구성 요소를 사용한 클라이언트 측 및 서버 측 렌더링. Next.js를 사용하여 서버에서 정적 및 동적 렌더링으로 더욱 최적화되었습니다. Edge 및 Node.js 런타임에서 스트리밍합니다.
https://nextjs.org/docs/app/building-your-application/data-fetching	fetch서버 구성 요소의 async/await를 사용하여 데이터 가져오기를 단순화하고 요청 메모, 데이터 캐싱 및 재검증을 위한 확장된 API를 제공합니다.
https://nextjs.org/docs/app/building-your-application/styling	CSS 모듈, Tailwind CSS, CSS-in-JS 등 선호하는 스타일 지정 방법 지원
https://nextjs.org/docs/app/building-your-application/optimizing	애플리케이션의 핵심 웹 바이탈 및 사용자 경험을 개선하기 위한 이미지, 글꼴 및 스크립트 최적화.
https://nextjs.org/docs/app/building-your-application/configuring/typescript	더 나은 유형 검사, 더 효율적인 컴파일, 사용자 정의 TypeScript 플러그인 및 유형 검사기를 통해 TypeScript에 대한 지원이 향상되었습니다.

 

clerk  
사용자 인증(로그인 등) 및 관리 기능을 구현해주는 api

Clerk | Authentication and User Management

 

prisma  
TypeScript ORM(Object Relational Mapping 객체-관계-매핑). 직관적인 데이터 모델, 자동화된 마이그레이션, 유형 안전성 및 자동 완성

Prisma | Next-generation ORM for Node.js & TypeScript

 

planetscale  
MySQL platform

PlanetScale: The world’s most advanced database platform

 

uploadthing  
File Uploads For Next.js Developers. 서버에서 사용자에게 권한 부여. 파일 호스팅을 관리(S3와 유사하지만 더 간단함)오픈 소스 React 클라이언트 라이브러리를 제공합니다 편리한 구성 요소, 후크 등을 사용하여 프런트엔드에서 파일을 업로드

uploadthing

 

Axios  
Promise(ES6) API 활용(for 브라우저, Node.js) HTTP 비동기 통신 라이브러리
ajax를 자바스크립트에는 fetch api, 프레임워크에는 axios

시작하기 | Axios Docs

 

zustand(독일어로 '상태’)
상태 관리 라이브러리. 리액트는 독립적인 컴포넌트 단위로 구성되어 있다. useState hook을 사용하여 하나의 컴포넌트에서 상태를 관리하고 props를 통해 부모-자식 간에 상태를 전파할 수 있다. 단순화된 Flux 원리를 사용하는 작고 빠르며 확장 가능한 상태 관리 솔루션이다. Hooks에 기반해 편리한 API를 제공한다.

Zustand

 

 

 

 

 

주경야딩 코딩 노트

---

노션 정리

Discord Clone

 

깃헙 코드 

GitHub - normalstory/TeamChatApplication: Discord Clone coding