junsobi

Menu

Close

๋งŒ๋‚˜์„œ ๋ฐ˜๊ฐ€์›Œ์š” ๐Ÿ‘‹
์ €๋Š”
๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š”
Fixer
์ž…๋‹ˆ๋‹ค.
๐Ÿ› 

Hero image

About Me

๊ธฐ์ˆ ๊ณผ ์ฐฝ์˜๋ ฅ์„ ํ™œ์šฉํ•ด ์‚ฌ์šฉ์ž์—๊ฒŒ ๋” ๋‚˜์€ ๊ฒฝํ—˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

My

Projects

๋‹ค์–‘ํ•œ ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด ํ”„๋ก ํŠธ์—”๋“œ ๋ถ„์•ผ์˜ ์—ญ๋Ÿ‰์„ ํ‚ค์›Œ๊ฐ€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
๋” ๋‚˜์€ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•ด ๋Š์ž„์—†์ด ๋…ธ๋ ฅํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

Aitoon
Aitoon

Aivill

์›นํˆฐ ์ƒ์„ฑ ๊ณผ์ •์„ ํ˜์‹ ์ ์œผ๋กœ ์ง€์›ํ•˜๋Š” AI ๊ธฐ๋ฐ˜ ํ”Œ๋žซํผ

Vite
JavaScript
React
Recoil
Tailwind CSS
WebSockets
Zod
React Hook Form
Vercel Deployment
Canvas Integration
Stable Diffusion API
Frontendย developer
UI/UXย Designer
Productย Manager

Photolabs
Photolabs

Aivill

๋ชจ๋ธ ๋ฐ ์‚ฌ์ง„ ์ž‘์—…์„ ์œ„ํ•œ AI ๊ธฐ๋ฐ˜ ํ”Œ๋žซํผ

Vite
TypeScript
React
React Query
Zustand
Tailwind CSS
WebSockets
Zod
React Hook Form
Vercel Deployment
Canvas Integration
Stable Diffusion API
i18n
Frontendย Developer

๐Ÿ“† Todo App

Toy Project

BDD(ํ–‰์œ„ ์ฃผ๋„ ๊ฐœ๋ฐœ)๊ธฐ๋ฒ•์„ ํ™œ์šฉํ•œ Todo App

Next.js
React Query
Axios
Recoil
TypeScript
Jest
Playwright
Firebase
Vercel Deployment
Frontendย developer
UI/UXย Designer
Backendย Developer

๐Ÿ‘ž Wagki Project

Genuio

Three.js๋ฅผ ํ™œ์šฉํ•œ ์‹ ๋ฐœ ์ปค์Šคํ„ฐ๋งˆ์ด์ง•

Svelte
Three.js
WebGL
Tailwind CSS
Frontendย developer
UI/UXย Designer

๐Ÿ•๏ธ Camping App

Wecode

D3๋ฅผ ํ™œ์šฉํ•œ ์บ ํ•‘์žฅ ์กฐ๊ฐ๋„ ์„ ํƒ๊ธฐ๋Šฅ ์ œ๊ณต ์‚ฌ์ดํŠธ

React
Redux
D3
Styled-components
AWS S3
Frontendย developer
UI/UXย Designer

My Experience

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ์—ญ๋Ÿ‰์„ ํ‚ค์›Œ๋‚˜๊ฐ€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

Aivill

2023.12 - ์žฌ์ง ์ค‘

์ „์ž„ ์—ฐ๊ตฌ์›

์ธ๊ณต์ง€๋Šฅ ๊ธฐ๋ฐ˜ ์†”๋ฃจ์…˜๊ณผ ์‚ฌ์šฉ์ž ์นœํ™”์ ์ธ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์„ค๊ณ„ ๋ฐ ๊ฐœ๋ฐœํ•˜๋ฉฐ, ์„ฑ๋Šฅ ์ตœ์ ํ™”์™€ UX ๊ฐœ์„ ์— ์ค‘์ ์„ ๋‘๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ตœ์‹  ํ”„๋ก ํŠธ์—”๋“œ ๊ธฐ์ˆ ์„ ํ™œ์šฉํ•˜๋ฉฐ ํ”„๋กœ์ ํŠธ ์š”๊ตฌ์‚ฌํ•ญ์„ ํšจ์œจ์ ์œผ๋กœ ๋ฐ˜์˜ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.


์›ํ‹ฐ๋“œ ํ”„๋ฆฌ์˜จ๋ณด๋”ฉ

2023.09 - 2023.11

ํ”„๋ก ํŠธ์—”๋“œ 12๊ธฐ

