Skip to content
View ddalpange's full-sized avatar
๐Ÿค 
GOOD!!
๐Ÿค 
GOOD!!

Block or report ddalpange

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Maximum 250 characters. Please don't include any personal information such as legal names or email addresses. Markdown supported. This note will be visible to only you.
Report abuse

Contact GitHub support about this userโ€™s behavior. Learn more about reporting abuse.

Report abuse
ddalpange/README.md

๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป Yohan Kim

ddalpange@gmail.com

์žฌ๋ฏธ์žˆ๊ฒŒ ์ผํ•  ์ˆ˜ ์žˆ๋Š” ํšŒ์‚ฌ๋ฅผ ์ฐพ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

  • ๋ถ„์•ผ๋ฅผ ๊ตฌ๋ถ„ํ•˜์ง€ ์•Š๊ณ  "์ผ์ด ๋˜๋Š” ๊ฒƒ"์— ์ดˆ์ ์„ ๋งž์ถฅ๋‹ˆ๋‹ค.
  • ๋ฌธ์ œ ํ•ด๊ฒฐ ๋…ผ์˜, ๋””์ž์ธ UI/UX, ๋ฐ์ดํ„ฐ ๊ธฐ๋ฐ˜ ์ œํ’ˆ ๊ฐœ๋ฐœ, ์œ ์ € ์ธํ„ฐ๋ทฐ, ์˜คํ”„๋ผ์ธ ์˜์—… ๋“ฑ ์ œํ’ˆ์„ ๋งŒ๋“œ๋Š” ๊ฒƒ์— ์˜์—ญ์„ ๋”ฐ์ง€์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
  • ์ œํ’ˆ ์„ฑํ–ฅ์˜ ์—”์ง€๋‹ˆ์–ด์ด์ง€๋งŒ, ์ œํ’ˆ ํ™•์žฅ์— ๋”ฐ๋ฅธ ๋ณต์žก์„ฑ์„ ํ•ด์†Œํ•˜๊ธฐ ์œ„ํ•œ ํ”Œ๋žซํผ์—์„œ์˜ ๊ฐœ์„ ์—๋„ ๊ด€์‹ฌ์ด ๋งŽ์Šต๋‹ˆ๋‹ค.
  • ํ”ผ๋“œ๋ฐฑ์— ๋Œ€ํ•ด ์—ด๋ ค์žˆ์Šต๋‹ˆ๋‹ค. ์„ธ์‹ฌํ•œ ํ”ผ๋“œ๋ฐฑ์„ ์ฃผ๋ ค ๋…ธ๋ ฅํ•˜๊ณ , ์‚ฌ์†Œํ•œ ํ”ผ๋“œ๋ฐฑ๋„ ๋†“์น˜์ง€ ์•Š์œผ๋ ค ์ฃผ์˜๋ฅผ ๊ธฐ์šธ์ž…๋‹ˆ๋‹ค.
  • ํšŒ๋ณต ํƒ„๋ ฅ์„ฑ์ด ๊ฐ•ํ•˜๊ณ  ๊ฐ€์„ค ๊ฒ€์ฆ ๊ธฐ๋ฐ˜์˜ ๋””๋ฒ„๊น… ๋Šฅ๋ ฅ์ด ์šฐ์ˆ˜ํ•ฉ๋‹ˆ๋‹ค.
  • ๊ธฐ๋‘ฅ์„ 2cm ์˜ฎ๊ธฐ๋Š” ์ผ๋“ค์„ ์ž˜ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ“Œ Work Experience

๋‹น๊ทผ๋งˆ์ผ“ (2023.04 ~ ํ˜„์žฌ)

์ค‘๊ณ ์ฐจํŒ€ ์†Œํ”„ํŠธ์›จ์–ด ์—”์ง€๋‹ˆ์–ด

5~15๋ช… ๊ทœ๋ชจ์˜ ๋ฒ„ํ‹ฐ์ปฌ ์‚ฌ์—…ํŒ€์—์„œ ์ค‘๊ณ ์ฐจ ์‹œ์žฅ์˜ 1๋“ฑ์„ ์ง€ํ–ฅํ•˜๋ฉฐ, ์ง๊ฑฐ๋ž˜ ๊ธฐ๋ฐ˜ ์„œ๋น„์Šค์˜ 1โ†’10 ์„ฑ์žฅ์„ ์ด๋Œ์—ˆ์Šต๋‹ˆ๋‹ค. โ€œ๊ฑฐ๋ž˜๊ฐ€ ๋Š˜๋ ค๋ฉด ๊ณ ๊ฐ์˜ ๊ฑฐ๋ž˜๋น„์šฉ(๋…ธ๋ ฅ)์ด ์ค„์–ด์•ผ ํ•œ๋‹คโ€๋Š” ๊ฐ€์„ค ์•„๋ž˜, ๋น ๋ฅด๊ณ  ๊ณต๊ฒฉ์ ์ธ ์‹คํ—˜ ๋ฌธํ™” ์†์—์„œ ํŽธ์˜์„ฑ/์‹ ๋ขฐ๋ฅผ ๋งŒ๋“œ๋Š” ์ œํ’ˆ์„ ๋ฐ˜๋ณต์ ์œผ๋กœ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ๋Œ€ํ‘œ์ ์œผ๋กœ ์ „๋ฌธ๊ฐ€ ๊ธฐ๋ฐ˜ ๊ฐ€๊ฒฉ ์ถ”์ฒœ, ์ฐจ๋Ÿ‰ ๊ฐ์ •(๊ฒ€์ˆ˜) ์‹คํ—˜, ๊ทธ๋ฆฌ๊ณ  ๋”œ๋Ÿฌยท์ง„๋‹จยทํด๋ ˆ์ž„ยทํƒ์†ก๊นŒ์ง€ ํฌํ•จํ•œ ๋ณต์žก๋„ ๋†’์€ ๊ฑฐ๋ž˜ ํ”Œ๋กœ์šฐ๋ฅผ ์„ค๊ณ„ยท๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ ๊ฒฐ๊ณผ(์ง€ํ‘œ๋Š” ๋ณด์•ˆ์ƒ ๊ทผ์‚ฌ์น˜) MAU 500๋งŒ+, ์›” ๊ฒŒ์‹œ๊ธ€ 1๋งŒ5์ฒœ+, ์›” ๊ฑฐ๋ž˜์™„๋ฃŒ 1๋งŒ+ ๊ทœ๋ชจ๋กœ ์„ฑ์žฅ์— ๊ธฐ์—ฌํ–ˆ๊ณ , ๋‚˜์•„๊ฐ€ ์™„์ „ ๋น„๋Œ€๋ฉด C2B ๋‚ด์ฐจํŒ”๊ธฐ๋ฅผ 0โ†’1๋กœ ๊ตฌํ˜„ํ•ด 1๋…„ ๋งŒ์— ๊ฑฐ๋ž˜์ „ํ™˜์œจ 20%+, ์›” ๊ฒฝ๋งค 1๋งŒ+, ๋”œ๋Ÿฌ 4์ฒœ+๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ๊ณ ๊ฐ๊ณผ ์‹œ์žฅ์— ๊ด€์‹ฌ์„ ๊ฐ€์ง€๊ณ  ์ œํ’ˆ์„ ๋งŒ๋“œ๋Š” ๋ฉ”์ด์ปคํ˜• ์—”์ง€๋‹ˆ์–ด์ž…๋‹ˆ๋‹ค.

1. Business Asset (์ง„๋‹จ)

