(younggeun0: 🐒) => dev

μ•ˆλ…•ν•˜μ„Έμš”!
μ‚¬μš©μž κ²½ν—˜μ„ μ€‘μ‹œν•˜λŠ” ν”„λ‘ νŠΈμ—”λ“œ 개발자 "였영근"μž…λ‹ˆλ‹€.

일 κ²½ν—˜

λͺ°μž…ν•  수 μžˆλŠ” ν™˜κ²½μ„ μ„ ν˜Έν•©λ‹ˆλ‹€.
μ†Œν†΅μ„ μ΅œμš°μ„ μœΌλ‘œ μƒκ°ν•©λ‹ˆλ‹€.
μ½”λ“œλ¦¬λ·°, νŽ˜μ–΄ ν”„λ‘œκ·Έλž˜λ°μ„ μ’‹μ•„ν•©λ‹ˆλ‹€.
κ·Όκ±° μžˆλŠ” μ½”λ“œλ₯Ό μž‘μ„±ν•˜κΈ° μœ„ν•΄ λ…Έλ ₯ν•©λ‹ˆλ‹€.
ν•„μš” μ‹œ ν…ŒμŠ€νŠΈ μ½”λ“œλ₯Ό μž‘μ„±ν•©λ‹ˆλ‹€.
μž‘μ„±λœ μ½”λ“œμ— κ΄€ν•œ λ‹€μ–‘ν•œ μ˜κ²¬μ„ ν™˜μ˜ν•©λ‹ˆλ‹€.
ν’€μŠ€νƒμœΌλ‘œ 일해 λ³Έ κ²½ν—˜λ„ μžˆμŠ΅λ‹ˆλ‹€.
μ»€μ„œ, ν΄λ‘œλ“œκ°™μ€ AI 도ꡬλ₯Ό ν†΅μ œ κ°€λŠ₯ν•œ λ²”μœ„λ‘œ ν™œμš©ν•©λ‹ˆλ‹€.

λ©”λ””μΏΌν„°μŠ€

2022.11 ~ ν˜„μž¬
FE Developer
MAU 100만 일본 컀머슀 ν”Œλž«νΌ nuguλ₯Ό 개발 μ€‘μž…λ‹ˆλ‹€.
ν”„λ‘œμ νŠΈ μ΄ˆκΈ°μ—λŠ” ν’€μŠ€νƒμœΌλ‘œ κ°œλ°œμ— μ°Έμ—¬ν–ˆμŠ΅λ‹ˆλ‹€.
UI의 λ―Έλ¬˜ν•œ 차이λ₯Ό λ°œκ²¬ν•˜κ³  κ°œμ„ ν•˜λŠ” 것에 λ³΄λžŒμ„ 느껴 ν˜„μž¬λŠ” FE κ°œλ°œμ— μ§‘μ€‘ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.
skills: {
    fe: {
      // nugu mall
      react: [
        "Next.js 14 page router",
        "storybook",
        "react-bootstrap",
        "jotai",
        "react-query",
        "tanstack-virtual",
        {
          testing: [
            "vitest",
            "testing-library/react"
          ],
        }
      ],
      // back office
      svelte: ["SvelteKit", "svelte4"]
    },
    be: {
      python: {
        django: ["django-rest-framework"]
      }
    },
    vcs: ["git", "github"]
  }
}

μ—λ²„μ˜¨

2022.03 - 2022.10 (7κ°œμ›”)
FE Developer
μ°¨μ„ΈλŒ€ λ°±μ˜€ν”ΌμŠ€ κΈ°λŠ₯ κ°œλ°œμ„ λ‹΄λ‹Ήν–ˆμŠ΅λ‹ˆλ‹€.

κΈ°λ°˜μ„ λ§Œλ“€μ–΄κ°€λŠ” κ²½ν—˜μ„ ν–ˆμŠ΅λ‹ˆλ‹€.
μ œμ•½ μ—†λŠ” ν™˜κ²½μœΌλ‘œ BE κ°œλ°œλ„ ν•΄λ³Ό 수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€.
κ°œλ°œλ¬Έν™”κ°€ μ„±μˆ™ν•œ μ‘°μ§μ—μ„œ μΌν•˜κ³  μ‹Άμ–΄ μ΄μ§ν–ˆμŠ΅λ‹ˆλ‹€.
{
  skills: {
    fe: {
      js: ["typescript", "es6"],
      react: ["react-admin", "mui"]
    },
    be: {
      node: ["express"],
      java: ["spring boot"]
    },
    vcs: ["git", "gitlab"]
  }
}

ν¬μ‹œμ—μŠ€