์—ฌ๋Ÿฌ ํ”„๋กœ์ ํŠธ๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ํŒ€ ํ˜‘์—… ๋ฐ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ๊ฒฝํ—˜์„ ์Œ“์•˜์Šต๋‹ˆ๋‹ค. TypeScript์™€ React๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์œ ์ง€๋ณด์ˆ˜์„ฑ๊ณผ ํ™•์žฅ์„ฑ์ด ๋†’์€ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋ฉฐ, Test code ์ž‘์„ฑ์„ ํ†ตํ•œ ์•ˆ์ •์ ์ธ ์„œ๋น„์Šค ๊ตฌ์ถ• ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ํ•™์Šตํ–ˆ์Šต๋‹ˆ๋‹ค.


์ œ๋ˆ„์ด์˜ค

2023.07 - 2023.09

์ธํ„ด์‰ฝ

Wagki ํ”„๋กœ์ ํŠธ์— ์ฐธ์—ฌํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ ์„ค๊ณ„ ๋ฐ ๊ฐœ๋ฐœ์„ ๋‹ด๋‹นํ•˜์˜€์Šต๋‹ˆ๋‹ค. ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™”์™€ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜ ๊ฐœ์„  ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋ฉฐ, 3D ๊ตฌ๋‘ ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ๊ฐœ๋ฐœ์— ์ฐธ์—ฌํ–ˆ์Šต๋‹ˆ๋‹ค.


Wecode Bootcamp

2023.01 - 2023.06

ํ”„๋ก ํŠธ์—”๋“œ ๊ณผ์ • ์ˆ˜๋ฃŒ

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ์ „๋ฐ˜์— ๊ฑธ์นœ ์‹ค๋ฌด ์ง€์‹์„ ํ•™์Šตํ•˜๋ฉฐ React, JavaScript, CSS ๋“ฑ์˜ ํ•ต์‹ฌ ๊ธฐ์ˆ ์„ ์ตํ˜”์Šต๋‹ˆ๋‹ค. ํŒ€ ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด Agile ๋ฐฉ๋ฒ•๋ก ๊ณผ ํ˜‘์—… ๋„๊ตฌ๋ฅผ ํ™œ์šฉํ•œ ๊ฐœ๋ฐœ ๊ฒฝํ—˜์„ ์Œ“์•˜์Šต๋‹ˆ๋‹ค.


My Tools

๋‹ค์–‘ํ•œ ๋„๊ตฌ๋“ค์„ ์‚ฌ์šฉํ•˜๋ฉฐ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

RESTful API

RESTful API

Github API๋ฅผ ํ™œ์šฉํ•œ ํ”„๋กœ์ ํŠธ ๊ฒฝํ—˜์ด ์žˆ์Šต๋‹ˆ๋‹ค. RESTful API ์„ค๊ณ„ ์›์น™์„ ์ดํ•ดํ•˜๋ฉฐ, ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„ ๊ฐ„ ํšจ์œจ์ ์ธ ๋ฐ์ดํ„ฐ ํ†ต์‹ ์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ, ๋‹ค์–‘ํ•œ API ์š”์ฒญ์„ ์ฒ˜๋ฆฌํ•˜๋ฉฐ ๋ฐ์ดํ„ฐ ์บ์‹ฑ ๋ฐ ์—๋Ÿฌ ํ•ธ๋“ค๋ง ์ „๋žต์„ ์ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

AWS

AWS

AWS S3๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ •์  ์›น์‚ฌ์ดํŠธ ๋ฐ ํ”„๋กœ์ ํŠธ๋ฅผ ๋ฐฐํฌํ•œ ๊ฒฝํ—˜์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์„œ๋ฒ„๋ฆฌ์Šค ํ™˜๊ฒฝ์—์„œ์˜ ํŒŒ์ผ ์ €์žฅ ๋ฐ ๊ด€๋ฆฌ ๋Šฅ๋ ฅ์„ ๋ณด์œ ํ•˜๊ณ  ์žˆ์œผ๋ฉฐ, CloudFront์™€ ๊ฒฐํ•ฉํ•˜์—ฌ CDN์„ ํ†ตํ•ด ์ตœ์ ํ™”๋œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ถ”๊ฐ€์ ์œผ๋กœ, IAM ์„ค์ •์„ ํ†ตํ•ด ๋ณด์•ˆ ์ˆ˜์ค€์„ ๊ฐ•ํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Next.js

Next.js