์ง„๋‹จ ํ”„๋กœ์„ธ์Šค ๊ตฌ์ถ•

  • ์ง„๋‹จ์‚ฌ ์ง„๋‹จ ํ”„๋กœ์„ธ์Šค ์ „์ฒด ๊ฐœ๋ฐœ
    • ์ง„๋‹จ์‚ฌ ๊ฐ€์ž… / ์ง„๋‹จ ๊ฐ€์ด๋“œ / ์ฐจ๋Ÿ‰ ๋ฐ์ดํ„ฐ ๊ธฐ๋ฐ˜ ๋ฌธ์ง„ํ‘œ / ์ง„๋‹จ ์˜ˆ์•ฝ ๊ด€๋ฆฌ / ์ง„๋‹จ์‚ฌ ์ง„๋‹จ ์ฒดํฌ๋ฆฌ์ŠคํŠธ ํŽ˜์ด์ง€
  • 100์—ฌ ๊ฐ€์ง€๊ฐ€ ๋„˜๋Š” ํ•ญ๋ชฉ / ํƒ€์ž…๋“ค์„ ์ฝ”๋“œ ์Šคํ‚ค๋งˆ๋กœ ๋งŒ๋“  ์ดํ›„ ํƒ€์ดํ•‘์„ ์—ญ์—ฐ์‚ฐํ•˜์—ฌ ํ…Œ์ŠคํŠธ ๊ฐœ๋…์œผ๋กœ ํƒ€์ž… ์ปดํŒŒ์ผ ํƒ€์ž„์— ์•ˆ์ •์„ฑ ํ™•๋ณด
  • ์žฆ์€ ๋ณ€ํ™” ์†์—์„œ ์ฃผ๋„์  ํ˜‘์—…์œผ๋กœ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜ ๊ฐญ ์ตœ์†Œํ™”

์ง„๋‹จ ๋น„์ฆˆ๋‹ˆ์Šค ์‹คํ—˜

  • ์ง„๋‹จ ์„œ๋น„์Šค ์œ ๋ฃŒํ™” ์‹คํ—˜
  • ์ง„๋‹จ ์˜ˆ์•ฝ ํผ๋„ ๊ทธ๋กœ์Šค A/B ํ…Œ์ŠคํŠธ
  • ๋ณด์ฆ ์œ ๋ฃŒํ™” ์‹คํ—˜

์ง„๋‹จ ์‹œ์Šคํ…œ ๊ณ ๋„ํ™”

  • ์ง„๋‹จ๋ฆฌํฌํŠธ์˜ Graphql Schema๊ฐ€ ์ง€๋‚˜์น˜๊ฒŒ ๋ณต์žกํ•ด Record๋กœ ๊ฐœ์„ 
    • 100์—ฌ ๊ฐœ ํ•ญ๋ชฉ์˜ ์žฆ์€ ๋ณ€๊ฒฝ์œผ๋กœ ๋ฐฑ์—”๋“œ ์Šคํ‚ค๋งˆ ์‹ฑํฌ ๋น„์šฉ ๊ธ‰์ฆ
    • GraphQL schema์—์„œ๋Š” Object๋กœ ๋А์Šจํ•˜๊ฒŒ ๊ด€๋ฆฌ
    • ๋ณ„๋„ type + validation ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ž์ฒด ๊ฐœ๋ฐœ
    • ํ”„๋ก ํŠธ์—”๋“œ-๋ฐฑ์—”๋“œ ๋กœ์ง ํ†ต์ผ๋กœ ์Šคํ‚ค๋งˆ ๋ถˆ์ผ์น˜ ๊ณ ํ†ต ํ•ด์†Œ
  • ์ง„๋‹จ์‚ฌ ์›น๋ทฐ ๋ถ„๋ฆฌ
    • ๋…๋ฆฝ ํ”„๋กœ์ ํŠธ๋กœ ๋ถ„๋ฆฌํ•˜์—ฌ ์ปดํŒŒ์ผ ์‹œ๊ฐ„ ๋‹จ์ถ•
    • ๋ฐฐํฌ ์•ˆ์ •์„ฑ ๋ฐ ๋…๋ฆฝ์„ฑ ํ™•๋ณด
  • ๋ฆด๋ ˆ์ด Fragment ๊ธฐ๋ฐ˜ ์ง„๋‹จ๋ฆฌํฌํŠธ ์ค‘์•™ ๊ด€๋ฆฌ
    • ๋ฉ€ํ‹ฐํ”„๋กœ์ ํŠธ์—์„œ ๊ณตํ†ต ๋ฐ์ดํ„ฐ ํŒจ์นญ ๋กœ์ง ์ค‘์•™์ง‘์ค‘ํ™”
    • ํ”„๋กœ์ ํŠธ๋ณ„ ๋ฐ์ดํ„ฐ ์œ„๊ณ„ ๋ถˆ์ผ์น˜ ๋ฌธ์ œ ํ•ด์†Œ โ†’ ํด๋ ˆ์ž„ ๋ฆฌ์Šคํฌ ์ œ๊ฑฐ

์ง„๋‹จ ํ’ˆ์งˆ ๊ฐœ์„ 

  • ์ง„๋‹จ์‚ฌ ๊ณผ์ง„๋‹จ ํ•ด๊ฒฐ
    • ํƒ€์‚ฌ ๋Œ€๋น„ ์ •์„ฑ์  ์ •๋ณด ์ˆ˜์ง‘๋Ÿ‰์ด ๋งŽ์•„ ์ง„๋‹จ์‚ฌ๋“ค์ด ํด๋ ˆ์ž„ ๋ถ€๋‹ด์œผ๋กœ ๊ณผ์ง„๋‹จํ•˜๋Š” ํ˜„์ƒ ๋ฐœ๊ฒฌ
    • ํƒ€์‚ฌ ๋ ˆํผ๋Ÿฐ์Šค์™€ ํ˜„์ƒ-์†”๋ฃจ์…˜ ๋ถ„์„
    • ์ง„๋‹จ ์ˆ˜์ง‘ ๋‹จ์œ„ ์กฐ์ •, ๋”œ๋Ÿฌ ๊ณ ์ง€์ˆ˜์ค€ ๋ถ„๋ฆฌ
    • ๊ฒฝ๋งค์™„๋ฃŒ์œจ์— ์˜ํ–ฅ ์—†์ด ์ •๋ณด ์ˆ˜์ค€ ์ ์ ˆํžˆ ๋ณด์ •
  • ์ง„๋‹จ์‚ฌ ์ˆ˜์ •์š”์ฒญ ์ž๋™ํ™”
    • ๊ธฐ์กด: ๋ฐด๋“œ/๋ฌธ์ž/์ „ํ™” ๋“ฑ ๋‹ค์–‘ํ•œ ๊ฒฝ๋กœ๋กœ ์ˆ˜์ • ์š”์ฒญ โ†’ ๋†’์€ ์˜คํผ๋ ˆ์ด์…˜ ์ฝ”์ŠคํŠธ
    • ์ˆ˜์ • ์š”์ฒญ ์‹œ์ ์— ๋”ฐ๋ฅธ ์ฑ…์ž„์†Œ์ง€ ๋ณ€ํ™” ๊ณ ๋ คํ•œ ์ž๋™ํ™” ํ”Œ๋กœ์šฐ ๊ตฌํ˜„
    • ๊ฒฝ๋งค ์ธ์ž… ์ฆ๊ฐ€๋ฅผ ์œ„ํ•œ ์„ ํ–‰ ๊ณผ์ œ ํ•ด๊ฒฐ

2. C2B (๊ฐœ์ธ-๋”œ๋Ÿฌ ๊ฒฝ๋งค)