2019.06 - 2022.02 (2λ…„ 8κ°œμ›”)
Software Engineer
OZReport HTML λ·°μ–΄ κΈ°λŠ₯을 κ°œλ°œν–ˆμŠ΅λ‹ˆλ‹€.

개발 ν”„λ‘œμ„ΈμŠ€μ— 맞좰 μΌν•˜λŠ” 법을 λ°°μ› μŠ΅λ‹ˆλ‹€.
주어진 과제λ₯Ό μ˜λ„λŒ€λ‘œ κ΅¬ν˜„ν•˜λŠ” 것에 μ§‘μ€‘ν–ˆμŠ΅λ‹ˆλ‹€.
였래되고 λ³΅μž‘ν•œ μ†”λ£¨μ…˜ μ½”λ“œλ₯Ό λ‹€λ£¨λŠ” κ²½ν—˜μ„ ν–ˆμŠ΅λ‹ˆλ‹€.
λ‹€μ–‘ν•œ 기술 μŠ€νƒμ„ κ²½ν—˜ν•΄λ³΄κ³  μ‹Άμ–΄ μ΄μ§ν–ˆμŠ΅λ‹ˆλ‹€.
{
  skills: {
    fe: {
      html5: {
        js: ["vanila js(ES5)", "jQuery"]
      },
      flash: ["ActionScript"],
      java: ["Applet"]
    },
    vcs: ["git", "gitlab"]
  }
}

기타 κ²½ν—˜

μŒμš©κ΅μœ‘μ„Όν„° ꡐ윑 κ³Όμ •

Python Java μ‘μš© SW 싀무 개발자 μ–‘μ„±κ³Όμ • 수료
2018.10 - 2019.05 (7κ°œμ›”)

λ―Έλž˜μœ΅ν•©μ •λ³΄κΈ°μˆ  인턴

2018.01 - 2018.06 (5κ°œμ›”)
μΈν„΄μœΌλ‘œ 개발 μ€‘μ΄λ˜ μ†”λ£¨μ…˜ QA 업무λ₯Ό μˆ˜ν–‰ν–ˆμŠ΅λ‹ˆλ‹€.

영ꡭ μ›Œν‚Ήν™€λ¦¬λ°μ΄

YMS(Youth Mobility Scheme) λΉ„μžλ‘œ ν•΄μ™Έ 체λ₯˜ν–ˆμŠ΅λ‹ˆλ‹€.
2015.06 - 2017.06 (2λ…„)

λ™κ΅­λŒ€ν•™κ΅ 멀티미디어곡학과 μ‘Έμ—…

2010.03 - 2018.08

μ†Œν”„νŠΈμŠ€ν‚¬

ν•¨κ»˜ 자라기λ₯Ό 지ν–₯ν•©λ‹ˆλ‹€.
μ• μžμΌ 선언을 λ”°λ₯΄κΈ° μœ„ν•΄ λ…Έλ ₯ν•©λ‹ˆλ‹€.
μš”κ΅¬μ‚¬ν•­μ΄ 틀릴 수 μžˆλ‹€λŠ” 점을 염두에 두고 κ³ λ―Όν•©λ‹ˆλ‹€.
적극적으둜 μ§ˆλ¬Έν•˜κ³  상황을 κ³΅μœ ν•©λ‹ˆλ‹€.
ν•΄κ²°ν•˜κΈ° μ–΄λ €μš΄ λ¬Έμ œμ— λŒ€ν•΄ 도움을 μš”μ²­ν•©λ‹ˆλ‹€.
νŒ€ μ•ˆμ—μ„œ λ‚΄ 일과 λ‚¨μ˜ 일의 경계λ₯Ό 두지 μ•ŠμœΌλ € ν•©λ‹ˆλ‹€.

ν”„λ‘œμ νŠΈ κ²½ν—˜

λ©”λ””μΏΌν„°μŠ€ (2023 ~ ν˜„μž¬)

nugu λͺ° μ΅œμ ν™”

πŸ€” λ°°κ²½
일본 인터넷 속도가 ν•œκ΅­μ— λΉ„ν•΄ 느렀 속도관련 μ΄μŠˆλ“€μ΄ 주기적으둜 μΈμž…λμ—ˆκ³  κΈ°μ‘΄ λͺ°μ˜ 크둬 κ°œλ°œμžλ„κ΅¬ λΌμ΄νŠΈν•˜μš°μŠ€, 퍼포먼슀 νƒ­ μΈ‘μ •κ²°κ³Όκ°€ 쒋지 μ•Šμ•„ μ΅œμ ν™”λ₯Ό μ§„ν–‰ν–ˆμŠ΅λ‹ˆλ‹€.

