Use Stack
cloudinary
:클라우드 기반의 이미지 및 비디오 관리 플랫폼.
-파일 업로드 : 이미지, 비디오, 오디오 파일 등을 클라우드에 업로드 할 수 있음.
-자동 변환 : 업로드된 파일의 포맷, 크기, 품질 등을 자동으로 조정하거나 변환할 수 있음.
-CDN 제공 : 파일을 전 세계에 있는 Content Delivery Network에서 제공하여 빠른 로딩 속도를 보장함.
-이미지 최적화 : 성능을 향상 시키기 위해 이미지와 비디오를 최적화 함.
-강력한 API : 업로드, 관리, 변환 및 삭제 등 다양한 기능을 API를 통해 제어할 수 있음.
pusher
: 실시간 애플리케이션을 쉽게 구축할 수 있도록 도와주는 서비스.
-실시간 메시징 : WebSoket을 사용하여 클라이언트와 서버 간에 실시간으로 데이터를 주고받을 수 있음
-채널 : 사용자나 그룹 간의 실시간 상호작용을 위한 채널을 지원
-푸시 알림 : 사용자에게 실시간 알림을 보낼 수 있음
-자동 재연결 : 네트워크 문제가 발생했을 때 자동으로 재연결 시도
prisma db
: 현대적인 ORM(객체 -관계 매핑) 도구로, 데이터베이스와의 상호작용을 간소화 해줌.
-데이터 모델링 : Prisma Schema를 사용하여 데이터베이스 모델을 정의하고 마이그레이션을 관리할 수 있음.
-타입 안정성: Type Script와 통합되어 타입 안전한 데이터베이스 쿼리를 작성할 수 있음.
-데이터베이스 클라이언트 : Prisma Client를 통해 데이터베이스 쿼리를 쉽게 작성하고 실행할 수 있음.
-데이터베이스 마이그레이션 : Prisma Migrate를 사용하여 데이터베이스 스키마의 변경 사항을 관리하고 적용할 수 있음.
✏ 마이그레이션
:데이터베이스 구조의 변경 작업을 관리하고 추적하는 과정. 주로 스키마의 버전 관리를 통해 데이터베이스 구조를 업데이트하고, 기존 데이터를 새로운 구조에 맞게 변환하는 작업을 말함.
zustand
: 간단하고 직관적인 상태 관리 라이브러리
-간단한 API : 사용하기 쉽고, 복잡한 설정 없이 상태를 관리할 수 있음.
-React 호환성 : React의 상태 관리를 더 간단하게 할 수 있는 훅 기반의 라이브러리.
-빠른 성능 : 상태 업데이트가 빠르고, 리렌더링 최적화가 잘 되어 있음.
-구성 가능성: 다양한 상태 관리 패턴을 지원하며, 커스터마이즈가 가능함.
✏ 리렌더링
: React 등의 컴포넌트의 상태나 Props가 변경될 때 해당 컴포넌트가 다시 그려지는 과정을 말함. 리렌더링은 UI가 최신 상태를 유지하도록 함.
React-spinners
: React 애플리케이션에서 로딩 스피너를 쉽게 사용할 수 있도록 해주는 라이브러리
- 다양한 스피너 : 여러 가지 스타일과 애니메이션 효과를 가진 스피너 컴포넌트를 제공함.
-커스터마이징 : CSS 또는 스타일 속서을 사용하여 스피너를 쉽게 커스터마이즈 할 수 있음.
-간편한 사용: React 컴포넌트 형태로 제공되어 쉽게 사용할 수 있음.
next-superjson-plugin
: Next.js 애플리케이션에서 JSON 직렬화 및 역직렬화를 보다 간편하게 해주는 도구
-복잡한 데이터 직렬화 : 날짜 객체, Map, Set 등 JSON으로 직렬화 하기 어려운 데이터 타입을 지원.
-성능 최적화 : JSON의 직렬화와 역직렬화 과정에서 성능을 최적화
-Next.js 통합 : Next.js의 API 라우트와 서버 사이드 렌더링(SSR)에서 JSON 데이터를 처리하는데 도움을 줌.
✏ 직렬화
: 데이터 구조나 객체를 네트워크 전송이나 저장을 위해 문자열이나 바이트 스트림(데이터가 연속된 바이트 형태로 전송되거나 저장되는 데이터 흐름)으로 변환하는 과정. JSON, XML, BSON 등이 직렬화의 대표적인 형식.
✏ 역직렬화
: 직렬화 된 데이터를 원래의 객체나 데이터 구조로 복원하는 과정. 네트워크에서 받은 데이터나 파일로부터 직렬화된 문자열을 읽어들여, 원래의 데이터 구조로 변환함.
NextAuth.js
: Next.js 애플리케이션에서 인증을 쉽게 구현할 수 있도록 도와주는 라이브러리.
useCallback
:React의 훅으로, 특정 콜백 함수를 메모이제이션 함.
즉, 의존성 배열에 지정된 값이 변경되지 않는 한, 동일한 콜백 함수 인스턴스를 반환.
ex. 함수가 자주 렌더링 되는 컴포넌트에서 불필요한 렌더링을 방지할 때 사용.
✏ 메모이제이션
: 함수의 반환값을 캐싱하여 동일한 입력값에 대해 함수가 반복적으로 계산되는 것을 방지하는 기술.
useRouter
: Next.js의 훅으로 클라이언트 사이드에서 라우팅 관련 정보를 가져오거나, 라우터를 조작할 수 있게 해줌.
ex. 페이지 이동, 쿼리 파라미터 읽기, 라우터 상태 접근에 사용.
NextResponse
:Next.js의 app 디렉토리와 관련된 새로운 API를 통해 사용되는 객체로, 서버 사이드에서 HTTP 응답을 생성하는데 사용.
ex. API 라우트나 서버 사이드 렌더링에서 HTTP 응답을 커스터마이즈 할 때 사용.
pusher Client
: Pusher의 클라이언트 라이브러리로, 실시간 기능을 제공하는데 사용됨. 웹소켓을 통해 서버와 클라이언트 간의 실시간 통신을 지원.
pusherServer
:Pusher의 서버 라이브러리로, 서버에서 실시간 기능을 설정하고 관리하는데 사용됨.
IParams
: 타입스크립트에서 사용하는 인터페이스로, 주로 라우트 핸들러나 함수의 파라미터를 정의할 때 사용됨.
ex. API 핸들러나 라우트에서 파라미터의 타입을 정의할 때 사용.
✏ 파라미터
: 함수나 메서드에 입력으로 전달되는 변수
React Select
:React에서 동적인 셀렉트 박스를 구현할 수 있게 해주는 라이브러리. 다양한 스타일과 기능을 제공함.
ex. 드롭다운 선택 박스를 구현할 때 사용됨.
useActiveChannel
: Pusher 또는 비슷한 라이브러리의 훅으로, 활성화된 채널에 대한 상태를 관리하는데 사용됨. 이 훅은 특정 채널의 데이터 또는 상태를 구독함.
@headlessui/react의 Transition과 Dialog
: Transition 컴포넌트는 애니메이션과 전환 효과를 적용하는데 사용됨. 상태에 따라 요소의 등장과 퇴장을 애니메이션으로 처리할 수 잇음.
Dialog 컴포넌트는 모달 대화상자를 구현하는데 사용됨. 사용자와 상호작용할 수 있는 팝업을 쉽게 만들 수 잇음.
ex. UI 요소의 부드러운 전환 효과를 구현할 때 사용, 사용자 입력을 받거나 정보를 표시하는 모달창을 구현할 때 사용.
ClipLoader
: react-spinners 라이브러리에서 제공하는 스피너 컴포넌트로, 로딩 상태를 시각적으로 표시할 때 사용.
ex. 페이지나 데이터 로딩 중 사용자에게 로딩 상태를 표시할 때 사용.
Fragment
: React의 컴포넌트로, 여러 자식 요소를 그룹화 할 때 사용됨. DOM에 추가적인 노드를 생성하지 않고 여러 자식 요소를 반환할 수 있음.
ex. 부모 요소를 추가하지 않고 자식 요소를 반환할 때 사용함.