์ค‘๊ณ ์ฐจ ๊ฒฝ๋งค ์„œ๋น„์Šค ๊ตฌ์ถ•

  • ์ค‘๊ณ ์ฐจ ๊ฒฝ๋งค ์„œ๋น„์Šค ์ „์ฒด ๊ตฌํ˜„
  • ์ƒํƒœ-ํŽ˜์ด์ง€ ๊ฒฉ๋ฆฌ ์•„ํ‚คํ…์ฒ˜ ์„ค๊ณ„
    • ์ง„๋‹จ / ๊ฒฝ๋งค / ๋งค์ž… / ์ •์‚ฐ ๊ตฌ์กฐ๋กœ ์ด๋ฃจ์–ด์ง€๋Š” 4๊ฐ€์ง€ ๋ณ‘๋ ฌ ์ƒํƒœ๋ฅผ view ๋ณ„๋กœ ์ง๋ ฌ๋กœ ๋งŒ๋“ค์–ด ๊ด€๋ฆฌ
    • ๊ฐ•ํƒ€์ž… ์ปดํŒŒ์ผ ๊ตฌ์กฐ๋กœ ์ƒํƒœ ๋งค์นญ ๋ˆ„๋ฝ์„ ์‚ฌ์ „ ์ฐจ๋‹จ
    • ์œ ์ง€๋ณด์ˆ˜ ์šฉ์ดํ•œ ๊ตฌ์กฐ๋กœ ํ›„์† ๊ฐœ๋ฐœ์ž ์˜จ๋ณด๋”ฉ ๋น„์šฉ ์ ˆ๊ฐ
  • UI ์ปดํฌ๋„ŒํŠธ ์‹œ์Šคํ…œ ๊ตฌ์ถ•
    • ๋‹ค์ˆ˜ UI์˜ ์ปดํฌ๋„ŒํŠธํ™”๋กœ ์žฌ์‚ฌ์šฉ์„ฑ ํ™•๋ณด
    • ๋””์ž์ด๋„ˆ-์—”์ง€๋‹ˆ์–ด ํ˜‘์—… ํšจ์œจํ™”๋ฅผ ์œ„ํ•œ ํ”ผ๊ทธ๋งˆ-์ฝ”๋“œ ์ปดํฌ๋„ŒํŠธ ์„ค๊ณ„ ๊ณ ๋ฏผ
  • ํ™•์žฅ์— ๋”ฐ๋ฅธ ์ค‘๋ณต์ฝ”๋“œ ํšจ์œจ์  ์ œ๊ฑฐ
    • ํƒ€์ž… ๊ธฐ๋ฐ˜ ์ •ํ™•ํ•œ ํ”ผ๋“œ๋ฐฑ๊ณผ ๊ผผ๊ผผํ•œ QA๋กœ ์•ˆ์ •์  ๋ฆด๋ฆฌ์ฆˆ
    • ts-morph, knip ๋“ฑ ๊ธฐ๊ณ„์  ์ฝ”๋“œ๋ณ€ํ™˜์„ ์ด์šฉํ•œ ์‹ ๋ขฐ์„ฑ ํ™•๋ณด
    • ๋ฆด๋ฆฌ์ฆˆ ์งํ›„ ์„œ๋น„์Šค ๋ชจ๋‹ˆํ„ฐ๋ง ๋ฐ ์•ˆ์ •ํ™”
  • Tanstack Router ๋„์ž… ๋ฐ POC
    • ํƒ€์ž… ์•ˆ์ „ํ•œ ๋ผ์šฐํŒ… ์‹œ์Šคํ…œ ์ ์šฉ
    • ํŒŒ์ผ ๊ธฐ๋ฐ˜ ๋ผ์šฐํŒ…์œผ๋กœ ๊ฐœ๋ฐœ ์ƒ์‚ฐ์„ฑ ํ–ฅ์ƒ
  • ๋”œ๋Ÿฌ์›น ๋ฐ˜์‘ํ˜• ์ง€์›
    • ์˜คํ”„๋ผ์ธ ์˜์—… ์ค‘ PC ์—†์ด ๋ชจ๋ฐ”์ผ๋งŒ ์‚ฌ์šฉํ•˜๋Š” ๋”œ๋Ÿฌ ๋‹ค์ˆ˜ ๋ฐœ๊ฒฌ
    • ์‹ ๊ทœ ๋ชจ๋ฐ”์ผ ์›น๋ทฐ ๋Œ€์‹  ๊ธฐ์กด ๋”œ๋Ÿฌ์›น์„ ๋ฐ˜์‘ํ˜•์œผ๋กœ ์ „ํ™˜
    • ์ธ์•ฑ ์›น๋ทฐ๋กœ ์˜ฌ๋ ค 1๊ฐœ์›” ๋‚ด ์‹ ๊ทœ ์„œ๋น„์Šค ์ถœ์‹œ ํšจ๊ณผ
  • ํŒ๋งค์„œ๋ฅ˜ ์ตœ์†Œํ™”
    • ์ฐจ๋Ÿ‰ ๋งค์ž…์— ์žˆ์–ด ๊ตฌ๋งค์ž์—๊ฒŒ ํ•„์š”ํ•œ ์‚ฌ์—…์ž ์œ ํ˜•/์‚ฌ์—…์šฉ ์—ฌ๋ถ€/๋”œ๋Ÿฌ ์œ ํ˜•์— ๋”ฐ๋ฅธ ๋ณต์žกํ•œ ์„œ๋ฅ˜์…‹ ๋กœ์ง ์ •๋ฆฌ
  • ์ค‘๊ณ ์ฐจ๋‹จ์ง€ ์˜คํ”„๋ผ์ธ ์˜์—…
    • ๋ผ์ด๋ธŒ ์ž…์ฐฐ ์ˆ˜ ์ฆ๊ฐ€๋ฅผ ์œ„ํ•ด ์ˆ˜์› ๋“ฑ ์ค‘๊ณ ์ฐจ ๋‹จ์ง€์— ๋”œ๋Ÿฌ๋“ค ์ƒ๋Œ€๋กœ ์˜์—…

3. C2C (๊ฐœ์ธ๊ฐ„ ์ง๊ฑฐ๋ž˜)

ํŒ๋งค์ž ํผ๋„ ๊ฐœ์„ 

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

๊ตฌ๋งค์ž ํผ๋„ ๊ฐœ์„ 

  • ๊ฒ€์ƒ‰ ๊ฐœ์„ 
    • ๋””๋ ‰ํ† ๋ฆฌ ๊ธฐ๋ฐ˜ ๊ฒ€์ƒ‰๊ณผ ์ž์—ฐ์–ด ๊ฒ€์ƒ‰์ด ์„ž์—ฌ์žˆ์–ด ๋ณต์žกํ–ˆ๋˜ ๋กœ์ง์„ ์ ์ ˆํ•œ UX/UI๋กœ ๋ณ€๊ฒฝํ•˜์—ฌ ๋ช…ํ™•ํžˆ ๋ถ„๋ฆฌ.
      • ์ž์ฒด ๋ ˆ๊ฑฐ์‹œ ๊ฒ€์ƒ‰ ์ œ๊ฑฐ ์ดํ›„ ์‚ฌ๋‚ด ๊ฒ€์ƒ‰ ํ”Œ๋žซํผ ์ด๊ด€์— ๋Œ€ํ•œ ์ฒ˜๋ฆฌ.
  • ๋™๋„ค๋ฒ”์œ„ ํ•„ํ„ฐ UX ์ „๋ฉด ์ˆ˜์ • (์ „๊ตญ ํ™•์žฅ)
    • ๊ธฐ์กด 1~5๋‹จ๊ณ„ ์Šฌ๋ผ์ด๋” โ†’ ๋‚ด ์œ„์น˜ ์ค‘์‹ฌ nKm ๋ฐ˜๊ฒฝ ๊ฐœ๋…์œผ๋กœ ๋ณ€๊ฒฝ
    • ์œ„์น˜ ๊ธฐ๋ฐ˜ nKm ๋‹ค๊ฐํ˜• ๋ Œ๋”๋ง ๊ตฌํ˜„
    • ๋‹ค๊ฐํ˜• โ†’ h3 ์ธ๋ฑ์Šค ๋ณ€ํ™˜ ๋ฐ ์ €์žฅ ๋กœ์ง ๊ฐœ๋ฐœ
    • ๊ธฐ์กด ๋ ˆ๊ฑฐ์‹œ ์ฝ”๋“œ ๋ถ„์„ ํ›„ ๊ผผ๊ผผํ•œ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜์œผ๋กœ ์ง€ํ‘œ ํฌ๊ฒŒ ํ–ฅ์ƒ