🚧 진행
β‹… λ§Žμ€ μƒνƒœμ™€ λ‹€λ₯Έ 관심을 κ°–λŠ” 훅듀이 μ„žμΈ 큰 μ»΄ν¬λ„ŒνŠΈλ“€μ΄ λ§Žμ•˜μŠ΅λ‹ˆλ‹€. μž‘μ€ μ»΄ν¬λ„ŒνŠΈλ“€λ‘œ λΆ„λ¦¬ν•˜μ—¬ κ΄€λ ¨ μƒνƒœμ™€ 훅을 λΆ„λ¦¬ν•˜λŠ” ꡬ쑰 μ΅œμ ν™”ν–ˆμŠ΅λ‹ˆλ‹€.
β‹… λΆˆν•„μš”ν•œ ν”„λ‘­ λ“œλ¦΄λ§μ΄ λ§Žμ•„ μ „μ—­ μƒνƒœ κ³΅μœ κ°€ ν•„μš”ν•˜λ©΄ jotai Atom을 μ€‘μ²©λœ μ»΄ν¬λ„ŒνŠΈ μƒνƒœ κ³΅μœ κ°€ ν•„μš”ν•˜λ©΄ μ»¨ν…μŠ€νŠΈ APIλ₯Ό ν™œμš©ν•˜λ„λ‘ μˆ˜μ •ν•˜μ—¬ λΆˆν•„μš”ν•œ ν”„λ‘­ λ“œλ¦΄λ§μ„ μ€„μ˜€μŠ΅λ‹ˆλ‹€.
β‹… form ν•„λ“œλ³„λ‘œ 직접 μ œμ–΄ν•˜λ˜ μƒνƒœ(isSubmitting, errors)듀이 λ§Žμ•˜κ³  ν•„λ“œ μœ νš¨μ„± 검사가 submitν•˜λŠ” μ‹œμ μ— ν•œ κ³³μ—μ„œ 이뀄지고 μžˆμ–΄ 응집도가 떨어진닀 νŒλ‹¨ν–ˆμŠ΅λ‹ˆλ‹€. react-hook-form λͺ¨λ“ˆμ„ μ μš©ν•˜μ—¬ μƒνƒœκ°’ 관리λ₯Ό μœ„μž„μ‹œμΌœ 직접 μ œμ–΄ν•˜λ˜ μƒνƒœ 값듀을 μ œκ±°ν–ˆκ³  ν•„λ“œ μ»΄ν¬λ„ŒνŠΈ λ‚΄μ—μ„œ μœ νš¨μ„± 검사 μ½”λ“œκ°€ ν¬ν•¨λ˜κ²Œ ν•˜μ—¬ 응집도λ₯Ό λ†’μ˜€μŠ΅λ‹ˆλ‹€.
β‹… μ„œλ²„ μƒνƒœκ°’λ“€μ΄ λΆˆν•„μš”ν•˜κ²Œ 반볡 μš”μ²­λ˜λŠ” κ²½μš°λ“€μ΄ λ§Žμ•„ react-query둜 μ„œλ²„ μƒνƒœλ₯Ό κ΄€λ¦¬ν•˜λ„λ‘ μˆ˜μ •ν•˜μ—¬ μΊμ‹œλ₯Ό ν™œμš©ν•΄ λΆˆν•„μš”ν•œ μš”μ²­μ„ μ œκ±°ν–ˆμŠ΅λ‹ˆλ‹€.
β‹… 뷰포트 μ˜€λ²„ν”Œλ‘œλ˜λŠ” μ˜μ—­μ˜ μš”μ†ŒκΉŒμ§€ λͺ¨λ‘ λ Œλ”λ§ν•˜μ—¬ λΆˆν•„μš”ν•˜κ²Œ λ§Žμ€ μš”μ†Œλ“€μ΄ λ Œλ”λ§λ˜κ³  μžˆμ—ˆμŠ΅λ‹ˆλ‹€. μœˆλ„μš° 가상화(tanstack/react-virtual)λ₯Ό μ μš©ν•˜μ—¬ 뷰포트 λ°– μš”μ†Œλ“€μ€ λ Œλ”λ§λ˜μ§€ μ•Šλ„λ‘ ν–ˆμŠ΅λ‹ˆλ‹€.
β‹… 동일 κΈ°λŠ₯을 ν•˜λŠ” λͺ¨λ“ˆ 쀑 λ²ˆλ“€ μ‚¬μ΄μ¦ˆκ°€ 더 μž‘μ€ λͺ¨λ“ˆμ„ μ°Ύμ•„ κ΅μ²΄ν–ˆμŠ΅λ‹ˆλ‹€. (classNames β†’ clsx, react-virtualized β†’ tanstack/react-virtual)
β‹… μ™ΈλΆ€ 슀크립트 λ‘œλ“œλ‘œ μΈν•œ Total Blocking Time이 λ°œμƒν•˜κ³  μžˆμ—ˆμŠ΅λ‹ˆλ‹€. next/script λ‘œλ“œ μ „λž΅μ„ λ³€κ²½(beforeInteractive β†’ afterInteractive)ν•˜μ—¬ Total Blocking Time을 κ°œμ„ ν–ˆμŠ΅λ‹ˆλ‹€.
β‹… CDN의 μ—°κ²°μ‹œκ°„μ„ λ‹¨μΆ•μ‹œν‚€κ³ μž CDN 프리컀λ„₯트 링크λ₯Ό μΆ”κ°€ν–ˆμŠ΅λ‹ˆλ‹€.
β‹… LCPλ₯Ό μ€„μ΄κ³ μž κ°€μž₯ 큰 λ Œλ”λ§ μš”μ†ŒμΈ 이미지에 fetchPriority high μΆ”κ°€ν–ˆμŠ΅λ‹ˆλ‹€. 
β‹… ν”Œλ ˆμ΄μŠ€ 홀더가 μ—†λŠ” 경우, μžˆμ–΄λ„ λ Œλ”λ§λ˜λŠ” 크기와 λ‹€λ₯Έ κ²½μš°λ“€μ΄ μ‘΄μž¬ν•΄μ„œ CLSκ°€ λ°œμƒν•˜κ³  μžˆμ—ˆμŠ΅λ‹ˆλ‹€. λ Œλ”λ§λ˜λŠ” μš”μ†Œμ™€ λ™μΌν•œ ν”Œλ ˆμ΄μŠ€ 홀더λ₯Ό μΆ”κ°€ν•˜κ³  ν•„μš”ν•œ 경우 μ΅œμ†Œ 높이λ₯Ό μ„€μ •ν•˜μ—¬ λ ˆμ΄μ•„μ›ƒ μ‰¬ν”„νŠΈλ₯Ό λ°©μ§€ν–ˆμŠ΅λ‹ˆλ‹€.
β‹… μƒν•˜ 여백을 λ„£κΈ° μœ„ν•΄μ„œλ§Œ μ‚¬μš©ν•˜λ˜ μ»΄ν¬λ„ŒνŠΈκ°€ μžˆμ—ˆλŠ”λ° μ£Όλ³€ μš”μ†Œλ“€μ˜ margin, padding값을 적절히 μ£Όλ©΄ μ œκ±°κ°€λŠ₯ν•˜λ‹¨ νŒλ‹¨μ— DOM μš”μ†Œλ₯Ό μ€„μ΄κ³ μž μ œκ±°ν–ˆμŠ΅λ‹ˆλ‹€.
β‹… 맀번 μ„œλ²„ λ Œλ”λ§μ΄ ν•„μš”ν•˜μ§€ μ•Šκ±°λ‚˜ 데이터 변경이 λΉˆλ²ˆν•˜μ§€ μ•Šμ€ νŽ˜μ΄μ§€λ“€μ€ SSR λŒ€μ‹  ISR νŽ˜μ΄μ§€λ‘œ λ³€κ²½ν–ˆμŠ΅λ‹ˆλ‹€.

