ToyProject

7 Posts found

ToyProjectHalsaramAWS2025.08.21

[할사람] 프로젝트 기획

프로젝트명: 할사람? 오늘 만나서 미션 할 사람? 팀명: 아마존 뚝딱 5팀 주관: 한국소프트웨어산업협회 [NIPA-AWS] Developer 부트캠프 2기 개발기간: 3주 2024.07.28 2024.08.18 AI 기반의 랜덤 미션을 인증하는 번개 모임 플랫폼 번개를 미션처럼, 모임을 게임처럼! 일상적이고 재미있는 랜덤 미션을 통해 부담없는 번개...

ToyProjectJavaScriptTypeScript2025.06.26

[Starving Orange] 한글 닉네임 자동 생성 라이브러리

백엔드 개발을 하다보면 기본값 default value 을 설정해야 하는 경우가 자주 발생한다. 닉네임의 경우 특히 DB 스키마에서 닉네임 컬럼에 unique와 not null 제약조건이 걸려있다면 더욱 고민하게 된다. 기존에는 보통 이런 식으로 처리했다. 물론 기능적으로는 문제없지만, 사용자 경험 측면에서는 아쉬운 부분이 있었다. 좀 더 재미있고...

AWSServerlessLambda2025.06.25

[Guestboots] 서버리스 아키텍처로 구현한 방명록 애플리케이션

서버리스 아키텍처를 학습하고 난 후, 배운 내용을 직접 적용해보고 싶어서 간단한 웹 방명록 서비스를 만들어보았다. 포스트잇 스타일로 방문자들이 자유롭게 메시지를 남길 수 있는 애플리케이션이다. 포스트잇 스타일 방명록 서비스 - 사용자들이 다양한 색상의 포스트잇에 닉네임과 메시지를 남길 수 있는 웹 애플리케이션을 구현했다. 프로젝트 구현 결과는...

ReactTypeScriptTailwindCSS2024.11.02

[Thumbs Up] v1.0 - 썸네일 제작 도구

블로그에 사용할 1:1 비율의 썸네일 제작 도구가 필요해 개발하게 된 프로젝트 1:1, 4:3, 16:9 비율의 레이아웃을 제공한다. 그라디언트, 단색, 이미지 배경 지원 셔플 버튼을 통해 랜덤 그라디언트 생성 이미지 배경 선택 시 크롭 기능과 블러 효과 강도 조절 무료 상업용 한글 폰트 지원 Gmarket Sans, 나눔스퀘어 네오,...

ReactTypeScriptTailwindCSS2024.10.31

[Thumbs Up] 이미지 다운로드 및 클립보드 복사 기능 구현하기

썸네일 제너레이터 도구를 완성하면서 결과물을 즉시 활용할 수 있는 기능이 있으면 좋겠다고 생각했다. 그래서 이미지 다운로드와 클립보드 복사 기능을 추가해 사용자가 손쉽게 썸네일을 저장하거나 붙여넣을 수 있도록 구현했다. canvas에서 생성된 이미지를 PNG 파일로 저장할 수 있도록 구현했다. canvas.toDataURL 다운로드 링크 생성 이미지를...

ReactTypeScriptTailwindCSS2024.10.30

[Thumbs Up] 배경 커스터마이징 기능 구현하기

배경에서는 그라디언트, 단색, 이미지로 커스터마이징할 수 있게 구현했다. 특히 색상 선택의 어려움을 해결하기 위해 셔플 버튼으로 미리 준비된 색상 조합을 제공하는 기능을 추가했다. 그라디언트 배경: 두 가지 색상 조합으로 그라디언트를 설정한다. 단색 배경: 단순한 색상으로 배경을 채운다. 이미지 배경: 사용자가 이미지를 업로드하고 크롭하거나 블러...

ReactTypeScriptTailwindCSS2024.10.30

[Thumbs Up] 텍스트 커스터마이징 기능 구현하기

텍스트 커스터마이징 기능을 구현한 과정이다. 텍스트 스타일 텍스트 레이아웃 폰트 선택 사용자가 입력한 텍스트를 상태로 관리하며 스타일을 바로바로 조정할 수 있도록 했다. 텍스트 상태를 text로 관리하고, 굵기와 기울임 여부를 isBold, isItalic 상태로 관리했다. Input 컴포넌트로 텍스트와 색상을 입력받고, Toggle 컴포넌트로 스타일...