์•ˆ์‹ฌ์ง๊ฑฐ๋ž˜

  • ์—์Šคํฌ๋กœ๋ฅผ ํ†ตํ•œ ์ œ3์ž ์•ˆ์‹ฌ ๊ฑฐ๋ž˜ ์„œ๋น„์Šค ๊ตฌํ˜„
  • ์ค‘๊ณ ์ฐจ ์›น๋ทฐ & ์ฑ„ํŒ… ์›น๋ทฐ ์•ˆ์‹ฌ์ง๊ฑฐ๋ž˜ ์ „์ฒด ๊ตฌํ˜„
  • ๋ณต์žกํ•œ ์ƒํƒœ ๊ด€๋ฆฌ ์„ค๊ณ„
    • ๊ฒฐ์ œ/ํƒ์†ก/๋ช…์˜์ด์ „ ๋“ฑ ๋ณ‘๋ ฌ๋กœ ์ง„ํ–‰๋˜๋Š” ๋‹ค์ˆ˜ ์ƒํƒœ๋ฅผ ์ง๋ ฌ ์ƒํƒœ๋กœ ๋ณ€ํ™˜
    • ์œ ํšจํ•œ ์ƒํƒœ ์กฐํ•ฉ๋ณ„๋กœ ๋ฌถ์–ด ์ถ”์  ๊ด€๋ฆฌ ์šฉ์ดํ•œ ๊ตฌ์กฐ ์„ค๊ณ„
  • ts-pattern ๋„์ž…์œผ๋กœ Exhaustive Pattern Matching ์ ์šฉ
    • ์ƒํƒœ ์ถ”๊ฐ€/์‚ญ์ œ ์‹œ ์ปดํŒŒ์ผ ํƒ€์ž„์— ๋ˆ„๋ฝ๋œ ์ผ€์ด์Šค ๊ฐ์ง€
    • ๋Ÿฐํƒ€์ž„ ์—๋Ÿฌ ์‚ฌ์ „ ๋ฐฉ์ง€ ๋ฐ ์ฝ”๋“œ ๊ฐ€๋…์„ฑ ํ–ฅ์ƒ

์บ ํŽ˜์ธ

  • ์‚ถ์€๋‹น๊ทผ ์บ ํŽ˜์ธ ๊ฐœ๋ฐœ
    • ๋‹น๊ทผ ์ตœ๋Œ€ ํ”„๋กœ๋ชจ์…˜์—์„œ ์ค‘๊ณ ์ฐจ ํผ๋„ ์ „์ฒด UX ๋ณ€๊ฒฝ
    • ๋‹จ๊ธฐ๊ฐ„ ๋‚ด ์ฃผ์š” ํผ๋„ ๋ณ€๊ฒฝ์‚ฌํ•ญ ์„ฑ๊ณต์  ๋ฐฐํฌ
    • ํผํฌ๋จผ์Šค ๋งˆ์ผ€ํŒ…์— ์˜ํ•œ ์„œ๋น„์Šค ์ƒ๋ฐฉ ํ™•์ธ

4. ๊ธฐ์ˆ  ๊ฐœ์„ 

์„ฑ๋Šฅ ์ตœ์ ํ™”

  • ์ด๋ฏธ์ง€ ์ตœ์ ํ™” & ์ธ๋„ค์ผ ์‹œ์Šคํ…œ
    • ์œ ๋ คํ•œ ๋กœ๋”ฉ ๊ฒฝํ—˜์„ ์œ„ํ•œ ์ ์ง„์  ์ด๋ฏธ์ง€ ๋กœ๋”ฉ ๊ตฌํ˜„
  • ์ฒญํฌ ํ”„๋ฆฌ๋กœ๋“œ
    • ๋‹ค์Œ ํ™”๋ฉด์— ํ•„์š”ํ•œ JS ์ฒญํฌ๋ฅผ ๋ฏธ๋ฆฌ ๋กœ๋“œ
    • ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ ์ˆ˜์ค€์˜ ํ™”๋ฉด ์ „ํ™˜ ๊ฒฝํ—˜ ๊ตฌํ˜„
  • Stackflow Future API ์ ์šฉ
    • loader pattern ๊ตฌํ˜„์œผ๋กœ ์„œ๋ฒ„ ๋ฆฌ์†Œ์Šค ์š”์ฒญ๊ณผ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ฆฌ์†Œ์Šค ์š”์ฒญ ๋ณ‘๋ ฌํ™”
    • ํŒŒ๊ดด์  ๋ณ€ํ™”๊ฐ€ ํฐ ํ”ผ์ฒ˜์ž„์—๋„ ์ ์ง„์  ์ž‘์—…๊ณผ ๊ผผ๊ผผํ•œ QA๋กœ ์•ˆ์ •์  ๋ฐฐํฌ
    • p75 ์ˆ˜์น˜ 1์ดˆ ๋‹จ์ถ•์œผ๋กœ ์„ฑ๋Šฅ ์ด์Šˆ ๊ฒช๋Š” ์œ ์ € ๊ฒฝํ—˜ ๋Œ€ํญ ๊ฐœ์„ 
  • GraphQL Persisted Query ๋„์ž…
    • GraphQL ํ†ต์‹  ์š”์ฒญ์˜ ๋ฌธ์„œ(์ฟผ๋ฆฌ) ๋ถ€๋ถ„ ์บ์‹ฑ
    • p75 ๊ธฐ์ค€ LCP 1์ดˆ ๊ฐœ์„ 
  • ํ”ผ๋“œ UX/์„ฑ๋Šฅ ๊ฐœ์„ 
    • Swipe, Virtual Scroll, PTR, ์ƒ๋‹จ ํด๋ฆญ ์‹œ ์Šคํฌ๋กค ๋“ฑ ํ”ผ๋“œ ํ•„์ˆ˜ UX ๊ตฌํ˜„
    • ์ •์„ฑ์ ์œผ๋กœ ๊ฐค๋Ÿญ์‹œA31 ๊ธฐ์ค€์œผ๋กœ๋„ ์œ ๋ คํ•˜๊ฒŒ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ˆ˜์ค€์œผ๋กœ ๋ฉ”๋ชจ๋ฆฌ/์„ฑ๋Šฅ ๊ฐœ์„ 