πŸ™Œ κ²°κ³Ό
β‹… μ»΄ν¬λ„ŒνŠΈλ₯Ό λΆ„λ¦¬ν•˜μ—¬ 문제 λ°œμƒ μ‹œ 확인해야 ν•  μ»΄ν¬λ„ŒνŠΈ μ½”λ“œλ₯Ό 쀄여 DXλ₯Ό κ°œμ„ ν–ˆμŠ΅λ‹ˆλ‹€.
β‹… λ²ˆλ“€ μ‚¬μ΄μ¦ˆκ°€ μ•½ 0.5MB κ°μ†Œν–ˆμŠ΅λ‹ˆλ‹€.
β‹… λͺ° νŽ˜μ΄μ§€ λ‘œλ”© 속도가 κ°œμ„ λ˜μ—ˆμŠ΅λ‹ˆλ‹€.
  β‹… 메인 νŽ˜μ΄μ§€ κΈ°μ€€ μΈ‘μ •κ²°κ³Ό
    β‹… FCP 이전츑정 기둝 깜빑 🫠 β†’ 404ms
    β‹… LCP 이전츑정 기둝 깜빑 🫠 β†’ 0.48s
    β‹… Total Blocking Time 이전츑정 기둝 깜빑 🫠 β†’ 600ms 
    β‹… 퍼포먼슀 점수 28 β†’ 43
    β‹… CLS 0 달성 πŸŽ‰
