BoringAvatar

2024. 8. 4. 22:39· 기타
목차
  1. BoringAvatar
  2. 개요
  3. Installation
  4. Quick Start
  5. Props
  6. Name
  7. Variant
  8. Size
  9. Colors
  10. Square

BoringAvatar

 

작성 일자 : 2024년 8월 4일


 

BoringAvatar

 

 

개요

 

최근 NextJS에서 Auth.js와 Lucia를 이용해서 로그인 기능을 구현하면서, 로그인 시에 사용자의 프로필 이미지를 보여주는 기능을 추가하고 싶었습니다.

 

OAuth를 이용한 로그인과는 다르게, 아이디와 비밀번호를 이용한 로그인 기능은 기본적으로 프로필 이미지를 제공하지 않습니다. 따라서, 사용자의 프로필 이미지를 보여주기 위해서는 사용자가 직접 이미지를 업로드하거나, 서비스 자체적으로 기본 프로필 이미지를 제공해야합니다.

 

이번 글에서는, BoringAvatar 라는 JS 라이브러리를 이용하여, 랜덤하게 사용자의 프로필 이미지를 제공하는 방법에 대해 알아보겠습니다.

 


 

 

Installation

 

BoringAvatar는 NPM을 통해 설치할 수 있습니다.

npm install boring-avatars

 


 

 

Quick Start

 

import Avatar from "boring-avatars";

<Avatar name="Gerrymandering"/>

 

 

 


 

 

Props

 

Name

 

name props는 아바타를 생성하는데 사용될 값을 의미합니다. 사용자 명, 이메일, 랜덤한 문자열 등을 사용할 수 있습니다.

<Avatar name="Sam Altman"/>

 

 

 


 

Variant

 

variant props는 아바타의 테마를 결정합니다.

 


 

marble

<Avatar name="Gerrymandering" variant="marble"/>

 

 

 


 

beam

<Avatar name="Gerrymandering" variant="beam"/>

 

 

 


 

pixel

<Avatar name="Gerrymandering" variant="pixel"/>

 

 

 


 

sunset

<Avatar name="Gerrymandering" variant="sunset"/>

 

 

 


 

ring

<Avatar name="Gerrymandering" variant="ring"/>

 

 

 


 

bauhaus

<Avatar name="Gerrymandering" variant="bauhaus"/>

 

 

 


 

 

Size

size props는 아바타의 크기를 결정합니다.

<Avatar name="Gerrymandering" size={88}/>

 

 

 


 

 

Colors

colors props에 배열을 전달하여 아바타의 색상을 지정할 수 있습니다.

<Avatar name="Gerrymandering" colors={["#CC3000", "#FF8E00", "#C06F48", "#090705"]} />

 

 

 


 

 

Square

square props를 true로 설정하면, 아바타가 정사각형으로 렌더링됩니다.

<Avatar name="Gerrymandering" square/>

 

 

 


References

  • BoringAvatar Github
  • BoringAvatar
 

Boring avatars - Open source SVG avatar generator

Boring avatars is an open source React library that generates custom, SVG-based avatars from any username and color palette.

boringavatars.com

 

 

GitHub - boringdesigners/boring-avatars: Boring avatars is an open source React library that generates custom, SVG-based avatars

Boring avatars is an open source React library that generates custom, SVG-based avatars from any username and color palette. - boringdesigners/boring-avatars

github.com

 

저작자표시 (새창열림)
  1. BoringAvatar
  2. 개요
  3. Installation
  4. Quick Start
  5. Props
  6. Name
  7. Variant
  8. Size
  9. Colors
  10. Square
'기타' 카테고리의 다른 글
  • Redis Pub/Sub 과 Redis Streams
  • Mac에서 iTerm2 아이콘을 변경해보자!
  • Github OAuth - 사용자에 대한 REST API 엔드포인트로 받아오는 JSON 예시
  • 인터리빙(Interleaving)이란?
gerrymandering
gerrymandering
gerrymandering
gerrymandering
gerrymandering
전체
오늘
어제
  • 분류 전체보기 (81)
    • SOLID 원칙 (6)
    • 번역 (4)
    • Nginx (1)
    • Tailwind CSS (1)
    • AWS (7)
      • DMS를 사용한 RDS to OpenSearch .. (3)
      • ECS를 이용한 Blue-Green 무중단 배포 .. (7)
    • NextJS (5)
    • 기타 (12)
    • Prompt Engineering (6)
    • 읽어볼만한 글 (3)
      • 기술 (0)
      • 쓸만한 툴 (0)
      • 아이템 (0)
      • 웹 디자인 (0)
      • 기타 (3)
    • Cloud Architecture (4)
    • Trouble Shooting (9)
    • Spring (11)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

최근 댓글

최근 글

글쓰기 / 관리자
hELLO · Designed By 정상우.v4.2.1
gerrymandering
BoringAvatar
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.