๊ฐœ๋ฐœ ํ™˜๊ฒฝ & DX ๊ฐœ์„ 

  • E2E ํ…Œ์ŠคํŠธ ์…‹์—…
    • ํŒ๋งค์ž ๊ธ€์“ฐ๊ธฐ/์ง„๋‹จ ์˜ˆ์•ฝ์— ๋Œ€ํ•œ e2e ํ”„๋กœ์„ธ์Šค ๊ตฌ์ถ•
    • ๋ชจ๋“  ํŽ˜์ด์ง€์— ๋Œ€ํ•œ Visual Regression Test ํ”„๋กœ์„ธ์Šค ๊ตฌ์ถ•
    • PR๋ณ„ ์ž๋™ ํ—ฌ์Šค์ฒดํฌ ๊ฐ€๋Šฅํ•˜๋„๋ก CI ์—ฐ๋™
  • ๋ฐ์ดํ„ฐ ํŠธ๋ž˜ํ‚น ๊ณ ๋„ํ™”
    • ์ •๋ฆฌ๋˜์ง€ ์•Š๋˜ ์ด๋ฒคํŠธ๋“ค์„ ์ฟผ๋ฆฌ๋กœ ์ถ”์ถœ ํ›„ ์—‘์…€์— ๋ฌธ์„œ๋กœ ์ •๋ฆฌ
    • ๋ฌธ์„œ โ†’ ์ฝ”๋“œ ์ž๋™ํ™”๋กœ ์ด๋ฒคํŠธ ๋ฐ์ดํ„ฐ ์ •์  ๊ฒ€์‚ฌ ๊ฐ€๋Šฅ
    • ํ˜‘์—… ํšจ์œจ์„ฑ ๋Œ€ํญ ๊ฐœ์„ 
  • ์ฑ„ํŒ… ์›น๋ทฐ ๊ฐœ๋ฐœํ™˜๊ฒฝ ๊ฐœ์„ 
    • ๋ฉ”์ธํ…Œ์ด๋‹ ๋ฏธ๋น„๋กœ ๋ช‡๋…„์งธ outdated๋œ ํ™˜๊ฒฝ ์ฃผ๋„์  ๊ฐœ์„ ํ•˜์—ฌ ํƒ€ํŒ€ ์•„์›ƒํ’‹ ํ–ฅ์ƒ์— ๊ธฐ์—ฌ
  • ์ค‘๊ณ ์ฐจ ์ „์šฉ ์ฑ„ํŒ… ์›น๋ทฐ ๋ถ„๋ฆฌ
    • ๊ธฐ์กด: ๋ชจ๋“  ์„œ๋น„์Šค ์›น๋ทฐ๊ฐ€ ํ•˜๋‚˜์˜ ๋ ˆํฌ ๊ณต์œ  โ†’ ๋ฐฐํฌ ๋ถ€๋‹ด ์ฆ๊ฐ€
    • ์ค‘๊ณ ์ฐจ๋งŒ์˜ ๊ธฐ์ˆ  ๋งฅ๋ฝ ๊ฐ€์ ธ๊ฐ€๋ฉฐ ๋ฐฐํฌ ์•ˆ์ •์„ฑ/๋…๋ฆฝ์„ฑ ํ™•๋ณด
  • QA / Release Process ๊ฐœ์„ 
    • Preview ํ™˜๊ฒฝ ๊ณ ๋„ํ™”
      • GitHub deploy ๋ผ๋ฒจ๋งŒ ๋ถ™์ด๋ฉด ์•ŒํŒŒ ํ™˜๊ฒฝ ์ž๋™ ๋ฐฐํฌ
    • ๋ฉ€ํ‹ฐ QA ํ™˜๊ฒฝ ๊ตฌ์ถ•
      • ๊ฐœ๋ฐœ์ž ์ฆ๊ฐ€์— ๋”ฐ๋ฅธ ๋‹จ์ผ alpha ํ™˜๊ฒฝ ๋ถ€์กฑ ๋ฌธ์ œ ํ•ด๊ฒฐ
      • ํด๋ผ์ด์–ธํŠธ/์„œ๋ฒ„ ๊ฐ๊ฐ preview ์Šคํ‚ด ์ž์œ ๋กญ๊ฒŒ ์กฐํ•ฉ ๊ฐ€๋Šฅ
      • ๋ชจ๋…ธ๋ ˆํฌ ๊ณตํ†ต ํŒจํ‚ค์ง€๋กœ ์ž๋™ ์ฃผ์ž…๋˜๋„๋ก ๋กœ์ง ์ผ์›ํ™”
  • React Compiler 19 ๋„์ž…
    • ์ฃผ์š” ์ฝ”๋“œ ๋ณ€๊ฒฝ ๋ฐ QA ์ „๋‹ด
    • ์ž”๋ฒ„๊ทธ๋กœ ์•ŒํŒŒ ํ™˜๊ฒฝ ํ…Œ์ŠคํŠธ ๊ธฐ๊ฐ„ ๊ธธ์–ด์กŒ์œผ๋‚˜ ๊ผผ๊ผผํ•œ QA๋กœ ์•ˆ์ •์  ํ”„๋กœ๋•์…˜ ๋ฐฐํฌ
    • useCallback, useMemo ๋“ฑ ๋ช…์‹œ์  ๋ฉ”๋ชจ์ด์ œ์ด์…˜ ๋ถˆํ•„์š”ํ•ด์ ธ ํŒ€ ์ƒ์‚ฐ์„ฑ ํ–ฅ์ƒ
  • Recoil โ†’ Jotai ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜
    • Recoil ๋ฉ”์ธํ…Œ์ด๋‹ ์ค‘๋‹จ ๋ฐ ์ž”๋ฒ„๊ทธ ์ด์Šˆ ๋Œ€์‘ํ•˜์—ฌ ๋™์ผํ•œ Atomic Pattern์„ ์œ ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ์ˆ˜์ •
  • emotion โ†’ Tailwind ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜
    • emotion์˜ ๋Ÿฐํƒ€์ž„ ์˜ค๋ฒ„ํ—ค๋“œ, ๋ฒˆ๋“ค ์‚ฌ์ด์ฆˆ ์ด์Šˆ ํ•ด๊ฒฐ
    • utility-first ์ ‘๊ทผ์œผ๋กœ ์Šคํƒ€์ผ ์ผ๊ด€์„ฑ ํ™•๋ณด
    • variant ํ”ผ์ณ๋กœ ์ปดํฌ๋„ŒํŠธ ์Šคํƒ€์ผ ๋ณ€ํ˜• ์ƒ์‚ฐ์„ฑ ๊ฐœ์„ 
  • ๋ชจ๋…ธ๋ ˆํฌ ์„ค์ • & ์ตœ์ ํ™”
    • ํ”„๋กœ์ ํŠธ ๋‹ค์ˆ˜ํ™”์— ๋”ฐ๋ฅธ ๋ชจ๋…ธ๋ ˆํฌ ํ•„์š”์„ฑ ๋Œ€์‘
    • ๋ชจ๋…ธ๋ ˆํฌ ํ†ตํ•ฉ ํ›„ ๊ณตํ†ตํ™”๋˜์ง€ ์•Š์€ ์ฝ”๋“œ ๋Œ€๊ทœ๋ชจ ์ •๋ฆฌ
    • turbo๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ target project๋ฅผ ๋” ์‰ฝ๊ฒŒ ์ •ํ•  ์ˆ˜ ์žˆ๋Š” shotcut ๊ฐœ๋ฐœ
    • ๋ฆด๋ ˆ์ด ๋ฉ€ํ‹ฐํ”„๋กœ์ ํŠธ ์ง€์›
      • ๋ฌธ์„œ์—์„œ์กฐ์ฐจ workingํ•˜๋Š” ์˜ˆ์ œ๊ฐ€ ์—†์–ด discord, open source ๋“ฑ ๋‹ค์–‘ํ•œ ๋งค์ฒด ํƒ๊ตฌ
      • ๋ชจ๋…ธ๋ ˆํฌ ๋‚ด ๊ฐ ํ”„๋กœ์ ํŠธ์˜ ๊ณตํ†ต ๋ฐ์ดํ„ฐ ๋กœ์ง ์ค‘์•™์ง‘์ค‘ํ™”
      • Fragment ๊ธฐ๋ฐ˜ ๊ด€๋ฆฌ๋กœ ๋ฐ์ดํ„ฐ ์ผ๊ด€์„ฑ ํ™•๋ณด
    • TypeScript ์†๋„ ๊ฐœ์„ 
      • ๊ฑฐ๋Œ€ ๋ชจ๋…ธ๋ ˆํฌ ๋‚ด ํƒ€์ž…์ฒดํ‚น ์†๋„ ์ธก์ • ๋ฐ ๊ฐœ์„ 
    • HMR ํƒ€์ด๋ฐ ์ถฉ๋Œ ๋ฌธ์ œ ํ•ด๊ฒฐ
      • ๋ชจ๋…ธ๋ ˆํฌ ํ™˜๊ฒฝ์—์„œ ๋ฐœ์ƒํ•˜๋Š” HMR ๋ถ€์ž‘์šฉ ํšจ๊ณผ์  ์ธก์ • ๋ฐ ํ•ด๊ฒฐ
  • ์˜ค๋ฒ„๋ ˆ์ด ์ •ํ•ฉ์„ฑ ๊ฐœ์„ 
    • ์„œ๋น„์Šค ๋‚ด ํฉ์–ด์ง„ ๋‹ค์ด์–ผ๋กœ๊ทธ ๊ฒ€์ˆ˜
    • ์•ˆ๋“œ๋กœ์ด๋“œ ๋’ค๋กœ๊ฐ€๊ธฐ ๊ฒฝํ—˜ ํ†ต์ผ
  • knip ๋„์ž…
    • ํ”„๋กœ์ ํŠธ ์ „๋ฐ˜์˜ ๋ฏธ์‚ฌ์šฉ ์ฝ”๋“œ ๋ ˆ๊ฑฐ์‹œ ์•ˆ์ •์  ์ œ๊ฑฐ
    • ์ •๊ธฐ์  ๊ธฐ์ˆ ๋ถ€์ฑ„ ํ•ด์†Œ ํ”„๋กœ์„ธ์Šค ํ™•๋ฆฝ