β‹… μœˆλ„μš° 가상화 적용 ν›„ 졜초 μƒν’ˆ μΉ΄λ“œ λ Œλ”λ§ μš”μ†Œκ°€ μ΅œλŒ€ 95% κ°μ†Œλ˜μ—ˆμŠ΅λ‹ˆλ‹€. κ°€μž₯ 많이 κ°μ†Œν•œ νŽ˜μ΄μ§€λŠ” μƒν’ˆ μΉ΄λ“œ λ Œλ”λ§ μš”μ†Œκ°€ 1403κ°œμ—μ„œ 64개둜 κ°μ†Œν–ˆμŠ΅λ‹ˆλ‹€.

nugu λͺ° μŠ€νƒ€μΌλ§ μ„œλΉ„μŠ€ 개발

πŸ€” λ°°κ²½
μΈμŠ€νƒ€ μŠ€ν† λ¦¬μ²˜λŸΌ λΈŒλžœλ“œμ™€ μΈν”Œλ£¨μ–Έμ„œλ“€μ˜ μŠ€νƒ€μΌ 컨텐츠λ₯Ό 올릴 수 μžˆλŠ” μ„œλΉ„μŠ€ λ‹ˆμ¦ˆκ°€ μžˆμ–΄ κ°œλ°œν•˜κ²Œ λμŠ΅λ‹ˆλ‹€.

🚧 진행
β‹… 기획 1λͺ…, BE 1λͺ…, FE 3λͺ… TFνŒ€μœΌλ‘œ κ΅¬μ„±λœ νŒ€μ—μ„œ FE λ¦¬λ“œλ₯Ό 맑아 ν˜‘μ—…ν–ˆμŠ΅λ‹ˆλ‹€.
β‹… μ£Όλ‹ˆμ–΄ κ°œλ°œμžλ“€κ³Ό νŽ˜μ–΄ ν”„λ‘œκ·Έλž˜λ°μœΌλ‘œ μ§„ν–‰ν•˜λ©° μ½”μΉ­ 및 μ½”λ“œλ¦¬λ·°λ₯Ό μ§„ν–‰ν–ˆμŠ΅λ‹ˆλ‹€.
β‹… λ™μ˜μƒ 슀트리밍 κΈ°λŠ₯을 κ΅¬ν˜„(hls.js)ν–ˆμŠ΅λ‹ˆλ‹€. μΈν”Όλ‹ˆν‹° 슀크둀 μ‹œ λΉ„λ””μ˜€ λˆ„μ μœΌλ‘œ μΈν•œ λ©”λͺ¨λ¦¬ μ˜€λ²„ν”Œλ‘œμš° μ΄μŠˆκ°€ λ°œμƒν•˜μ—¬ μœˆλ„μš° 가상화 κ΅¬ν˜„(react-virtualized)으둜 ν•΄κ²°ν–ˆμŠ΅λ‹ˆλ‹€.

πŸ™Œ κ²°κ³Ό
β‹… μ˜ˆμƒ κΈ°ν•œμ— 맞좰 이슈 없이 μ„œλΉ„μŠ€ μΆœμ‹œλ˜μ—ˆμŠ΅λ‹ˆλ‹€.
β‹… 2025λ…„ 7μ›” κΈ°μ€€ μ•½ 500λͺ…μ˜ μΈν”Œλ£¨μ–Έμ„œκ°€ 4000개 μ΄μƒμ˜ 컨텐츠λ₯Ό λ“±λ‘ν•˜κ³  평균 10% μž₯λ°”κ΅¬λ‹ˆ μ „ν™˜μœ¨μ„ λ‹¬μ„±ν–ˆμŠ΅λ‹ˆλ‹€.

nugu λͺ° ν”„λ‘œλͺ¨μ…˜ νŽ˜μ΄μ§€ 개발

πŸ€” λ°°κ²½
주기적으둜 μΈν„°λ ‰ν‹°λΈŒν•œ μš”μ†Œκ°€ ν¬ν•¨λœ ν”„λ‘œλͺ¨μ…˜ νŽ˜μ΄μ§€ κ°œλ°œμš”μ²­μ΄ μžˆμ–΄ 이λ₯Ό μ§€μ›ν–ˆμŠ΅λ‹ˆλ‹€.

