20240318 TIL #58

[1] 심화 프로젝트 기술 스택

 

(1) React.js

 1) SPA 기반의 프론트엔드 개발 프레임워크

 2) 컴포넌트 단위의 독립적인 블록을 이용한 개발 

 3) Props, state를 통해 안전하고 효율적으로 데이터를 공유

 

(2) Next.js

 1)다양한 렌더링 방식(SSG, ISR, SSR, CSR)을 최대한 활용하여 빠르고 효율적인 화면 전환을 구성할 수 있음

 2) App Routing을 통해 간편하고 직관적으로 routing을 할 수 있음

 3) <Image> 컴포넌트의 자체 이미지 최적화 기능을 활용할 수 있음

 

(3) Typescript

 1) 컴파일 타임에 타입 에러를 잡아낼 수 있기 때문에 개발 시간을 더욱 효율적으로 관리할 수 있음

 2) 타입을 지정하여 좀 더 안전하고 효과적인 기능 구현을 할 수 있음

 

(4) zustand

 1) 상태 관리 라이브러리

 2) Store에 action과 reducer를 모두 작성하는 간결한 보일러플레이트를 통해 Redux보다 더욱 쉽게 학습하고 간편하게 전역 상태를 관리할 수 있음 

 

(5) Tanstack-Query

 1) 서버와의 비동기 통신을 효율적으로 수행할 수 있음

 2) isLoading, isError 등의 변수를 별도의 구현 절차 없이 사용할 수 있어 편리함

 

(6) Supabase

 1) DB에 접근 가능한 할당량과 횟수가 Firebase에 비해 압도적으로 좋음

 2) SQL 문과 유사한 문법을 사용하여 더욱 편리하게 구현이 가능함

 3) 사용방법에 대한 설명이 자세히 나와있음

 4) Middleware, SMTP 등을 사용하여 효율적으로 인증/인가를 구현할 수 있음

 

(7) Tailwind CSS + shadcn/ui  

 1) 동적인 CSS를 구현할 수 있음

 

 

[2] 주제 및 피드백

(1) 주제

 1) 올바른 건강 기능 식품을 고르는 데에 도움이 되는 웹 서비스내 영양제 일기

 2) 설문 조사 : 연령, 성별, 신장, 체중 

 3) 인증/인가, 데이터베이스 : supabase 이용

 4) 식약처 api 사용

 

(2) 피드백 및 제안

 1) 데이터를 보면 매력적인 서비스인가?

 2) 메인페이지 => 우리 사용자들이 어떤 것을 가장 많이 검색했고, 통계 : 로그인 했을 때 

 3) 회원 가입 시 설문조사는 장벽이 너무 높음 => 첫 로그인 시 하는 걸로 변경

 4) gamification : 메인에 알약 먹는 게임으로 흥미 유발

 5) 제휴업체 영양제를 보여주고 구매하러 가기 링크 포함

 

 6) FCM : 푸시 알림을 주는 서비스 => 유저와의 상호작용, report를 주는 역할