๋ฉ”ํƒ€ํ”„๋กœ๊ทธ๋ž˜๋ฐ & ์ž๋™ํ™”

  • ์Šคํƒํ”Œ๋กœ์šฐ ํŒŒ์ผ ๊ธฐ๋ฐ˜ ์ฝ”๋“œ์   ๊ตฌํ˜„
    • 24๋…„ 4๋ถ„๊ธฐ์—๋งŒ 50์—ฌ ๊ฐœ ํŽ˜์ด์ง€ ์ƒ์„ฑ/์ œ๊ฑฐ โ†’ 8๊ฐ€์ง€ ๋ฐ˜๋ณต์ž‘์—… ํ”ผ๋กœ๋„ ๋†’์Œ
    • ์ฝ”๋“œ ํŒจํ„ด ๋ฏธ๊ฐ•์ œ๋กœ ๊ฐœ๋ฐœ์ž๋ณ„ ํŒŒํŽธํ™” ๋ฐœ์ƒ
    • tanstack-router ์˜๊ฐ ๋ฐ›์•„ ํŒŒ์ผ ๊ธฐ๋ฐ˜ ์ž๋™ ์—ฐ๊ฒฐ ๋ฉ”ํƒ€ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ตฌํ˜„
    • ๋ฒˆ๋“ค๋Ÿฌ ์—ฐ๋™์œผ๋กœ ์‚ฌ์šฉ์ž ์ž…์žฅ์—์„  ํˆฌ๋ช…ํ•˜๊ฒŒ ๋™์ž‘
    • ํƒ€์ž… ์ฒดํ‚น ์™„๋ฒฝ ์ง€์›์œผ๋กœ ๊ฒฌ๊ณ ํ•œ ํ”„๋กœ๊ทธ๋žจ ๊ตฌ์กฐ
    • ์‚ฌ๋‚ด ์ฝ”์–ดํŒ€์— ์ œํ’ˆํŒ€ ๋‹ˆ์ฆˆ ์ •ํ™•ํžˆ ์ „๋‹ฌ, ์Šคํƒํ”Œ๋กœ์šฐ v2 ๊ฐœ๋ฐœ์— ๊ธฐ์—ฌ
  • ์•ฝ๊ด€ ์ƒ์„ฑ๊ธฐ ๊ฐœ๋ฐœ
    • ๊ฒฝ๋งค ๋ณต์žก์„ฑ์— ๋”ฐ๋ฅธ ๊ฐœ์ธ์ •๋ณด ์ทจ๊ธ‰ ๋ณ€๊ฒฝ์œผ๋กœ ์•ฝ๊ด€ ๋ฒ„์ €๋‹ ํ•„์š”
    • Sanity ์ •์  ์ปจํ…์ธ  ์ƒ์„ฑ๊ธฐ ๋„์ž…
    • ์•ฝ๊ด€ Key์™€ 1:1 ๋งค์นญ๋˜๋Š” Rule Based ๋™์ž‘
    • ์šด์˜ํŒ€ ์ง์ ‘ ์ปจํ…์ธ  ์ถ”๊ฐ€/์ œ๊ฑฐ ๊ฐ€๋Šฅํ•˜์—ฌ ์šด์˜ ํšจ์œจํ™”

๋””์ž์ธ ์‹œ์Šคํ…œ

  • Seed Design (Mobile)
    • ์‚ฌ๋‚ด No.1 ์–ผ๋ฆฌ์–ด๋‹ตํ„ฐ๋กœ v2๋กœ ๋Œ€ํญ ๋ณ€๊ฒฝ๋œ ๋””์ž์ธ ์‹œ์Šคํ…œ ํ”ผ๋“œ๋ฐฑ
    • ์ธํ„ฐํŽ˜์ด์Šค์™€ ์„ฑ๋Šฅ, ์ œํ’ˆ๋‹จ์˜ ๊ณ ๋ฏผ ์ „๋‹ฌ
    • ์ด์ „ ๊ตฌํ˜„์ฒด์™€ ๋™์ž‘ ๋งž์ถ”๊ธฐ, ํฌ๊ณ  ์ž‘์€ ๋ฒ„๊ทธ ์ˆ˜์ •
    • ๋‹ค์–‘ํ•œ ๊ตฌํ˜„์ฒด ๋™์‹œ ์‚ฌ์šฉ ํ•˜๋Š” ์ผ€์ด์Šค์— ๋Œ€ํ•ด ๋„ค์ดํ‹ฐ๋ธŒ ์ˆ˜์ค€ UX/UI ์ œ๊ณต ๋…ธ๋ ฅ
    • ํƒ€ํŒ€์ด ์ค‘๊ณ ์ฐจํŒ€ ๋ฐŸ์€ ์ด์Šˆ ํ”ผํ•ด๊ฐˆ ์ˆ˜ ์žˆ๋„๋ก ๊ธฐ์—ฌ
  • Carotene (PC)
    • ์ด์ „ ๋‹ด๋‹น์ž ๋ถ€์žฌ๋กœ ํ”„๋กœ์ ํŠธ ๋ฉ”์ธํ…Œ์ด๋‹
    • Seed Design ์—…๋ฐ์ดํŠธ์— ๋งž์ถฐ ๋™์ผ ํŒŒ์šด๋ฐ์ด์…˜ ์‚ฌ์šฉํ•˜๋„๋ก ์ˆ˜์ •

์ธ์ฆ & ํ”Œ๋žซํผ

  • PC ์›น ๋กœ๊ทธ์ธ ๋ฒ ํƒ€ํ…Œ์Šคํ„ฐ
    • ์‚ฌ๋‚ด ์ธ์ฆํŒ€ PC ๋กœ๊ทธ์ธ ๊ธฐ๋Šฅ ์ฒซ ๋ฒ ํƒ€ํ…Œ์Šคํ„ฐ
    • ๋ฒ„๊ทธ ์ˆ˜์ • ๋ฐ ๋ชจ๋‹ˆํ„ฐ๋ง์œผ๋กœ ์„œ๋น„์Šค ์•ˆ์ •ํ™” ๊ธฐ์—ฌ
    • ํƒ€ํŒ€์ด ์‹ ๋ขฐ ๊ฐ€์ง€๊ณ  ์œ ๋ คํ•˜๊ฒŒ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ’ˆ์งˆ ํ™•๋ณด

5. AI ํ™œ์šฉ

AI ์ฝ”๋”ฉ ์›Œํฌํ”Œ๋กœ์šฐ ๊ตฌ์ถ•

  • agent์˜ ์ฝ”๋“œ ํ”ผ๋“œ๋ฐฑ ์‹ธ์ดํด ๊ตฌ์„ฑ
    • code-gen, type-check, fix-lint ๋“ฑ ์—์ด์ „ํŠธ๊ฐ€ ์‹ค์ œ ํ”„๋กœ๊ทธ๋ž˜๋จธ์™€ ๊ฐ€๊น๊ฒŒ ์ผํ•  ์ˆ˜ ์žˆ๋„๋ก ์Šคํฌ๋ฆฝํŠธ & ํ”„๋กฌํ”„ํŠธ ๊ตฌ์„ฑ
    • ํ”ผ๋“œ๋ฐฑ์ด ๋นจ๋ผ์งˆ ์ˆ˜ ์žˆ๋„๋ก ์„ฑ๋Šฅ ์ตœ์ ํ™”
    • git, deploy ๊ด€๋ จ skills๋ฅผ ์ž‘์„ฑํ•˜์—ฌ ์‹ค์ œ ํ”„๋กœ๊ทธ๋ž˜๋จธ์™€ ์ผํ•˜๋Š” ์Šคํƒ€์ผ์ด ๋น„์Šทํ•ด์งˆ ์ˆ˜ ์žˆ๋„๋ก ๊ตฌ์„ฑ
  • ๊ฑฐ๋Œ€ ๋ชจ๋…ธ๋ ˆํฌ ๋งฅ๋ฝ ๋ถ„๋ฆฌ
    • ์„œ๋น„์Šค๋ณ„ ์ ์ ˆํ•œ ์ปจํ…์ŠคํŠธ ์ž‘์„ฑ
    • AI ๋„๊ตฌ๊ฐ€ ์ดํ•ดํ•˜๊ธฐ ์‰ฌ์šด ๊ตฌ์กฐํ™”๋œ ์ •๋ณด ์ œ๊ณต
  • Rule-Based ์ฝ”๋“œ์   ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋„์ž…
    • ์ฝ”๋“œ ํŒจํ„ด ์ตœ๋Œ€ํ•œ ์ผ๊ด€๋˜๊ฒŒ ์œ ์ง€
    • ํ• ๋ฃจ์‹œ๋„ค์ด์…˜์ด ๋ˆˆ์— ๋„๊ฒŒ ๊ฐ์†Œ
  • ์ •์  ๋ถ„์„ ๋„๊ตฌ ๊ฐ•์ œ ์ ์šฉ
    • LSP, ts-morph, dry-run ์˜ต์…˜ ๋“ฑ before-after๋ฅผ ๋ช…ํ™•ํžˆ ์•Œ ์ˆ˜ ์žˆ๋Š” ํˆด๋ง ํ™•๋ณด
    • LLM๋งŒ์œผ๋กœ ์ง„ํ–‰ํ•˜๋Š” ๋ณ€ํ™˜ ๋Œ€๋น„ compiler ๋“ฑ ๋„๊ตฌ๊ฐ€ ๊ฐ•์ œํ•˜๋Š” ์—ญํ• ๋กœ ํ’ˆ์งˆ ํ–ฅ์ƒ
    • ํ…Œ์ŠคํŠธ๋ฅผ ํ†ตํ•ด ์ฝ”๋“œ ๋ณ€ํ™˜์— ๋Œ€ํ•œ ์‹ ๋ขฐ์„ฑ ๋‹ด๋ณด
  • AI ๋„๊ตฌ ํ™œ์šฉ ๋ ˆ์Šจ๋Ÿฐ ํŒ€ ๋‚ด ๊ณต์œ 
    • ๋ณ„๋‹ค๋ฅธ ์ถ”๊ฐ€ ํ”„๋กฌํ”„ํŠธ ์—†์ด ๊ณ ๋‚œ์ด๋„ ์ž‘์—… ํ•ด๊ฒฐ ์‚ฌ๋ก€ ๊ณต์œ 
    • ๋””์ž์ธ ์‹œ์Šคํ…œ v2 ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜
    • emotion -> tailwind ๋ณ€ํ™˜
    • ํ’ˆ์งˆ / ๋ณ€๊ฒฝ ๊ฐ€์‹œ์„ฑ ํ™•๋ณดํ•˜๊ธฐ