🚧 진행
β‹… λ§ˆμΌ€νŒ…, 기획, λ””μžμΈνŒ€κ³Ό ν˜‘μ—…, μŠ€ν† λ¦¬ λ³΄λ“œ μ°Έκ³ ν•˜μ—¬ ν”„λ‘œλͺ¨μ…˜ νŽ˜μ΄μ§€ κ°œλ°œν–ˆμŠ΅λ‹ˆλ‹€.
β‹… ν”„λ‘œλͺ¨μ…˜ 용 APIλ₯Ό λ§Œλ“€μ–΄ λ°±μ•€λ“œ κ°œλ°œλ„ 같이 μ§„ν–‰ν–ˆμŠ΅λ‹ˆλ‹€.

πŸ™Œ κ²°κ³Ό
β‹… μΆœμ„μ²΄ν¬ 이벀트, 랜덀 쿠폰, μ„ μ°©μˆœ 쿠폰 λ“± λ‹€μ–‘ν•œ ν”„λ‘œλͺ¨μ…˜ μš”μ²­ κΈ°λŠ₯듀을 κ΅¬ν˜„ν–ˆμŠ΅λ‹ˆλ‹€.
β‹… 반볡 μ‚¬μš©λ˜λŠ” 이벀트 κ΄€λ ¨ μ»΄ν¬λ„ŒνŠΈλ“€ μΆ”μƒν™”ν•˜μ—¬ μž¬μ‚¬μš©μ„± ν–₯μƒν–ˆμŠ΅λ‹ˆλ‹€.
  β‹… ν”„λ‘œλͺ¨μ…˜ νŽ˜μ΄μ§€κ°€ 기간에 맞좰 μžλ™κ΅μ²΄λ˜λ„λ‘ ν•˜μ—¬ 직접 μ‹œκ°„λ§žμΆ° ν•˜λ˜ λΆˆν•„μš”ν•œ 배포λ₯Ό μ œκ±°ν–ˆμŠ΅λ‹ˆλ‹€.

업무 μ™Έ 자발적 κΈ°μ—¬ 및 κ°œμ„ 

πŸ€” λ°°κ²½
ν•˜λ©΄ 쒋을 것듀을 Fun List(TODO)에 λͺ¨μ•„λ’€λ‹€κ°€ μ—¬μœ κ°€ μžˆμ„ λ•Œ κΊΌλ‚΄ μ²˜λ¦¬ν–ˆμŠ΅λ‹ˆλ‹€.

🚧 진행 및 πŸ™Œ κ²°κ³Ό
β‹… 개발 ν™˜κ²½μ—μ„œ μ‹€μ œ CDN 이미지 λŒ€μ‹  더미 이미지λ₯Ό μ‚¬μš©ν•˜λŠ” ν™˜κ²½λ³€μˆ˜ μΆ”κ°€ν–ˆμŠ΅λ‹ˆλ‹€. 개발 쀑엔 λΆˆν•„μš”ν•œ CDN λ¦¬μ†ŒμŠ€λ₯Ό μ‚¬μš©ν•˜μ§€ μ•Šλ„λ‘ ν•˜μ—¬ λΉ„μš©μ„ μ ˆκ°ν–ˆμŠ΅λ‹ˆλ‹€.
β‹… git PR template을 μΆ”κ°€ν•˜μ—¬ μ½”λ“œλ¦¬λ·° μ‹œ ν•„μš”ν•œ 정보λ₯Ό ν•„μˆ˜ κΈ°μž…ν•  수 있게 κ°€μ΄λ“œν–ˆμŠ΅λ‹ˆλ‹€. PR μž‘μ—… λ‚΄μš©μ„ μ •ν˜•ν™”ν•˜μ—¬ μ½”λ“œλ¦¬λ·° μ‹œ μ°Έκ³ ν•  수 μžˆλ„λ‘ ν–ˆμŠ΅λ‹ˆλ‹€.
β‹… μžμ‚¬λͺ° ν• μΈμƒν’ˆλ“€μ„ λͺ¨μ•„λ³΄λŠ” νŽ˜μ΄μ§€λ₯Ό λ§Œλ“€μ–΄ νŒ€μ— κ³΅μœ ν•˜μ—¬ νŒ€μ›λ“€μ΄ μžμ‚¬λͺ° ν• μΈμƒν’ˆλ“€μ„ μ‰½κ²Œ λ³Ό 수 μžˆλ„λ‘ ν–ˆμŠ΅λ‹ˆλ‹€.

2023 ~ 2024 μž‘μ—…λ‚΄μš© μš”μ•½