Next.js๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง(SSR)๊ณผ ์ •์  ์ƒ์„ฑ(SGG)์„ ๊ตฌํ˜„ํ•œ ๊ฒฝํ—˜์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ดˆ๊ธฐ ํŽ˜์ด์ง€ ๋กœ๋”ฉ ์†๋„๋ฅผ ์ตœ์ ํ™”ํ•˜๊ณ  SEO ์„ฑ๋Šฅ์„ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ, API ๋ผ์šฐํŠธ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ๋ฐฑ์—”๋“œ ์ž‘์—…์„ ๊ฐ„์†Œํ™”ํ•˜๊ณ , ํšจ์œจ์ ์ธ ๋ฐ์ดํ„ฐ ํŒจ์นญ ๋ฐ ์บ์‹ฑ์„ ํ†ตํ•ด ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๊ฐœ์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

React Query

React Query

React Query๋ฅผ ํ™œ์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ ์บ์‹ฑ, ๋น„๋™๊ธฐ ๋ฐ์ดํ„ฐ ํŒจ์นญ, ๋ฐ์ดํ„ฐ ์—…๋ฐ์ดํŠธ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํด๋ผ์ด์–ธํŠธ ์ƒํƒœ์™€ ์„œ๋ฒ„ ์ƒํƒœ๋ฅผ ๊ตฌ๋ถ„ํ•˜์—ฌ ๊ด€๋ฆฌํ•˜๋ฉฐ, prefetching๊ณผ optimistic update๋ฅผ ํ†ตํ•ด ๋ถ€๋“œ๋Ÿฌ์šด ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

Svelte Kit

Svelte Kit

Svelte Kit์„ ์‚ฌ์šฉํ•˜์—ฌ ๋น ๋ฅด๊ฒŒ ์ƒˆ๋กœ์šด ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์Šต๋“ํ•˜๊ณ  ํ”„๋กœ์ ํŠธ์— ์ ์šฉํ•œ ๊ฒฝํ—˜์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ปดํŒŒ์ผ๋Ÿฌ ๊ธฐ๋ฐ˜ ํ”„๋ ˆ์ž„์›Œํฌ์˜ ํŠน์ง•์„ ์ดํ•ดํ•˜๊ณ  ์žˆ์œผ๋ฉฐ, ๋นŒ๋“œ ์„ฑ๋Šฅ ์ตœ์ ํ™”์™€ ๋™์  ๋ผ์šฐํŒ…์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Three.js

Three.js

Three.js๋ฅผ ํ™œ์šฉํ•˜์—ฌ 3D ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ฐ ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ์›น ์ฝ˜ํ…์ธ ๋ฅผ ๊ฐœ๋ฐœํ•œ ๊ฒฝํ—˜์ด ์žˆ์Šต๋‹ˆ๋‹ค. GLB ํŒŒ์ผ๊ณผ ๊ฐ™์€ 3D ๋ชจ๋ธ ํŒŒ์ผ์„ ๋กœ๋“œํ•˜๊ณ , ๊ฐ์ฒด์˜ ํšŒ์ „, ์ด๋™, ์Šค์ผ€์ผ ์กฐ์ •์„ ํ†ตํ•ด ๋‹ค์–‘ํ•œ 3D ํšจ๊ณผ๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ, ์นด๋ฉ”๋ผ์™€ ๋ผ์ดํŠธ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ํ˜„์‹ค๊ฐ ์žˆ๋Š” ์žฅ๋ฉด์„ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

TypeScript

TypeScript

์ด ํฌํŠธํด๋ฆฌ์˜ค๋ฅผ ๋น„๋กฏํ•œ ์—ฌ๋Ÿฌ ํ”„๋กœ์ ํŠธ์—์„œ TypeScript๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์•ˆ์ •์ ์ธ ์ฝ”๋“œ๋ฒ ์ด์Šค๋ฅผ ๊ตฌ์ถ•ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ •์  ํƒ€์ž… ์ฒดํฌ๋ฅผ ํ†ตํ•ด ์ฝ”๋“œ ํ’ˆ์งˆ์„ ๋†’์ด๊ณ , ๋ณต์žกํ•œ ํƒ€์ž… ์ •์˜์™€ ์œ ํ‹ธ๋ฆฌํ‹ฐ ํƒ€์ž…์„ ํ™œ์šฉํ•˜์—ฌ ์ƒ์‚ฐ์„ฑ์„ ํ–ฅ์ƒ์‹œ์ผฐ์Šต๋‹ˆ๋‹ค.

React Hook Form

React Hook Form