6. ํŒ€ ๋งค๋‹ˆ์ง•

์ฑ„์šฉ

  • FE ์ฑ„์šฉ ๊ธฐ์—ฌ

์ง€์‹ ๊ณต์œ  & ๋ฌธํ™”

  • ๋ฒ„ํ‹ฐ์ปฌ FE ์œ„ํด๋ฆฌ ๊ฐœ์„ค
    • ํƒ€ ๋ฒ„ํ‹ฐ์ปฌํŒ€ ์—”์ง€๋‹ˆ์–ด์™€ ๊ฒฉ์ฃผ ์ฐธ์—ฌ
    • ์ œํ’ˆ ๊ฐœ๋ฐœ ๋ ˆ์Šจ๋Ÿฐ, ๊ธฐ์ˆ  ํ๋ฆ„ ์ฝ๊ธฐ, ์‹ค๋ฌด ํŒ ๊ณต์œ 

๋คผ์ด๋“œ (2020.11 ~ 2022.11)

์†Œํ”„ํŠธ์›จ์–ด ์—”์ง€๋‹ˆ์–ด

  • Schema based development
    • Protobuf ๊ธฐ๋ฐ˜์œผ๋กœ webview์™€ native, server ์ธํ„ฐํŽ˜์ด์Šค ์ž‘์„ฑ
    • ์ž‘์„ฑ๋œ schema๋ฅผ ํ†ตํ•ด ๋ฐ˜๋ณต์ ์ธ ์ฝ”๋“œ๋ฅผ ๊ธฐ๊ณ„์ ์œผ๋กœ ์ž๋™ ์ƒ์„ฑ
    • Open API Schema๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ rest api๋“ค์˜ ๋ฐ˜๋ณต์ ์ธ ์ฝ”๋“œ๋ฅผ ๊ธฐ๊ณ„์ ์œผ๋กœ ์ž๋™ ์ƒ์„ฑ
    • ์Šคํ‚ค๋งˆ ์ €์žฅ์†Œ๋ฅผ ๋ถ„๋ฆฌํ•˜์—ฌ PR์„ ํ†ตํ•ด api tech spec ๋…ผ์˜
  • ์ปดํŒŒ์ผ / ๋ฒˆ๋“ค๋ง ๋ฐฉ์‹ ์—ฐ๊ตฌ ๋ฐ ๊ฐœ์„ 
    • css-in-js๋กœ ์ธํ•œ babel ์˜์กด์„ฑ์„ ์ œ๊ฑฐํ•˜๊ณ  swc๋กœ ์ปดํŒŒ์ผ๋Ÿฌ ๊ต์ฒด
    • esm, cjs ๋‘ ๋ชจ๋“ˆ๋ง์„ ์ง€์›ํ•˜๊ธฐ ์œ„ํ•œ ์ž‘์—… ์ง„ํ–‰
    • ๋ชจ๋…ธ๋ ˆํฌ์—์„œ ๊ฐ ํŒจํ‚ค์ง€๋“ค์˜ hmr์„ ์ง€์›
  • Trunk Based Development ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•œ ์ผ๋“ค์„ ์ง„ํ–‰
    • yarn2 + ultra-runner๋ฅผ ์‚ฌ์šฉํ•œ ์ดˆ๊ธฐ ๋ชจ๋…ธ๋ ˆํฌ ์…‹์—…
    • pnpm + turbo๋ฅผ ํ†ตํ•œ ๋ชจ๋…ธ๋ ˆํฌ ๊ฐœ์„ 
    • PR ๊ฒ€์ฆ๊ณผ ํ”„๋กœ๋•ํŠธ ๋ฐฐํฌ๋ฅผ ์œ„ํ•œ CI&CD ์ž‘์„ฑ
    • ๋นŒ๋“œ ์บ์‹ฑ์„ ํ†ตํ•ด ๋ฐฐํฌ ์†๋„ ๋Œ€ํญ ๊ฐœ์„ 
    • ๋ชจ๋…ธ๋ ˆํฌ๋กœ ์ธํ•œ ๊ฐ์ข… ๋นŒ๋“œ ์ด์Šˆ ํ•ด๊ฒฐ
    • ๋ฐฐํฌ ํ”„๋กœ์„ธ์Šค ์ •์˜
  • ํ…Œ์ŠคํŠธ ์ฝ”๋“œ ์ž‘์„ฑ
    • ์ปค๋ฒ„๋ฆฌ์ง€ 80%๋ฅผ ๋ชฉํ‘œ๋กœ ์œ ๋‹›ํ…Œ์ŠคํŠธ ์ž‘์„ฑ
    • E2E ํ…Œ์ŠคํŠธ๋ฅผ ์œ„ํ•ด Cypress๋ฅผ ์…‹์—…ํ•˜๊ณ  QA Engineer ์˜จ๋ณด๋”ฉ ์ง„ํ–‰
    • ์Šคํ‚ค๋งˆ๋ฅผ ํ†ตํ•ด ๋ชฉ ๋ฐ์ดํ„ฐ ์ƒ์„ฑ๊ธฐ, msw ์ฝ”๋“œ๋ฅผ ์ž๋™์œผ๋กœ ์ƒ์„ฑํ•ด ์œ ๋‹› ํ…Œ์ŠคํŠธ, ์Šคํ† ๋ฆฌ๋ถ์— ํ™œ์šฉ
  • ์‚ฌ๋‚ด ๋ฐฑ์˜คํ”ผ์Šค ๊ตฌํ˜„
    • ๊ณต์šฉ ์ปดํฌ๋„ŒํŠธ, ๋กœ์ง, ์ปจ๋ฒ„ํ„ฐ ์ž‘์„ฑ ํ›„ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ๋ง์•„์„œ ๋ฐฐํฌ
    • ์–ด๋“œ๋ฏผ ๋ฐ์ดํ„ฐ๊ทธ๋ฆฌ๋“œ, ๊ณตํ†ต ํ•„ํ„ฐ ๊ตฌํ˜„ ์ŠคํŽ™ ๋…ผ์˜
  • ๊ธฐ์กด ์ฝ”๋“œ๋ฆฌ๋ทฐ ๋ฐฉ๋ฒ•์„ ๋ณด์™„ํ•˜๊ธฐ ์œ„ํ•ด Graphite๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ Stacked Changes ๋ฐฉ๋ฒ•์„ ํŒ€๋‚ด ์ „ํŒŒ
  • 3๊ฐœ์›” ์ •๋„ ๋ฏธ๊ตญ ์ง€์‚ฌ์—์„œ ์˜์–ด๊ถŒ ์—”์ง€๋‹ˆ์–ด๋“ค๊ณผ ํ˜‘์—…
  • ์†Œ์ˆ˜ ์˜คํ”ˆ์†Œ์Šค ํ”„๋กœ์ ํŠธ ๊ธฐ์—ฌ (Pbkit, Storybook ๋“ฑ)
  • ๋‹ค์ˆ˜ ์›น๋ทฐ ํ”„๋กœ๋•ํŠธ MVP ๊ตฌํ˜„ ๋ฐ ์œ ์ง€๋ณด์ˆ˜
  • CLI ํˆด๋ง ์ž‘์„ฑ (์ฝ”๋“œ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜, ์ปดํฌ๋„ŒํŠธ ์ฝ”๋“œ ์ƒ์„ฑ ๋“ฑ)