nugu λͺ° UI 고도화
β‹… nextjs12β†’14둜 버전업: nextjs λ§ˆμ΄λ„ˆ 이슈 ν•΄κ²°, μ•± λΌμš°ν„°λ‘œ μ „ν™˜ κ°€λŠ₯ν•œ 기반 ꡬ좕
β‹… Figma λ””μžμΈ 기반 λ””μžμΈ 리뉴얼: 기획, λ””μžμΈ νŒ€κ³Ό ν˜‘μ—…ν•˜μ—¬ UI/UX κ°œμ„ 
β‹… Storybook을 λ„μž…ν•˜μ—¬ 일뢀 곡용 μ»΄ν¬λ„ŒνŠΈλ“€μ„ μŠ€ν† λ¦¬λ‘œ μΆ”μΆœ: κ΅¬ν˜„μ΄ νŒŒνŽΈν™”λœ 곡용 μ»΄ν¬λ„ŒνŠΈλ“€μ„ ν•˜λ‚˜μ˜ μ»΄ν¬λ„ŒνŠΈλ‘œ 톡합
β‹… vitest, react testing library둜 λ¦¬νŒ©ν„°λ§ μ§„ν–‰ν•œ 일뢀 μ»΄ν¬λ„ŒνŠΈλ“€ TDD 진행: ν…ŒμŠ€νŠΈ μ½”λ“œ μž‘μ„±μœΌλ‘œ μ»΄ν¬λ„ŒνŠΈ μ•ˆμ •μ„± 확보

nugu κΈ°νšμ „ 퍼블리싱
β‹… λ””μžμΈ μš”κ΅¬μ‚¬ν•­μ— 맞좰 flex, gridλ₯Ό μ΄μš©ν•˜μ—¬ λ‹€μ–‘ν•œ λ ˆμ΄μ•„μ›ƒ ꡬ성, μ˜μƒ, μ• λ‹ˆλ©”μ΄μ…˜ λ“± μš”κ΅¬μ‚¬ν•­μ„ λ§žμΆ”κΈ° μœ„ν•΄ vimeo sdk, aos λ“± λͺ¨λ“ˆμ„ μ‚¬μš©

nugu λͺ°, μ–΄λ“œλ―Ό(Back Office) 개발
β‹… cafe24 λͺ°κ³Ό μ–΄λ“œλ―Όμ„ μžμ‚¬ λͺ°, μ–΄λ“œλ―ΌμœΌλ‘œ 이관: cafe24 쒅속성 제거
β‹… μŠ€ν¬λž˜ν•‘μ„ 톡해 cafe24 데이터 λ§ˆμ΄κ·Έλ ˆμ΄μ…˜
β‹… κ²Œμ‹œλ¬Ό 관리 κΈ°λŠ₯(tinymce, ace editor, dropzone) κ΅¬ν˜„
β‹… μΉ΄ν…Œκ³ λ¦¬ 관리 κΈ°λŠ₯(fancytree) κ΅¬ν˜„
β‹… μƒν’ˆ 관리 κΈ°λŠ₯ κ΅¬ν˜„
β‹… μ…€λ©”μ΄νŠΈ μƒν’ˆ 동기화 κΈ°λŠ₯ 개발

μ—λ²„μ˜¨ (2022)

μ°¨μ„ΈλŒ€ λ°±μ˜€ν”ΌμŠ€ κΈ°λŠ₯ 개발

β‹… react-admin ν”„λ ˆμž„μ›Œν¬λ₯Ό μ΄μš©ν•œ μ–΄λ“œλ―Ό νŽ˜μ΄μ§€ κ΅¬ν˜„
β‹… Keycloak을 μ΄μš©ν•œ RBAC SSO κ΅¬ν˜„
β‹… Dooray! 그룹웨어 연동
β‹… nivo κ·Έλž˜ν”„ λͺ¨λ“ˆμ„ μ΄μš©ν•œ 톡계 λŒ€μ‹œλ³΄λ“œ ꡬ좕
β‹… κ²Œμ‹œνŒμœΌλ‘œ κ΄€λ¦¬λ˜λ˜ 고객 문의λ₯Ό μΉΈλ°˜λ³΄λ“œ UI둜 이관: 고객 문의 관리 ν™˜κ²½ κ°œμ„ 
β‹… SVN으둜 κ΄€λ¦¬ν•˜λ˜ μ†ŒμŠ€μ½”λ“œλ₯Ό Gitlab으둜 이관: μ†ŒμŠ€μ½”λ“œ 관리 ν™˜κ²½ κ°œμ„ 

ν¬μ‹œμ—μŠ€ (2019 ~ 2022)

였즈리포트 HTML5 λ·°μ–΄ μ†”λ£¨μ…˜ 개발