React Hook Form์„ ํ™œ์šฉํ•˜์—ฌ ์‚ฌ์šฉ์ž ์ž…๋ ฅ์„ ๊ฐ„๋‹จํ•˜๊ณ  ํšจ์œจ์ ์œผ๋กœ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. validation schema์™€ ํ•จ๊ป˜ Zod ๋˜๋Š” Yup์„ ํ†ตํ•ฉํ•˜์—ฌ ์ž…๋ ฅ ๊ฒ€์ฆ์„ ๊ตฌํ˜„ํ•˜๊ณ , ์‚ฌ์šฉ์ž ์นœํ™”์ ์ธ ํผ์„ ๊ฐœ๋ฐœํ–ˆ์Šต๋‹ˆ๋‹ค.

WebSockets

WebSockets

WebSocket์„ ์‚ฌ์šฉํ•˜์—ฌ ์‹ค์‹œ๊ฐ„ ๋ฐ์ดํ„ฐ ์ „์†ก์„ ๊ตฌํ˜„ํ•œ ๊ฒฝํ—˜์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ฑ„ํŒ… ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๊ณผ ์‹ค์‹œ๊ฐ„ ์•Œ๋ฆผ ์‹œ์Šคํ…œ์„ ๊ฐœ๋ฐœํ•˜๋ฉฐ, ์•ˆ์ •์ ์ธ ์—ฐ๊ฒฐ ์ƒํƒœ ๊ด€๋ฆฌ์™€ ํšจ์œจ์ ์ธ ๋ฐ์ดํ„ฐ ์†ก์ˆ˜์‹ ์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

i18n

i18n

i18n ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‹ค๊ตญ์–ด ์ง€์› ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์ถ•ํ•œ ๊ฒฝํ—˜์ด ์žˆ์Šต๋‹ˆ๋‹ค. JSON ๊ธฐ๋ฐ˜์˜ ์–ธ์–ด ํŒŒ์ผ ๊ด€๋ฆฌ์™€ ๋™์  ๋ฒˆ์—ญ ๋กœ๋”ฉ์„ ํ†ตํ•ด ๋‹ค์–‘ํ•œ ์‚ฌ์šฉ์ž์ธต์„ ์œ„ํ•œ ๊ธ€๋กœ๋ฒŒ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ–ˆ์Šต๋‹ˆ๋‹ค.

Tailwind CSS

Tailwind CSS

Tailwind CSS๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํšจ์œจ์ ์ด๊ณ  ๋ฐ˜์‘ํ˜•์ธ UI๋ฅผ ์„ค๊ณ„ํ–ˆ์Šต๋‹ˆ๋‹ค. ์œ ํ‹ธ๋ฆฌํ‹ฐ ํด๋ž˜์Šค ๊ธฐ๋ฐ˜ ์Šคํƒ€์ผ๋ง์„ ํ†ตํ•ด ๊ฐœ๋ฐœ ์†๋„๋ฅผ ๊ฐœ์„ ํ•˜๊ณ , ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ์˜ต์…˜์„ ํ™œ์šฉํ•˜์—ฌ ํ”„๋กœ์ ํŠธ ์š”๊ตฌ์‚ฌํ•ญ์— ๋งž๋Š” ๋””์ž์ธ์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

D3.js

D3.js

D3.js๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™”๋ฅผ ๊ตฌํ˜„ํ•œ ๊ฒฝํ—˜์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ณต์žกํ•œ ๋ฐ์ดํ„ฐ ์„ธํŠธ๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ํ‘œํ˜„ํ•˜๊ณ , ์‚ฌ์šฉ์ž ์ธํ„ฐ๋ž™์…˜์ด ๊ฐ€๋Šฅํ•œ ๋Œ€์‹œ๋ณด๋“œ๋ฅผ ์ œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. SVG, Canvas๋ฅผ ์‚ฌ์šฉํ•œ ์ปค์Šคํ…€ ๊ทธ๋ž˜ํ”„์™€ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ œ์ž‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

OpenGraph

OpenGraph

OpenGraph ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์›น์‚ฌ์ดํŠธ์˜ ์†Œ์…œ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ฅผ ์ตœ์ ํ™”ํ•œ ๊ฒฝํ—˜์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฉ”ํƒ€ ํƒœ๊ทธ๋ฅผ ์„ค์ •ํ•˜๊ณ , ์ด๋ฏธ์ง€, ์ œ๋ชฉ, ์„ค๋ช…์„ ๋™์ ์œผ๋กœ ๋ณ€๊ฒฝํ•˜์—ฌ ์†Œ์…œ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ฅผ ์ปค์Šคํ„ฐ๋งˆ์ด์ง•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Contact Me

์งˆ๋ฌธ์ด๋‚˜ ์ œ์•ˆ์ด ์žˆ์œผ์‹œ๋ฉด ์–ธ์ œ๋“ ์ง€ ์—ฐ๋ฝ์ฃผ์„ธ์š” ๐Ÿค™