yui.design - UI 디자이너를위한 참조 사이트를 Firebase에서 만든 이야기

소개

이 기사는 SFC Advent Calendar 2019의 7일째 기사입니다.

만나서 반가워요 엔지니어 @ 고향 _ 카츠미 입니다. 디자이너의 레오 라고 말하는 가운데 일본의 앱의 레퍼런스 서비스가 없지,라고 하는 것으로 서비스 개발을 시작했습니다.

결. 제자 g

사이트 구현 구성

시간적 문제와 개발하는 인간이 현재 자신 혼자였던 적도 있습니다.

· Firebase
· React
・Typescript

의 구성으로 개발을 시작했습니다.

Firebase의 장점 단점

우선 Firebase란?
이번에 사용한 물건으로 느낀 장점 단점을 써 옵니다.

auth

기본 로그인 기능 외에도 Auth 로그인 등까지 구현하는 서비스입니다.

· 장점
몇 줄의 코드로 로그인 구현할 수 있습니다. 일찍.

・단점
개인적인 감각이지만 인증 요청이 조금 느립니다. 1s 걸릴 때가 있을 정도로 느린 시간이 있습니다.

storage

파일 등의 스토리지 서비스입니다.
이미지 데이터 등을 올릴 수 있습니다.

· 장점
Auth와 연계하여 권한을 관리할 수 있거나, 몇 줄의 코드로 데이터를 올릴 수 있습니다.

・단점
조사한 한 별도 CDN을 끼우는 것은 어려울 것 같았습니다.
또한 체감적으로 느리다고 느꼈기 때문에 버킷에 직접 액세스하도록 다시 작성하고 있습니다.

hosting

서비스 자체를 공개하는 호스팅 서비스입니다.

· 장점
콘솔 어플리케이션도 확실하고 있어 간단하게 들 수 있습니다. 사용하기 쉬운

・단점
특히 없음

firestore

데이터를 관리하는 NoSQL 서비스입니다.

· 장점
확장성. 형이 없기 때문에 고리고리 갈 수 있다. 빠른 속도

・단점

RDBMS에 익숙한 탓인지 N+1계의 대처를 할 수 없거나, 검색계의 구현이 힘들었습니다. 일단 where 함수 덕분에 조금만 query적인 일은 할 수 있지만, 복잡한 것은 아직 어려울 것 같습니다.

수수료

가격 설정이 비교적 유저의 유스 케이스에 맞추어 있으므로, 서비스가 커질 때까지는 무료로 시험해, 리미터로서 2500엔 돌리거나 할 수 있습니다.

(개인적으로는 조금 비싸지만 편리한 가격이라고 생각합니다)

미세한 문제는 또 별도 기사로 하고 싶다.

StoryBook 및 AtomicDesign

디자인계의 서비스를 만드는 데 있어서 디자이너와의 제휴와, 컴퍼넌트의 단락에 주의해 작성해 보았습니다.

디자이너가 언제든지 디자인을 확인할 수 있으며, 문자를 넣어 보거나 변수를 변경하여 볼 수 있습니다.

Atomic Design은 부품을 5단계로 나누어 컴포넌트 그룹으로 개발합니다. 단지 이번에는 너무 고민하면 시간 소모하기 때문에 미래의 자신에게 맡기고 고민하면 포기할 방침이므로 비교적 엉망입니다. 언젠가 공개하고 싶지만 리팩토링 후군요.

TypeScript

정적 형은 좋네요.

JavaScript라고 난폭하게 쓴 코드가 움직이는 것이 장점이기도 하고 단점이기도 합니다만...

매번 사양 변경이 있었을 때 형이 제대로하고 있기 때문에, 오류가 나오므로 실행하지 않으면 모르는 오류 등 미연에 방지합니다.

그리고, 과거에 제작한 것이 NaN 투성이가 된 적이 있습니다만, 그 걱정이 줄어드는 것만으로도 ts는 행복합니다.

요약

일본의 UI 디자이너가 보다, 정말로 유저에게 가치가 있는 일에 전념할 수 있도록, 부담없이 검색하거나, 지식을 정리해 나갈 예정입니다. 꼭, 함께 개발에 관여하고 싶은 사람이 있으면, 꼭 컨트리뷰터가 되어 주세요!