β‹… λ‹€μ–‘ν•œ λΈŒλΌμš°μ € ν˜Έν™˜μ„±(IE8~)을 κ³ λ €ν•˜λŠ” 개발 κ²½ν—˜
β‹… 동일 λ‘œμ§μ„ μ‚¬μš©ν•˜λŠ” λ‹€μ–‘ν•œ μ–Έμ–΄(C++, C#, Applet, ActionScript)의 μ œν’ˆλ“€μ΄ μžˆμ–΄ λ‹€μ–‘ν•œ 개발 μ–Έμ–΄λ‘œ κΈ°λŠ₯ ν¬νŒ… κ²½ν—˜
β‹… λ·°μ–΄ λ‚΄μš©μ„ 슀크린 리더(μ„ΌμŠ€λ¦¬λ”)둜 읽을 수 μžˆλ„λ‘ μ ‘κ·Όμ„± κ°œμ„ 
β‹… μ „μžλ¬Έμ„œ 좜λ ₯ μ‹œ 인증 λ°”μ½”λ“œ μ†”λ£¨μ…˜ 연동(MarkAny, SGA)
β‹… opencv-js, zxing 라이브러리λ₯Ό μ΄μš©ν•˜μ—¬ 인감 μŠ€μΊ”, μΉ΄λ“œ μŠ€μΊ” κΈ°λŠ₯ κ΅¬ν˜„
β‹… λ·°μ–΄ 동기화 쀑계 μ„œλ²„ λͺ¨λ“ˆ 개발
β‹… WYSIWYG νŽΈμ§‘κΈ°(summernote) μž„λ² λ”© κΈ°λŠ₯ 개발

ν† μ΄ν”„λ‘œμ νŠΈ

πŸ”” λͺ¨λ°”일 청첩μž₯(2025)

λͺ¨λ°”일 청첩μž₯ κ°œλ°œν–ˆμŠ΅λ‹ˆλ‹€. λ°©λͺ…둝, κΈΈμ°ΎκΈ° κΈ°λŠ₯을 μ œκ³΅ν–ˆμŠ΅λ‹ˆλ‹€.

πŸ› οΈ μ‚¬μš©
β‹… NextJS app router RSC
β‹… tanstack query
β‹… tailwindcss
β‹… firebase
β‹… NAVER map API # λΌμ΄μ„ΌμŠ€ λ³€κ²½μœΌλ‘œ ν˜„μž¬λŠ” 제거

πŸš€ 배포
β‹… Vercel

πŸ‘• λ©”λ””μΏΌν„°μŠ€ μžμ‚¬λͺ° μƒν’ˆ λͺ¨μ•„λ³΄λŠ” νŽ˜μ΄μ§€(2025)

μž„μ§μ›μš© μžμ‚¬λͺ° 할인 μƒν’ˆμ„ λͺ¨μ•„λ³Ό 수 μžˆλŠ” νŽ˜μ΄μ§€λ₯Ό κ°œλ°œν–ˆμŠ΅λ‹ˆλ‹€.
cafe24둜 μš΄μ˜μ€‘μΈ μ—¬λŸ¬ μžμ‚¬λͺ° μƒν’ˆλ“€μ„ λͺ¨μ•„λ³Ό 수 있게 ν–ˆμŠ΅λ‹ˆλ‹€.

πŸ› οΈ μ‚¬μš©
β‹… NextJS app router RSC
β‹… tanstack query
β‹… tailwindcss

πŸš€ 배포
β‹… Vercel

πŸ… domado(2024)

개인적으둜 λ½€λͺ¨λ„λ‘œλ₯Ό μ‚¬μš©ν•˜κΈ° μœ„ν•΄ μΌλ ‰νŠΈλ‘  λ½€λͺ¨λ„λ‘œ 앱을 λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€.

πŸ› οΈ μ‚¬μš©
β‹… electron-react-boilerplate

πŸš€ 배포
β‹… github release

πŸ‡°πŸ‡· react-simple-south-korea-map-chart(2022)

지역별 톡계 정보λ₯Ό 보여쀄 수 μžˆλŠ” κ°„λ‹¨ν•œ ν•œκ΅­ 지도 차트 μ»΄ν¬λ„ŒνŠΈλ₯Ό λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€.

πŸ› οΈ μ‚¬μš©
β‹… React

πŸš€ 배포
β‹… npm

πŸ§— Pick Your Holds(2022)

사진 촬영 ν›„ 클라이밍 문제λ₯Ό λ§Œλ“€μ–΄ 이미지λ₯Ό κ³΅μœ ν•  수 μžˆλŠ” 웹앱을 λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€.

πŸ› οΈ μ‚¬μš©
β‹… vanilaJS(jQuery), React

πŸš€ 배포
β‹… 이전 λΈ”λ‘œκ·Έ(github.io)에 배포
profile