전체 글
-
[prisma] vercel 배포시 에러카테고리 없음 2023. 8. 17. 16:48
PrismaClientInitializationError: Prisma has detected that this project was built on Vercel, which caches dependencies. This leads to an outdated Prisma Client because Prisma's auto-generation isn't triggered. To fix this, make sure to run the `prisma generate` command during the build process. Within the scripts section of your project's package.json file, if there is not already a script named ..
-
[CSS] shadcn ui - 공유 UI 컴포넌트FrontEnd/HTML, CSS 2023. 8. 9. 11:58
공유 컴포넌트 3대장 MUI ( Matrerial UI) - 오픈 소스 React Component Library Ant Design React Bootstrap 개인적으로 위 3대장은 커스텀 하기가 어려워 요즘 뜨고 있는 shadncd ui를 사용해봄 shadcn ui는 Radix-ui를 기반으로 하고 있음 Radix ui 란 고품질의 액세스 가능한 디자인 시스템 및 웹 앱을 구축하기 위한 오픈 소스 UI 컴포넌트 라이브러리. 접근성, 사용자 정의, 개발자 경험에 초점을 맞춘 하위 수준의 UI컴포넌트 라이브러리 shadcn ui의 특징 Accessible : 컴포넌트는 가능한 경우 WAI-ARIA 설계 패턴을 준수합니다. aria 및 role 속성, 포커스 관리 및 키보드 탐색을 포함하여 접근성과 관련..
-
[Prisma] provider = "MongoDB" 일 때 모델의 id에 대해Database/Prisma 2023. 8. 3. 15:30
id String @id @default(auto()) @map("_id") @db.ObjectId 1. id 는 이 필드의 문자열(String)타입의 필드 (기본키로 사용 될 것) 2. @id: 이것은 Prisa 스키마에서 해당필드가 db의 기본 키로 사용됨을 지정하는 데코레이터 3. @default(auto()) : 이 데코레이터는 해당 필드가 새로운 레코드를 생성할 때, 자동으로 값을 생성하는 것을 의미함 4.@map("_id") : 이것은 prisma 스키마에서 해당 필드를 MongDB 내부에서 "_id"필드와 매핑하는 것을 의미함. MongoDB는 기본적으로 "_id"라는 이름의 필드를 사용해서 각 문서를 고유하게 식별함 Prisma에서는 이 "_id" 필드를 "id"라는 이름으로 사용하고자 할..
-
[Next.js] pusher 라이브러리카테고리 없음 2023. 8. 2. 10:37
Pusher.js는 실시간 웹 기술을 구현하기 위해 사용되는 클라이언드 사이드 라이브러리. 웹과 앱에서 실시간 데이터를 전송하는데 사용되며, 소켓 통신을 기반으로 작동 됨 Pusher.js의 두 가지 주요 구성 요소 Pusher 객체: 웹에서 사용 가능한 Pusher 라이브러리로, 웹 소켓 연결을 설정하고 실시간 데이터를 주고 받음 Pusher Channels: Pusher는 채널 시스템을 통해 데이터를 전송함. 채널은 특정 주제에 데이터를 게시하고 구독하는데 사용함. client는 원하는 채널에 가입하고 해당 채널로부터 데이터 업데이트를 수신함. pusher를 사용하기 위해서는 API키를 얻어야 함. 이 후 클라이언트와 서버 양쪽에서 pusher라이브러리 로드 웹 소켓을 지원하지 않는 브라우저에서는 p..
-
내가 만든 컴포넌트가 어디에서 import 되고 있나?FrontEnd/Next.js 2023. 7. 24. 17:22
컴포넌트가 다른 곳에서 import되고 있는지 확인하는 방법은 프로젝트의 규모와 개발 환경에 따라 다를 수 있습니다. 주로 사용하는 개발 도구에 따라 다양한 방법이 있지만, 일반적으로는 다음과 같은 방법들을 활용할 수 있습니다: IDE 또는 코드 편집기의 검색 기능: 대부분의 통합 개발 환경(IDE) 또는 코드 편집기는 "검색" 또는 "찾기" 기능을 제공합니다. 이를 활용하여 해당 컴포넌트의 이름으로 검색하면 해당 컴포넌트가 어디에서 import되었는지 쉽게 확인할 수 있습니다. 코드베이스 전체에서 특정 문자열 검색: 만약 IDE나 편집기에서 검색 기능이 제한적이거나 사용할 수 없는 경우, 전체 코드베이스에서 특정 문자열 검색을 수행하는 방법을 사용할 수 있습니다. 예를 들어, 프로젝트 디렉토리에서 터미..
-
[TS] 타입스크립트 Utility types - Exclude, OmitFrontEnd/TypeScript 2023. 7. 17. 11:57
Exclude, Omit - TS에서 제공하는 type 변형을 유연하게 도와주는 타입들 Exclude Exclude from T those types that are assignable to U. (typescript 2.8 릴리즈) Exclude => union type에서 제외된 타입들에 대한 새로운 타입을 정의함 type MyUnion = string | number | boolean; type ExcludeNumber = Exclude; const value: ExcludeNumber = 'hello'; // value can only be of type string or boolean Omit TypeScript 3.5 introduces the new Omit helper type, which..
-
[Next.js] libs 폴더에는?FrontEnd/Next.js 2023. 7. 15. 17:59
libs 폴더는 Next.js 프로젝트에서 프론트엔드 개발자들이 사용하는 라이브러리 및 유틸리티 함수들을 모아놓는 공통 디렉토리 공통 함수 및 유틸리티: libs 폴더는 여러 컴포넌트나 페이지에서 공통으로 사용되는 함수나 유틸리티 기능들을 저장하는 곳입니다. 이러한 함수들은 중복 코드를 피하고 코드 재사용성을 높이는 데 도움을 줍니다. 외부 라이브러리 및 통합: libs 폴더는 프로젝트에서 사용하는 외부 라이브러리들을 관리하는 곳으로 활용될 수 있습니다. 예를 들어, Next.js에서는 libs 폴더에 외부 라이브러리들을 가져와 사용하는 코드를 작성할 수 있습니다. API 클라이언트: libs 폴더는 백엔드 API와 통신하는 클라이언트 코드를 작성하는 데 사용될 수 있습니다. 예를 들어, REST API..
-
[Prisma] @id @default(auto()) @map("_id") @db.ObjectId 의미Database/Prisma 2023. 7. 15. 17:43
id String @id @default(auto()) @map("_id") @db.ObjectId 이 문장의 의미 위의 코드는 Prisma ORM에서 데이터베이스 모델을 정의하는 부분입니다. 각 필드의 의미는 다음과 같습니다: id: 데이터베이스에서 고유 식별자로 사용되는 필드입니다. String 타입으로 정의되어 있으며, @id 데코레이터를 통해 이 필드가 식별자임을 나타냅니다. @default(auto())는 이 필드의 기본값을 자동으로 생성하는 설정입니다. @map("_id"): 해당 필드를 데이터베이스에서 "_id"라는 이름으로 매핑합니다. 일부 데이터베이스에서는 기본적으로 "_id"라는 이름의 필드를 사용하는데, Prisma에서는 이를 명시적으로 매핑하기 위해 사용됩니다. @db.Object..