ํด๋ž˜์Šค101 (2019.03 ~ 2020.06)

์†Œํ”„ํŠธ์›จ์–ด ์—”์ง€๋‹ˆ์–ด

  • ์ปค๋จธ์Šค ์…€

    • ํผ๋„ ์ค„์ด๊ธฐ A/B ํ…Œ์ŠคํŠธ๋ฅผ ํ†ตํ•œ ๊ฒฐ์ œ ์ปจ๋ฒ„์ „ 400% ๊ฐœ์„ 
    • ์ฟ ํฐ ๋ฐ ๊ตฌ์„ฑํ’ˆ ์„ ํƒ UX ๊ฐœ์„ 
    • ๋ฐฐ์†ก ์ถ”์  UX ๊ฐœ์„ 
    • ์ปค๋จธ์Šค ๋„๋ฉ”์ธ ๋ ˆ๊ฑฐ์‹œ ๋Œ€์‘
    • ๊ฐ์ข… ๊ฒฐ์ œ, ๋ฐฐ์†ก ์—๋Ÿฌ ํŠธ๋Ÿฌ๋ธ” ์ŠˆํŒ…
  • ํ”„๋ก ํŠธ์—”๋“œ ์ฑ•ํ„ฐ DRI

    • Class101 CSR ํ”„๋กœ์ ํŠธ๋ฅผ SSR์„ ์ง€์›ํ•˜๋„๋ก ๋ณ€๊ฒฝ
    • SEO ์ตœ์ ํ™”๋ฅผ ์œ„ํ•ด ๋ฉ”ํƒ€ํƒœ๊ทธ, ์‚ฌ์ดํŠธ๋งต, ์Šคํ‚ค๋งˆ ๋“ฑ์„ ์„ธํŒ…
    • ์„œ๋ฒ„๋ฆฌ์Šค ์ด๋ฏธ์ง€ ์••์ถ• ์„œ๋น„์Šค์—์„œ ๋‹ค์–‘ํ•œ ํฌ๋ฉง(webp, png, jpg)์„ ์ง€์›ํ•˜๋„๋ก ๋ณ€๊ฒฝ
    • ์Šคํฌ๋ฆฐ ํฌ๊ธฐ์— ๋”ฐ๋ฅธ ๋ฐ˜์‘ํ˜• ์ด๋ฏธ์ง€ ์ตœ์ ํ™”๋กœ ์ด๋ฏธ์ง€ ๋ฆฌ์†Œ์Šค ์šฉ๋Ÿ‰์„ 82% ์ ˆ๊ฐ
    • 50mb ~ 100mb ๋‹จ์œ„๋กœ JS ์ฒญํฌ ์Šคํ”Œ๋ฆฌํŒ… ์ ์šฉ
    • ์‚ฌ์ดํŠธ ์ด ๋ฆฌ์†Œ์Šค๋ฅผ 25.8mb์—์„œ 11.4mb๋กœ 55% ์ ˆ๊ฐ
    • ๋ธŒ๋ผ์šฐ์ €, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ Œ๋”๋ง ์ตœ์ ํ™”๋กœ ๋…ธํŠธ8 ๊ธฐ์ค€ TTI๋ฅผ 158์ดˆ -> 21์ดˆ๋กœ ์ ˆ๊ฐ
    • ์ธํ”ผ๋‹ˆํ‹ฐ ์Šคํฌ๋กค ๊ฐœ์„  ๋ฐ ๊ด€์„ฑ ์Šคํฌ๋กค ์ ์šฉํ•ด ์Šคํฌ๋กค UX ์ตœ์ ํ™”
    • ์„ผํŠธ๋ฆฌ, ์Šฌ๋ž™์„ ํ†ตํ•œ ์—๋Ÿฌ ๋ชจ๋‹ˆํ„ฐ๋ง ์…‹์—…
    • ์–ด๋“œ๋ฏผ ๊ณตํ†ต ํ•„ํ„ฐ, ํ…Œ์ด๋ธ” ์ถ”์ƒํ™”
    • ์•Œ๋ฆผ ์„œ๋ฒ„ ๊ฐœ์„  (๋ถ„๋‹น ์ตœ๋Œ€ ์ „์†ก ํšŸ์ˆ˜ 40๊ฐœ -> 20,000๊ฐœ)
    • ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ์ฑ„์šฉ ๊ฐ€์ด๋“œ ๋ฌธ์„œ ์ œ์ž‘
    • ๊ธฐ์ˆ  ๋ธ”๋กœ๊ทธ ๊ฐœ๋ฐœ ๋ฐ ๊ณต์œ  ๋ฌธํ™” ์ „ํŒŒ
    • ๋ฆฌ์•กํŠธ ๋ชจ๋…ธ๋ ˆํฌ ํ”„๋กœ์ ํŠธ ์—๋Ÿฌ ํ•ธ๋“ค๋ง
    • Graphql Apollo ๊ตฌ์กฐ ์„ค๊ณ„ ๋ฐ ํŠธ๋Ÿฌ๋ธ” ์ŠˆํŒ…

๋…ธ๋ฃจ (2018.03 ~ 2019.03)

ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋กœ๊ทธ๋ž˜๋จธ

  • ๋‹ค์–‘ํ•œ ์ฐจํŠธ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ™œ์šฉํ•ด ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™” ์ž‘์—… (์˜คํ”ˆ์†Œ์Šค ์ปจํŠธ๋ฆฌ๋ทฐ์…˜)
  • ์‹ฌํ”Œํ•œ ์†Œ์Šค์ฝ”๋“œ ๊ด€๋ฆฌ์ž ์„ค๊ณ„ (Diff, Versioning ๋“ฑ)
  • RxJS์˜ ์‚ฌ์šฉํ•˜์—ฌ ์ŠคํŠธ๋ฆผ ๊ธฐ๋ฐ˜์˜ ๋ฐ˜์‘ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์— ๋Œ€ํ•ด ๊ณ ๋ฏผํ•˜์˜€์Œ.
  • WebRTC๋ฅผ ์ด์šฉํ•œ ์–‘๋ฐฉํ–ฅ ์˜์ƒ ํ†ต์‹  ๊ตฌํ˜„
  • Gatsby + Bulma ๋ฅผ ํ†ตํ•ด ํšŒ์‚ฌ ์†Œ๊ฐœ ์‚ฌ์ดํŠธ ๊ตฌ์ถ•

ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋กœ๊ทธ๋ž˜๋จธ

  • ํ˜ธํ…”, ์•กํ‹ฐ๋น„ํ‹ฐ ์„œ๋น„์Šค ์•„ํ‚คํ…์ณ ์„ค๊ณ„
  • ์—ฌํ–‰ ์˜ฌ์ธ์› ์ปค๋จธ์Šค ๊ฐœ๋ฐœ

๐Ÿ”— Links

Site Link
Blog https://ddalpange.github.io
Email ddalpange@gmail.com
Github https://github.com/ddalpange

Pinned Loading

  1. pbkit/pbkit pbkit/pbkit Public

    Protobuf toolkit for modern web development

    TypeScript 338 23

  2. pbkit/npm-packages pbkit/npm-packages Public

    TypeScript 2 2

  3. monorepo-template monorepo-template Public

    Monorepo template

    TypeScript 3

  4. TabInOut TabInOut Public

    Forked from albertromkes/tabout

    Tab out of quotes, brackets, etc for Visual Studio Code

    TypeScript