junsobi

Menu

Close

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

Hero image

About Me

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

My

Projects

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

์˜ค๋„ˆ๊ทธ๋ผ์šด๋“œ ์ ์ฃผ์•ฑ

CirclePlatform

Expo + EAS Update ๊ธฐ๋ฐ˜ RN ์ ์ฃผ์•ฑ์˜ CI/CDยทOTA ๋ฐฐํฌ ํŒŒ์ดํ”„๋ผ์ธ ๋ฐ ์•ˆ์ •์„ฑ ์ธํ”„๋ผ ๋‹ด๋‹น.

React Native
Expo
TypeScript
EAS Update
Codemagic
GitHub Actions
Firebase
Slack
Infrastructureย architect
Frontendย developer

์นด๋ชจ (app-in-toss)

CirclePlatform

ํ† ์Šค ์•ฑ ๋‚ด ์œ„์น˜ ๊ธฐ๋ฐ˜ ์ปคํ”ผ ์ฃผ๋ฌธ ์›น๋ทฐ. SSE ์‹ค์‹œ๊ฐ„ ์ฃผ๋ฌธ ์ถ”์  + ๋Œ€๋Ÿ‰ ๋ฉ”๋‰ด ๋ฆฌ์ŠคํŠธ ๊ฐ€์ƒํ™” ๋‹ด๋‹น.

React 18
TypeScript
Vite
TanStack Router
TanStack Query
TanStack Virtual
@apps-in-toss/web-framework
Naver Map API
SSE
Tailwind CSS v4
Frontendย developer

์…€๋Ÿฌ๋ฐ•์Šค ์•ฑ
์…€๋Ÿฌ๋ฐ•์Šค ์•ฑ

CirclePlatform

์˜จ๋ผ์ธ ์…€๋Ÿฌ์šฉ React Native ์•ฑ. AWS S3 ๊ธฐ๋ฐ˜ CodePush ์ž์ฒด ๊ตฌ์ถ•๊ณผ CI/CDยท์•ˆ์ •์„ฑ ์ „๋ฐ˜ ๋‹ด๋‹น.

ReactNative
Expo
TypeScript
Redux Toolkit
React Query
Recoil
AWS S3
CodePush
Codemagic
Fastlane
GitHub Actions
Firebase
WebView
Frontendย developer

์…€๋Ÿฌ๋ฐ•์Šค ์›น
์…€๋Ÿฌ๋ฐ•์Šค ์›น

CirclePlatform

SellerBox ์›น ์ฝ˜์†”. ๊ฒฐ์ œ ์‹œ์Šคํ…œยทํฌ๋กฌ ํ™•์žฅ ์—ฐ๋™ยท๋ชจ๋‹ˆํ„ฐ๋ง ๊ธฐ๋ŠฅยทCI/CD๊นŒ์ง€ ํ”„๋ก ํŠธ์—”๋“œ ์ „๋ฐ˜์„ ๋ฉ”์ธ์œผ๋กœ ๋‹ด๋‹น.

Vite
TypeScript
React
Recoil
Tailwind CSS
React Query
Zod
React Hook Form
Radix UI
Chrome Extension
AWS S3
AWS CloudFront
Slack Notifications
Frontendย developer

์ ์ฃผ์•ฑ

CirclePlatform

๋งค๋จธ๋“œ ์ ์ฃผ์•ฑยท๋”๋ฆฌํ„ฐ ์ ์ฃผ์•ฑ์— ๊ณตํ†ต WebView ์…ธ๊ณผ S3 ๊ธฐ๋ฐ˜ CodePush๋ฅผ ์ด์‹ํ•ด ๋ฐฐํฌ ํ‘œ์ค€์„ ๋งŒ๋“  ์ž‘์—….

React Native
Expo
TypeScript
WebView
CodePush
AWS S3
Fastlane
Frontendย developer
Infrastructureย architect

ํŒ”๋ž‘

CirclePlatform

Next.js 15 ๊ธฐ๋ฐ˜ ์†Œ์ƒ๊ณต์ธ ํŒ๋งค ํ”Œ๋žซํผ. seller / buyer / admin 3๊ฐœ ์•ฑ๊ณผ ๊ณต์œ  UI ํŒจํ‚ค์ง€๋กœ ๊ตฌ์„ฑ๋œ Turbo ๋ชจ๋…ธ๋ ˆํฌ.

Next.js 15
TypeScript
Turbo
RSC
Tailwind CSS
Framer Motion
Vaul
AWS Lambda
AWS S3
Frontendย developer

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 ์‚ฌ์ง„ ํŽธ์ง‘ ํ”Œ๋žซํผ. Stable Diffusion + WebSocket ๊ธฐ๋ฐ˜.

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

My Experience

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

CirclePlatform

2025.03 - ์žฌ์ง ์ค‘

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

์…€๋Ÿฌ๋ฐ•์Šค ์›น๋ฒ„์ „ ์ถœ์‹œ๋ฅผ ์ฃผ๋„ํ•˜๊ณ , CUX ํ”„๋กœ์ ํŠธ์—์„œ ์ธ๊ณต์ง€๋Šฅ ์„œ๋น„์Šค์˜ UI/UX๋ฅผ ์„ค๊ณ„ ๋ฐ ๊ฐœ๋ฐœํ–ˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ๋งค๋จธ๋“œ, ๋”๋ฆฌํ„ฐ ์ ์ฃผ์•ฑ์„ ๊ฐœ๋ฐœํ•˜๋ฉฐ ๋‹ค์–‘ํ•œ ํ”„๋žœ์ฐจ์ด์ฆˆ ํ”Œ๋žซํผ์˜ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๊ฐœ์„ ํ•˜๋Š” ๋ฐ ๊ธฐ์—ฌํ–ˆ์Šต๋‹ˆ๋‹ค.


Aivill

2023.12 - 2025.03

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

์ธ๊ณต์ง€๋Šฅ ๊ธฐ๋ฐ˜ ์†”๋ฃจ์…˜๊ณผ ์‚ฌ์šฉ์ž ์นœํ™”์ ์ธ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์„ค๊ณ„ ๋ฐ ๊ฐœ๋ฐœํ•˜๋ฉฐ, ์„ฑ๋Šฅ ์ตœ์ ํ™”์™€ 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

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