|
18 | 18 | "serviceUrl": "https://lazy-dinosaur.github.io/",
|
19 | 19 | "featured": true,
|
20 | 20 | "createdAt": "2025-03-05",
|
21 |
| - "overview": "마크다운 파일을 기반으로 콘텐츠를 관리하는 개인 블로그 프로젝트입니다. Next.js의 App Router와 TypeScript를 활용해 개발했으며, 저 스스로의 필요에 맞게 자동화 하였습니다. 해당 블로그는 노트를 작성하면서 원할때 언제든 neovim의 커맨드를 활용하여 블로그를 포스트 할 수 있다는것에 의미가 있습니다.", |
| 21 | + "overview": "마크다운 파일을 기반으로 콘텐츠를 관리하는 개인 블로그 프로젝트입니다. Next.js의 App Router와 TypeScript를 활용해 개발했으며, 저 스스로의 필요에 맞게 자동화했습니다. 이 블로그의 주요 특징은 노트 작성 중 언제든지 Neovim 커맨드를 통해 즉시 블로그에 포스팅할 수 있다는 점입니다.", |
22 | 22 | "features": [
|
23 |
| - "Neovim 과 Obsidian 을 통환 자동화된 마크다운 기반 콘텐츠 관리 시스템", |
| 23 | + "Neovim과 Obsidian을 통한 자동화된 마크다운 기반 콘텐츠 관리 시스템", |
24 | 24 | "명령어를 통한 노트 동기화 기능",
|
25 | 25 | "다크 모드 지원 및 테마 전환 기능",
|
26 | 26 | "반응형 레이아웃으로 모든 디바이스 지원",
|
|
34 | 34 | "마크다운 파싱 최적화: 코드 블록, 수식, 이미지 등 다양한 마크다운 확장 기능을 지원하면서도 빠른 렌더링을 위한 최적화 과정이 필요했습니다.",
|
35 | 35 | "다크 모드 구현: 테마 전환 시 깜박임 없는 부드러운 전환을 구현하기 위해 여러 테스트를 거쳐야 했습니다.",
|
36 | 36 | "모바일 반응형 디자인: 사이드바, 목차, 코드 블록 등 복잡한 요소들의 모바일 레이아웃 최적화가 어려웠습니다.",
|
37 |
| - "useSearchParams() 훅 사용 시 Suspense 경계 문제: Next.js의 특정 훅들이 Suspense 경계 내에서 사용되어야 한다는 요구사항을 해결하기 위해 컴포넌트 구조를 재설계해야 했습니다." |
| 37 | + "Next.js의 특정 훅 사용 제약: Suspense 경계 내에서만 사용 가능한 훅들로 인해 컴포넌트 구조를 재설계해야 했습니다." |
38 | 38 | ],
|
39 |
| - |
40 | 39 | "demoType": "images",
|
41 | 40 | "demoImages": [
|
42 | 41 | {
|
|
45 | 44 | },
|
46 | 45 | {
|
47 | 46 | "url": "/projects/my-blog/blog-post-example.mp4",
|
48 |
| - "description": "Neovim과의 통합: Neovim 을 통해 노트를 작성하면서 커맨드를 통해 블로그를 바로 포스팅 할 수 있습니다.", |
| 47 | + "description": "Neovim과의 통합: Neovim을 통해 노트를 작성하면서 커맨드를 통해 블로그를 바로 포스팅할 수 있습니다.", |
49 | 48 | "playbackRate": 2.5
|
50 | 49 | },
|
51 | 50 | {
|
|
54 | 53 | },
|
55 | 54 | {
|
56 | 55 | "url": "/projects/my-blog/blog-toc-example.mp4",
|
57 |
| - "description": "목차 생성: 마크다운을 읽으면서 목차를 생성하고 스크롤하여 화면에 보이는 문서상의 위치를 하이라이팅 하며 클릭시 해당 위치로 이동합니다." |
| 56 | + "description": "목차 생성: 마크다운을 읽으면서 목차를 생성하고 스크롤하여 화면에 보이는 문서상의 위치를 하이라이팅하며 클릭 시 해당 위치로 이동합니다." |
58 | 57 | }
|
59 | 58 | ],
|
60 | 59 | "futurePlans": [
|
|
66 | 65 | "성능 최적화 및 lighthouse 점수 개선",
|
67 | 66 | "다국어 지원 기능 추가",
|
68 | 67 | "영상 임베드 처리",
|
69 |
| - "마크다운 데이터로 전처리 하는과정 개선", |
| 68 | + "마크다운 데이터 전처리 과정 개선", |
70 | 69 | "임베드되는 파일들 버킷으로 관리 및 자동화"
|
71 | 70 | ],
|
72 | 71 | "publishPath": "project/blog"
|
|
75 | 74 | "projectType": "project",
|
76 | 75 | "id": "imyourbox-website",
|
77 | 76 | "title": "아임유어박스 웹페이지",
|
78 |
| - "description": "Next.js, TypeScript, Tailwind CSS, Framer Motion, Payload.js, Supabase, Vercel을 활용한 회사 웹페이지입니다. 고객들과 회사의 직원들을 위한 웹페이지입니다. SMTP와 이메일 템플릿을 이용한 문의내역을 이메일로 전달받고 데이터베이스에 저장하는 등의 기능과 개발자가 없어도 사이트를 유지 관리 할 수 있도록 Payload.js 를 활용한 관리자 기능이 특징 입니다.", |
| 77 | + "description": "Next.js, TypeScript, Tailwind CSS, Framer Motion, Payload.js, Supabase, Vercel을 활용한 회사 웹페이지입니다. 고객과 직원을 위한 웹사이트로, SMTP와 이메일 템플릿을 활용한 문의 기능과 Payload.js 기반 관리자 시스템이 특징입니다.", |
79 | 78 | "thumbnail": "/projects/imyourbox/imyourbox-main.mp4",
|
80 | 79 | "thumbnailOptions": { "playbackRate": 2.5 },
|
81 | 80 | "tags": ["웹", "풀스택"],
|
|
99 | 98 | "features": [
|
100 | 99 | "Payload.js를 활용한 관리자 페이지 구현",
|
101 | 100 | "데이터 CSV 형식으로 추출하는 기능 구현",
|
102 |
| - "Zod 와 React Hook Form을 활용한 데이터 검증", |
| 101 | + "Zod와 React Hook Form을 활용한 데이터 검증", |
103 | 102 | "기업 뉴스, 연혁, 지도, 공지사항을 관리할 수 있는 기능",
|
104 | 103 | "고객 문의 제출 및 이메일 전송 자동화",
|
105 | 104 | "Framer Motion을 활용한 Parallax 스크롤 애니메이션",
|
|
125 | 124 | },
|
126 | 125 | {
|
127 | 126 | "url": "/projects/imyourbox/imyourbox-parallax-example.mp4",
|
128 |
| - "description": "Parallax 스크롤 이펙트: Framer motion 을 활용하여 구현한 입체감 있는 스크롤 효과 입니다." |
| 127 | + "description": "Parallax 스크롤 이펙트: Framer Motion을 활용하여 구현한 입체감 있는 스크롤 효과입니다." |
129 | 128 | },
|
130 | 129 | {
|
131 | 130 | "url": "/projects/imyourbox/imyourbox-admin-collections.png",
|
132 |
| - "description": "관리자 대시보드: Payload.js를 통해 구현된 관리자 패널입니다. 회사 직원이 콘텐츠를 쉽게 관리할 수 있습니다. 회사 사이트 내의 공지사항 모달, 회사 뉴스, 회사 연혁, 회사의 위치 소개를 추가하고 삭제하며 관리하며 사이트의 컨텐츠를 관리할 수 있습니다. 또한 사이트를 통한 문의 내역을 저장하여 확인하고 수정할 수 있습니다." |
| 131 | + "description": "관리자 대시보드: Payload.js를 통해 구현된 관리자 패널입니다. 회사 직원이 콘텐츠를 쉽게 관리할 수 있습니다. 회사 사이트 내의 공지사항 모달, 회사 뉴스, 회사 연혁, 회사의 위치 소개를 추가하고 삭제하며 관리하고 사이트의 콘텐츠를 관리할 수 있습니다. 또한 사이트를 통한 문의 내역을 저장하여 확인하고 수정할 수 있습니다." |
133 | 132 | },
|
134 | 133 | {
|
135 | 134 | "url": "/projects/imyourbox/imyourbox-csv-example.mp4",
|
136 |
| - "description": "CSV 추출을 위한 커스텀 버튼: 요구사항에 맞춰 추가한 Payload 의 커스텀 컴포넌트로 Payload 에 저장된 고객 문의 사항들을 CSV 파일로 추출하는 기능을 구현한 버튼 입니다.", |
| 135 | + "description": "CSV 추출을 위한 커스텀 버튼: 요구사항에 맞춰 추가한 Payload의 커스텀 컴포넌트로 Payload에 저장된 고객 문의 사항들을 CSV 파일로 추출하는 기능을 구현한 버튼입니다.", |
137 | 136 | "showControls": true
|
138 | 137 | },
|
139 | 138 | {
|
|
142 | 141 | },
|
143 | 142 | {
|
144 | 143 | "url": "/projects/imyourbox/imyourbox-inquiry-example.mp4",
|
145 |
| - "description": "문의 기능: nodemailer를 활용하여 문의 내용을 회사 이메일로 전송하는 기능입니다. 전송과 동시에 문의 내용이 Payload api 를 활용하여 supabase에 저장됩니다.", |
| 144 | + "description": "문의 기능: nodemailer를 활용하여 문의 내용을 회사 이메일로 전송하는 기능입니다. 전송과 동시에 문의 내용이 Payload API를 활용하여 Supabase에 저장됩니다.", |
146 | 145 | "playbackRate": 2.5
|
147 | 146 | },
|
148 | 147 | {
|
149 | 148 | "url": "/projects/imyourbox/imyourbox-mail-blurry.png",
|
150 |
| - "description": "이메일 템플릿: 사이트를 통해 회사로 이메일이 전달됬을때의 디자인 입니다." |
| 149 | + "description": "이메일 템플릿: 사이트를 통해 회사로 이메일이 전달되었을 때의 디자인입니다." |
151 | 150 | }
|
152 | 151 | ],
|
153 | 152 | "publishPath": "project/imyourbox"
|
|
156 | 155 | "projectType": "project",
|
157 | 156 | "id": "lazy-trading",
|
158 | 157 | "title": "LazyTrading 크롬 확장프로그램",
|
159 |
| - "description": "Vite, React, Typescript, Tailwind CSS, ReactQuery, Light Weight Chart를 사용하여 개발한 크롬 확장 프로그램 입니다. 자동적으로 계산된 손절가와 진입 배율을 활용해 한번의 클릭으로 안전한 매매를 가능하게 하는것을 목적으로 하고있습니다.", |
| 158 | + "description": "Vite, React, Typescript, Tailwind CSS, ReactQuery, Light Weight Chart를 사용하여 개발한 크롬 확장 프로그램입니다. 자동으로 계산된 손절가와 진입 배율을 활용해 한 번의 클릭으로 안전한 매매를 가능하게 하는 것을 목적으로 합니다.", |
160 | 159 | "thumbnail": "/projects/lazy-trading/lazy-trading.png",
|
161 | 160 | "inDevelopment": true,
|
162 | 161 | "demoType": "images",
|
|
174 | 173 | "Tailwind CSS",
|
175 | 174 | "Shadcn UI",
|
176 | 175 | "Light Weight Chart",
|
177 |
| - "React Query" |
| 176 | + "React Query", |
| 177 | + "Crypto 모듈" |
178 | 178 | ],
|
179 | 179 | "githubUrl": "https://github.com/lazy-dinosaur/lazy-trading",
|
180 | 180 | "featured": true,
|
181 | 181 | "createdAt": "2023-10-15",
|
182 |
| - "overview": "가상화폐 거래소 바이낸스 웹사이트에서 사용할 수 있는 크롬 확장 프로그램으로, 안전한 거래를 위한 손절가 및 진입 배율을 자동으로 계산하여 빠르고 효율적인 트레이딩을 도와주는 도구입니다. 이 프로젝트에서는 보안을 위한 Crypto 모듈의 활용이 큰 특징입니다.", |
| 182 | + "overview": "가상화폐 거래소 바이낸스 웹사이트에서 사용할 수 있는 크롬 확장 프로그램으로, 안전한 거래를 위한 손절가 및 진입 배율을 자동으로 계산하여 빠르고 효율적인 트레이딩을 도와주는 도구입니다. 이 프로젝트에서는 API 키 보안을 위한 Crypto 모듈의 활용이 큰 특징입니다.", |
183 | 183 | "features": [
|
184 | 184 | "위험 관리를 위한 자동 손절가 계산 기능",
|
185 | 185 | "다양한 진입 배율 옵션 제공",
|
186 | 186 | "Light Weight Chart를 활용한 실시간 차트 시각화",
|
187 | 187 | "원클릭 주문 기능으로 빠른 거래 실행",
|
188 | 188 | "거래 히스토리 추적 및 분석",
|
| 189 | + "Crypto 모듈을 활용한 API 키 암호화 및 보안 관리", |
189 | 190 | "사용자 설정 저장 및 불러오기 기능"
|
190 | 191 | ],
|
191 | 192 | "lessons": "이 프로젝트를 통해 브라우저 확장 프로그램 개발 방법과 트레이딩 알고리즘 구현, 실시간 데이터 처리 및 시각화에 대한 경험을 쌓았습니다. 또한 사용자 인터페이스를 통한 복잡한 계산의 단순화 및 자동화 구현 방법을 익혔습니다.",
|
|
0 commit comments