사이트 축소판.js랑 Firebase로 했어요.

muu라는 밴드 멤버 모집 서비스를 만들었기 때문에 사용한 프로그램 라이브러리와 소감을 정리했다.

기능 개요

사용자 페이지

활동 거점, 악기, 유파 등 기본 정보를 위한 사용자 페이지를 만들 수 있다.

테이프

모든 사용자는 밴드를 만들고 그들의 멤버가 될 수 있다.
밴드가 사용자를 초대하여 멤버로 연결할 수 있습니다.

활동 실적의 타임라인

지금까지 투고한 영상과 악곡 등을 타임라인으로 표시할 수 있다.유튜브, 스포티파이, 사운드클라우드 등이 내장형 플레이어를 지원하고 재생수와 좋은 수치를 얻어 표시하기도 한다.
실제 성적은 개인이나 밴드와 관련이 있다.밴드 멤버의 개인 홈페이지에도 추가 실적이 올라왔다.

모집하다

멤버 모집 사이트인 만큼 당연히'밴드 멤버 모집'과'밴드 가입 희망'두 가지 모집 정보를 게재할 수 있다.
공들인 곳으로 공모용 OG 이미지를 동적으로 생성했다.회원 사이트뿐 아니라 SNS와 매칭 서비스 등 기존 이용자가 없으면 신규 이용자도 늘지 않는다.'트위터 등에서도 공모를 홍보할 수 있다'는 점을 매점으로 내세우면 기존 이용자의 부족함을 보완할 수 있다고 판단해 시행했다.

찾다

검색할 수 있습니다.꼭 필요한 거니까.

만든 이유

가장 큰 목적은'음악가의 경력을 가시화함으로써 매칭을 최적화하는 것'이다.

기존 서비스의 문제점

OURSOUNDS처럼 기존 모집 사이트는 솔직히 초보자와 노인이 많다는 인상을 줘 별로 쓰고 싶지 않았다.이렇게 말하기보다는 밴드와 음악과의 인터넷 서비스는 늘 낡아서 멋진 음악을 만드는 사람들은 사용하지 않을 것 같다.
또 이들 사이트의 계정은 대부분 일회성이어서 모집이 끝나면 보류된다.지금까지 얼마나 많은 밴드를 했는지 이런 일은 기록되지 않는다.
트위터를 하는 밴드와 음악가들이 많기 때문에 요즘 더 많은 사람들이 이쪽에서 찾는다고 생각합니다.다만, 검색성이 높지 않아 트위터만 어떤 기능이 있는지 알기 어렵다.
잦은 도급업자라면 투자조합 사이트가 있지만 검색성도 낮다.

무이가 해결하고 싶은 거.

muu의 목표는 한 음악가의 기능과 업적을 간단하게 기록하여 가시화하는 것이다.
현재 상황을 이해하기 위해 우리는'구성원을 모집하는 사이트'라는 이름으로 클라우드 프레스와 연주 위탁 서비스를 전개할 수 있을 것이라고 생각한다.음악인뿐만 아니라 라이브 하우스와 음악 제작사 등 법인들도 안심하고 작업을 의뢰할 수 있는 대상을 찾고 있을 것으로 보인다.

사용한 라이브러리와 느낌

다음은 기술적인 화제다.

Next.js

특별한 선택이 아니라서 잘 안 써요.
특별히 하나를 쓰려면 모든 프로필 페이지가 ISR에 발송되지만 로그인한 사용자가 관리하는 페이지만 고객 사이트에서 최신 데이터를 얻을 수 있습니다.나는 이것이 확실히 Zenn에서도 같은 일을 했다고 생각한다.

Firebase

백엔드에는 Firebase가 있습니다.

채용 이유

원형에 딱 맞는 것 같다

그렇게 복잡한 서비스는 아닌 것 같아

무료 사용 가능

합격 소감

솔직히 파이어베이스에서 개발이 이뤄진 지금까지의 소감은'상당히 힘들었다'.

다대다 구조가 나타났을 때 이미 통증을 느꼈다.중간표 컬렉션을 만들지 않으면 안 되기 때문에 노스QL의 편의성(일부)을 포기할 수밖에 없다.

안전 규칙이 너무 번거롭다.선언적인 말은 듣기에는 좋지만 단순한 제한이 지나친 것일 수도 있다.백엔드 코드를 쓰는 것이 비교적 쉽다.

특정 열에 대해 독특한 제한을 가할 수 없는 제한도 엄격하다.

조회 제약 때문에Firestore는 현재 실현된 검색 기능을 실현할 수 없습니다.따라서 현재 Supabase 와 데이터를 동기화합니다.

번들 크기가 큽니다.

리스트에 나오는 Supabase는Firebase의 대체 서비스로 내부는 Postgres이며 단순한 관리 DB로도 사용할 수 있다.그리고 Firebase와 같은 무료 테두리가 있기 때문에 RDBMS를 무료로 사용하면 가장 좋은 선택인 것 같다(현재 이동을 검토 중).

React Query

SWR처럼 보이지만 더 많은 기능이 있다.
예를 들어react-query는 캐시를 더욱 유연하게 제거할 수 있다.

const todoListQuery = useQuery('todos', fetchTodoList)
const todoSingleQuery = useQuery('todos/7', fetchTodoList)

// 全てのtodoをinvalidate
 queryClient.invalidateQueries('todos')
// idが7のtodoだけinvalidate
queryClient.invalidateQueries('todos/7')

SWR의 경우useSWR('todos') invalidate도 useSWR('todos/7')되지 않는다는 차이점이 있다(react-query는 전달{exact: true} 옵션을 통해 SWR과 같은 행동을 할 수 있다).
개인적으로 이 기능이 매우 쓰기 좋다고 생각해서 SWR이 아니라 이것을 사용했다.

Tailwind

스타일링은 테일윈드를 채택했다.
찬반 두 가지 의견이지만 개인적으로 좋아합니다.나는 이것이 한 사람이 프로젝트를 하기에 가장 적합한 선택이라고 생각한다.
나는 가장 큰 장점이 속도라고 생각한다.css-in-js든 CSS 모델이든 스타일을 쓸 때 JSX를 떠나야 하지만 Tailwind는 거기에 비용이 들지 않습니다.
유연성이라는 의미에서 다른 선택보다 못하고 상황에 따라 추가 시간이 필요할 수도 있다.여러 사람이 개발하기에 적합하지 않은 상황이 있을 수 있다.

node-canvas

OG 이미지는 node 환경에서 Canvas API를 사용할 수 있는 node-canvas 라이브러리에서 동적으로 생성됩니다.
다만, 솔직히 캔버스는 사용하기 어렵고, 익숙하지 않은 일반 웹 엔지니어는 헤드 없는 브라우저 등(문자 넘침과 동적 위치 조정 등이 상당히 번거롭다)을 사용하는 게 좋다.
또한 라이브러리의 크기가 상당히 크기 때문에 muu는 Vercel의 제한에 끌린다.어쩔 수 없었기 때문에 다른 항목으로 나누어 처리했다.

최후

현재 활동하는 사용자가 매우 적기 때문에 만약 음악을 하고 있는 사람이 있다면 반드시 등록해 주십시오.
https://muu.app
왜 그런지 모르겠지만 아래 오류가 잦아서'Google로 시작'버튼을 누른 뒤 프로필 로그인 양식으로 이동하지 않은 분들, 연락 주시면 감사하겠습니다.

Error: The popup has been closed by the user before finalizing the operation.

(팝업 후 Google 계정을 선택하지 않고 닫아도 발생하므로 반드시 잘못된 것은 아닌 것 같습니다.)