PageSourceSearch

https://www.kimcoder.io/resume

html kimcoder.io collected 2026-09-24 15:03:34 UTC 142,374 bytes, 16 lines download raw bytes

1<!DOCTYPE html><html lang="ko"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, viewport-fit=cover"/><meta name="google-site-verification" content="vtaBV0ETmVVgtWBi6a2TUBROjDjHCT5hILk7MxdF7B0"/><style>
2        @media (max-width: 390px) {
3            .formkit-slide-in {
4              display: none;
5            }
6          }
7          @media (max-height: 740px) {
8            .formkit-slide-in {
9              display: none;
10            }
11          }
12          </style><link rel="preconnect" href="https://KB3ECWAG70-dsn.algolia.net" crossorigin="true"/><title>김대현 이력서 | kimcoder</title><meta name="description" content="프론트엔드 개발자 김대현의 이력서입니다."/><meta name="keywords" content="개발자 이력서, 프론트엔드개발자 이력서, FE 이력서, Frontend Engineer Resume, Engineering Resume"/><link rel="icon" type="image/x-icon" href="/favicon.png"/><link rel="apple-touch-icon" href="/favicon.png"/><meta property="og:type" content="website"/><meta property="og:url" content="https://kimcoder.io"/><meta property="og:title" content="김대현 이력서"/><meta property="og:description" content="프론트엔드 개발자 김대현의 이력서입니다."/><meta property="og:image" content="/kimcoder-og.png"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="@kimcoder"/><meta name="twitter:creator" content="@kimcoder"/><meta name="twitter:title" content="김대현 이력서"/><meta name="twitter:description" content="프론트엔드 개발자 김대현의 이력서입니다."/><meta name="twitter:image" content="/kimcoder-og.png"/><meta name="next-head-count" content="22"/>
12<script>
vendor: 327 bytes, lines 12-16
12(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
13new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
14j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
15'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
16})(window,document,'script','dataLayer','
16GTM-MKLQHRB
vendor: 3 bytes, line 16
16');
16</script>
16<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /><link rel="preload" href="/_next/static/css/5ca929a8400de023.css" as="style" crossorigin=""/><link rel="stylesheet" href="/_next/static/css/5ca929a8400de023.css" crossorigin="" data-n-g=""/><link rel="preload" href="/_next/static/css/45d6380887ec15bb.css" as="style" crossorigin=""/><link rel="stylesheet" href="/_next/static/css/45d6380887ec15bb.css" crossorigin="" data-n-p=""/><noscript data-n-css=""></noscript>
16<script defer="" crossorigin="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script>
16<script src="/_next/static/chunks/webpack-df1f9c351e43cde0.js" defer="" crossorigin=""></script>
16<script src="/_next/static/chunks/framework-fda0a023b274c574.js" defer="" crossorigin=""></script>
16<script src="/_next/static/chunks/main-c69e4a6afd49bbe5.js" defer="" crossorigin=""></script>
16<script src="/_next/static/chunks/pages/_app-37680da0538876f5.js" defer="" crossorigin=""></script>
16<script src="/_next/static/chunks/336-1f3c353cd534fe20.js" defer="" crossorigin=""></script>
16<script src="/_next/static/chunks/234-f2d853756f716fd0.js" defer="" crossorigin=""></script>
16<script src="/_next/static/chunks/404-8d398fa1a0c9b7fc.js" defer="" crossorigin=""></script>
16<script src="/_next/static/chunks/pages/resume-013dbe598e1c4f5c.js" defer="" crossorigin=""></script>
16<script src="/_next/static/mYpFDr1DZDEyR2tzQItwY/_buildManifest.js" defer="" crossorigin=""></script>
16<script src="/_next/static/mYpFDr1DZDEyR2tzQItwY/_ssgManifest.js" defer="" crossorigin=""></script>
16<style id="__jsx-6e762080cf24aab">div.jsx-6e762080cf24aab{background:#fff;position:-webkit-sticky;position:sticky}div.shadow.jsx-6e762080cf24aab{-webkit-box-shadow:rgba(0,0,0,.06)0px 6px 20px;-moz-box-shadow:rgba(0,0,0,.06)0px 6px 20px;box-shadow:rgba(0,0,0,.06)0px 6px 20px}</style><style data-href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/l/font?kit=UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZs&skey=c491285d6722e4fa&v=v20) format('woff')}@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/l/font?kit=UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI6fMZs&skey=c491285d6722e4fa&v=v20) format('woff')}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/l/font?kit=UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYMZs&skey=c491285d6722e4fa&v=v20) format('woff')}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/l/font?kit=UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYMZs&skey=c491285d6722e4fa&v=v20) format('woff')}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');
16unicode-range:U+1F00-1FFF}@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
16src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}</style></head><body class="font-sans antialiased text-gray-900"><div id="__next"><div class="resume_resume__SbpEK h-full min-h-full"><div style="top:0" class="jsx-6e762080cf24aab z-10"><div class="border-b border-gray-200 bg-white"><div class="container mx-auto"><div class="flex flex-wrap items-center"><div class="nav-height flex w-60 items-center"><a href="/"><h1 id="page-title">@kimcoder</h1></a></div><div class="flex-grow hidden lg:block ml-8"><div><button type="button" class="group py-2 px-3 border-gray-200 border hover:text-gray-600 hover:border-gray-300 transition duration-150 ease-in-out pointer flex items-center bg-gray-50 text-left w-full text-gray-500 rounded-lg text-sm align-middle"><svg width="1em" height="1em" class="mr-3 align-middle text-gray-600 flex-shrink-0 group-hover:text-gray-700" style="margin-bottom:2px" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg>Search words<span class="ml-auto invisible lg:visible"><kbd class="border border-gray-300 mr-1 bg-gray-100 align-middle p-0 inline-flex justify-center items-center  text-xs text-center mr-0 rounded group-hover:border-gray-300 transition duration-150 ease-in-out " style="min-width:1.8em">⌘</kbd><kbd class="border border-gray-300 bg-gray-100 align-middle p-0 inline-flex justify-center items-center  text-xs text-center ml-auto mr-0 rounded group-hover:border-gray-300 transition duration-150 ease-in-out " style="min-width:1.8em">K</kbd></span></button></div></div><div class="flex-grow nav-height flex w-3/4 items-center justify-between space-x-4 md:w-auto md:justify-end md:space-x-8"><div class="flex space-x-4 text-sm md:space-x-8 md:text-base"><div><a class="font-medium leading-6" href="/blog">Blog</a></div><div><a class="font-medium leading-6" href="/books">Books</a></div></div><div class="flex"><a href="https://github.com/kimcoder" target="_blank" rel="noopener noreferrer"><span class="sr-only">GitHub</span><svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg></a><a class="ml-2.5" href="https://www.facebook.com/kimcoder" target="_blank" rel="noopener noreferrer"><span class="sr-only">LinkedIn</span><svg width="24" height="24" viewBox="0 0 30 30" fill="#1877f2"><path d="M30 15.091C30 6.756 23.285 0 15 0S0 6.756 0 15.091C0 22.625 5.484 28.868 12.656 30V19.454H8.848V15.09h3.808v-3.324c0-3.782 2.239-5.872 5.666-5.872 1.64 0 3.358.295 3.358.295v3.714h-1.893c-1.863 0-2.443 1.164-2.443 2.358v2.83h4.16l-.665 4.362h-3.495V30C24.516 28.868 30 22.625 30 15.091z" fill="#1877f2"></path></svg></a><a class="ml-2.5" href="https://www.linkedin.com/in/daehyun-kim-b9a26716b/" target="_blank" rel="noopener noreferrer"><span class="sr-only">Facebook</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#0073b1"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path></svg></a></div></div></div></div></div></div><div class="container mx-auto bg-white px-4 pt-16 pb-20 lg:pt-24 lg:pb-28 flex"><div class="overflow-hidden bg-white sm:rounded-lg"><h1 class="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 sm:text-4xl sm:leading-10 lg:text-5xl ">안녕하세요. 김대현입니다.</h1><div class="lg mt-3 sm:mt-4 lg:grid lg:items-center lg:gap-5"><p class="text-xl leading-7 text-gray-600">저는 <!-- -->15<!-- -->년 ì°¨ 프론트엔드 개발자로 일하고 있으며, 다양한 사고와 도구들을 사용하여 문제를 해결하는 것을 좋아합니다.<br/>복잡한 문제들을 효율적이고 단순하게 해결하고자 노력합니다.<br/><br/>주도적으로 업무를 진행하는 것을 선호하며,<br/>비즈니스의 성장을 돕고 사용자에게 최적화된 ê²½í—
16˜ì„ 제공하는 데 높은 가치를 두고 있습니다.<br/>또한, 같이 협업하는 동료들에 대한 배려도 중요하게 생각합니다.</p></div><section class="mt-12 pt-6 grid border-gray-100 border-t first-of-type:border-none"><h2 class="text-4xl font-bold text-gray-900 mb-12" id="업무 경력"><span>업무 경력</span><a title="Direct link to heading" class="anchor" href="#업무 경력"><span class="icon icon-link"></span></a></h2><section class="mt-12 first-of-type:mt-0"><h3 class="text-3xl font-bold leading-6 text-gray-900" id="카카오페이2025"><span>카카오페이</span><a title="Direct link to heading" class="anchor" href="#카카오페이2025"><span class="icon icon-link"></span></a></h3><h3 class="mt-1 font-medium text-gray-700">2025.06 ~ 재직중</h3><div class="border-t mt-2 pt-2"><h4>광고클랜 광고플랫폼파티<!-- --> / <!-- -->팀원</h4><p class="mt-1 max-w-2xl text-sm text-gray-900">2025.06 ~ 재직중</p><div class="mt-5"><dl><div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 mt-5"><dt class="text-xl font-medium"><h4>광고플랫폼</h4><p class="text-i text-sm text-gray-500">2025.06 ~ 재직중</p></dt><dd class="mt-3 sm:mt-1 text-sm text-gray-900 sm:col-span-2"><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">설명</h5><div class="pl-2"><p class="">카카오페이 광고플랫폼은 광고주와 운영자가 캠페인·소재를 생성하고, 노출 조건을 설정하여 카카오페이 서비스 지면에 광고를 집행·관리할 수 있는 플랫폼입니다.<br/>또한, 사내의 여러 서비스에서 광고를 일관되게 서빙할 수 있도록 광고 노출/트래킹/렌더링을 표준화한 SDK도 운영합니다.</p></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">역할</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">FE 개발 리드 및 일정 관리</li><li class="mt-1 first:mt-0">플랫폼 고도화 및 신규 기능 개발</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">업무</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">광고주/운영자용 광고 서빙 플랫폼을 구축하고 캠페인/소재/노출 설정 플로우를 고도화하여 운영 효율을 개선</li><li class="mt-1 first:mt-0">캐시된 광고 서빙 결과에 대한 SDK 내부 노출 제어 로직을 개발하여 노출 품질 및 효율 개선</li><li class="mt-1 first:mt-0">외부 광고 제휴사 배너를 SDK로 표준화하여 각 서비스 지면에 손쉽게 적용할 수 있도록 지원, 도입/운영 비용 절감</li><li class="mt-1 first:mt-0">광고 서빙 플랫폼 코드 커버리지 개선 ( 0% → 20% )</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">사용 기술</h5><div class="pl-2"><ul role="list" class="flex flex-wrap children:mr-2 children:mt-2"><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Typescript</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Next.js</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React Hook Form</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200">
16<svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Zod</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>TanStack Query</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>sass</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Github</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>changesets</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Storybook</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Vitest</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React Testing Library</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>MSW</span></li></ul></div></dd></div><div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 mt-5"><dt class="text-xl font-medium"><h4>혜택</h4><p class="text-i text-sm text-gray-500">2025.09 ~ 재직중</p></dt><dd class="mt-3 sm:mt-1 text-sm text-gray-900 sm:col-span-2"><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">설명</h5><div class="pl-2"><p class="">카카오페이 혜택은 사용자가 카카오페이 앱 및 카카오톡 내 카카오페이 영역에서 리워드/프로모션/제휴 혜택을 탐색하고 참여할 수 있는 사용자 대상 서비스입니다.</p></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">역할</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">FE 개발 리드 및 일정 관리</li><li class="mt-1 first:mt-0">서비스 고도화 및 신규 기능 개발</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">업무</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">외부 광고 제휴사 및 Google AdMob 광고 연동 기반의 광고 레버리지 기능을 개발·운영하여 월 매출 KPI 목표 대비 약 110% 달성</li><li class="mt-1 first:mt-0">Google AdMob 광고 리워드 미지급 이슈를 3% → 0%로 개선하여 리워드 신뢰도 및 사용자 경험 안정화</li><li class="mt-1 first:mt-0">프로모션/리워드 혜택 지면 고도화 및 신규 기능 개발을 통해 사용자 참여 흐름(탐색 → 참여 → 전환) 개선</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">사용 기술</h5><div class="pl-2"><ul role="list" class="flex flex-wrap children:mr-2 children:mt-2"><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200">
16<svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Typescript</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Next.js</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>TanStack Query</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Github</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Storybook</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Vitest</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React Testing Library</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>MSW</span></li></ul></div></dd></div></dl></div></div></section><section class="mt-12 first-of-type:mt-0"><h3 class="text-3xl font-bold leading-6 text-gray-900" id="한국신용데이터2024"><span>한국신용데이터</span><a title="Direct link to heading" class="anchor" href="#한국신용데이터2024"><span class="icon icon-link"></span></a></h3><h3 class="mt-1 font-medium text-gray-700">2024.05 ~ 2025.06</h3><div class="border-t mt-2 pt-2"><h4>FE 협의체<!-- --> / <!-- -->챕터 리드</h4><p class="mt-1 max-w-2xl text-sm text-gray-900">2024.05 ~ 2025.06</p><div class="mt-5"><dl><div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 mt-5"><dt class="text-xl font-medium"><h4>FE 협의체</h4><p class="text-i text-sm text-gray-500">2024.05 ~ 2025.06</p></dt><dd class="mt-3 sm:mt-1 text-sm text-gray-900 sm:col-span-2"><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">설명</h5><div class="pl-2"><p class="">사내 FE 개발 환경의 표준화와 생산성 향상을 위해 FE 협의체라는 가상조직에 참여하여 다양한 기술적 기여와 개선 활동을 수행했습니다.</p></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">역할</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">챕터 리드</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">업무</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">사내 FE 표준 기술안 수립</li><li class="mt-1 first:mt-0">서비스 및 어드민 애플리케이션 저장소 템플릿 제공으로 FE 개발자들의 생산성 개선</li><li class="mt-1 first:mt-0">FE 공통 npm 패키지의 배포 및 알림 프로세스 자동화로 업무 효율 개선</li><li class="mt-1 first:mt-0">Next.js 설정을 위한 플러그인 시스템과 다양한 플러그인을 개발·제공하여 사내 FE 서비스들의 운영 효율 개선</li><li class="mt-1 first:mt-0">FE 개발자들과의 1:1 미팅과 Meet-up으로 기술 피드백 제공 및 개발 문화와 트렌드 확산에 기여</li></ul></div>
16<h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">사용 기술</h5><div class="pl-2"><ul role="list" class="flex flex-wrap children:mr-2 children:mt-2"><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Typescript</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Tailwind CSS</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Github</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>changesets</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Storybook</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Vite</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Vitest</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Rollup</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Datadog</span></li></ul></div></dd></div></dl></div></div><div class="border-t mt-2 pt-2"><h4>구독팀<!-- --> / <!-- -->팀원</h4><p class="mt-1 max-w-2xl text-sm text-gray-900">2024.05 ~ 2025.06</p><div class="mt-5"><dl><div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 mt-5"><dt class="text-xl font-medium"><h4>캐시노트 플러스 멤버십</h4><p class="text-i text-sm text-gray-500">2024.05 ~ 2025.06</p></dt><dd class="mt-3 sm:mt-1 text-sm text-gray-900 sm:col-span-2"><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">설명</h5><div class="pl-2"><p class="">캐시노트 플러스 멤버십은 장부, 마켓, 금융, 광고 등 캐시노트의 주요 기능을 선별하여 멤버십 전용 혜택으로 제공하는 서비스입니다.<br/>캐시노트 앱의 웹뷰를 통해 제공되며 회사 매출의 핵심 역할을 담당하고 있는 서비스입니다.</p></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">역할</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">FE 개발 리드 및 일정 관리</li><li class="mt-1 first:mt-0">서비스 고도화 및 신규 기능 개발</li></ul></div>
16<h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">업무</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">기존 가격보다 2배 비싼 신규 멤버십 플랜 출시 및 가입 유도 작업을 통한 매출 목표 90% 달성</li><li class="mt-1 first:mt-0">서비스 제휴 및 프로모션 기반의 여러 멤버십 가입 페이지 제작으로 가입자 목표 99% 달성</li><ul class="ml-8 list-disc"><li>반복 작업 해소를 위해 모듈화 시스템 작업을 제안하고 시스템 설계, 구현을 통해 생산성 향상</li></ul><li class="mt-1 first:mt-0">멤버십 플랜별 기능 소구를 할 수 있는 라운지 페이지 개발로 전용 혜택 및 제휴 서비스 강화</li><li class="mt-1 first:mt-0">모듈 페더레이션을 활용하여 사내 어드민에 멤버십 도메인 통합으로 인증과 리소스 권한 관리 효율화</li><li class="mt-1 first:mt-0">웹 성능 개선</li><ul class="ml-8 list-disc"><li>RSC 사용, BTF 영역의 리소스 레이지 로딩 작업을 통해 내매장 페이지의 LCP 약 65% 개선 ( 2.x초 → 0.7초 )</li></ul><li class="mt-1 first:mt-0">개발 환경 개선</li><ul class="ml-8 list-disc"><li>데이터독의 RUM, APM을 활용한 모니터링 환경과 E2E 테스트 구축으로 장애 탐지를 강화하여 서비스 안정성 향상</li><li>커스텀 Next.js 로그 모듈을 작성해 서비스 운영과 모니터링 환경 개선</li></ul></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">사용 기술</h5><div class="pl-2"><ul role="list" class="flex flex-wrap children:mr-2 children:mt-2"><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Typescript</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Next.js</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React Hook Form</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>TanStack Query</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Tailwind CSS</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Github</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Storybook</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Jest</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200">
16<svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React Testing Library</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>MSW</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Vite</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Module Federation</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>AWS</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Datadog</span></li></ul></div></dd></div></dl></div></div></section><section class="mt-12 first-of-type:mt-0"><h3 class="text-3xl font-bold leading-6 text-gray-900" id="우아한형제들2021"><span>우아한형제들</span><a title="Direct link to heading" class="anchor" href="#우아한형제들2021"><span class="icon icon-link"></span></a></h3><h3 class="mt-1 font-medium text-gray-700">2021.05 ~ 2024.05</h3><div class="border-t mt-2 pt-2"><h4>셀러웹프론트개발팀<!-- --> / <!-- -->팀원</h4><p class="mt-1 max-w-2xl text-sm text-gray-900">2022.10 ~ 2024.05</p><div class="mt-5"><dl><div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 mt-5"><dt class="text-xl font-medium"><h4>우아한라이브러리</h4><p class="text-i text-sm text-gray-500">2023.05 ~ 2024.05</p></dt><dd class="mt-3 sm:mt-1 text-sm text-gray-900 sm:col-span-2"><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">설명</h5><div class="pl-2"><p class="">우아한형제들의 전사 프론트엔드 라이브러리 제작을 위한 TF로 라이브러리의 생태계를 구축하였습니다.<br/>TF는 각 프론트엔드 팀의 시니어 엔지니어들로 구성되었습니다.</p></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">역할</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">FE 개발 리드 및 일정 관리 </li><li class="mt-1 first:mt-0">신규 라이브러리 구축</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">업무</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">워크플로우 구축 및 라이브러리 운영 정책 수립</li><li class="mt-1 first:mt-0">React Custom Hook 라이브러리 개발</li><ul class="ml-8 list-disc"><li>코드 커버리지 100% 달성</li></ul></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">사용 기술</h5><div class="pl-2"><ul role="list" class="flex flex-wrap children:mr-2 children:mt-2"><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Typescript</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200">
16<svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Turborepo</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Vite</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Vitest</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Docusaurus</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Storybook</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Gitlab</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>AWS</span></li></ul></div></dd></div><div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 mt-5"><dt class="text-xl font-medium"><h4>배민사장님 앱</h4><p class="text-i text-sm text-gray-500">2022.10 ~ 2024.05</p></dt><dd class="mt-3 sm:mt-1 text-sm text-gray-900 sm:col-span-2"><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">설명</h5><div class="pl-2"><p class="">배민사장님 앱은 사장님이 앱을 통해 주문 처리, 배달 설정, 가게 운영에 관련된 설정들을 할 수 있는 서비스입니다.<br/>주요 기능들을 웹뷰로 제공하는 서비스이며, 앱의 주문접수 웹뷰 개발 파트 리더로 프로젝트를 진행하였습니다.</p></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">역할</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">FE 개발 리드 및 일정 관리</li><li class="mt-1 first:mt-0">서비스 고도화 및 신규 기능 개발</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">업무</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">배달의민족 커머스 주문접수 기능 개발</li><li class="mt-1 first:mt-0">배민사장님 앱 가변 폰트 기능 개발</li><li class="mt-1 first:mt-0">배민사장님 앱 웹뷰 브릿지 SDK 구축 및 가이드 문서 제공</li><li class="mt-1 first:mt-0">Storybook, MSW을 활용하여 UI 개발 및 검증 편리성 증대</li><ul class="ml-8 list-disc"><li>Merge Request에 프리뷰 기능을 제공하여 시각적 리뷰 환경 도입</li><li>개발 환경에서 가변폰트 Addon을 제공하여 앱으로부터 받아오는 폰트 크기 값을 모의할 수 있도록 제공</li></ul><li class="mt-1 first:mt-0">개발 환경 개선</li><ul class="ml-8 list-disc"><li>애플리케이션 번들러 전환 ( 로컬 구동 속도 42배 ↑, CI 빌드 속도 1.3배 ↑)</li><li>센트리, 그라파나 대시보드 구성으로 인한 모니터링/메트릭 측정 환경 구축</li><li>불필요하게 사용되고 있던 Redux 관련 코드를 React Query로 전환하여 코드 복잡도 및 사용성 개선</li></ul><li class="mt-1 first:mt-0">웹 성능 개선</li><ul class="ml-8 list-disc"><li>코드 스플리팅, 트리쉐이킹 등으로 Overall LCP 약 40% 이상 개선 ( 2.x초 → 0.8 ~ 1.2초 )</li><li>웹서버 정적 리소스 서빙 방식 변경으로 웹서버 부하 개선 ( 약 90% ↓ )</li></ul><li class="mt-1 first:mt-0">코드 커버리지 개선 ( 20% → 60% )</li></ul></div>
16<h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">사용 기술</h5><div class="pl-2"><ul role="list" class="flex flex-wrap children:mr-2 children:mt-2"><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Typescript</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Redux</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Redux Saga</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React Query</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Express</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>styled-components</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>TS-Pattern</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Gitlab</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Storybook</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>MSW</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React Testing Library</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Vitest</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Vite</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200">
16<svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>AWS</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Turborepo</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Rspress</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>tsup</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Slack Bolt</span></li></ul></div></dd></div></dl></div></div><div class="border-t mt-2 pt-2"><h4>배민상회웹프론트개발팀<!-- --> / <!-- -->팀원</h4><p class="mt-1 max-w-2xl text-sm text-gray-900">2021.05 ~ 2022.10</p><div class="mt-5"><dl><div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 mt-5"><dt class="text-xl font-medium"><h4>배민상회</h4><p class="text-i text-sm text-gray-500">2021.05 ~ 2022.09</p></dt><dd class="mt-3 sm:mt-1 text-sm text-gray-900 sm:col-span-2"><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">설명</h5><div class="pl-2"><p class="">배민상회는 사장님께서 식자재 및 비품을 구매할 수 있는 서비스입니다.<br/>B2B 이커머스 프론트, 기능 관리할 수 있는 어드민, 외부 판매자가 입점하여 사용할 수 있는 셀러 어드민을 운영하였습니다.</p></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">역할</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">FE 개발 리드 및 일정 관리</li><li class="mt-1 first:mt-0">서비스 고도화 및 신규 기능 개발</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">업무</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">판매중개 비지니스 모델 전환</li><ul class="ml-8 list-disc"><li>외부 판매사들이 사용할 수 있는 셀러 어드민 서비스 구축</li><li>상품 관리 / 가격 관리 / 카테고리 관리 기능 개발</li><li>엑셀을 통한 대량 상품 이미지 등록 프로세스 개선 ( API 처리 시간 약 80% ↓ )</li></ul><li class="mt-1 first:mt-0">배민상회 모바일 메인화면 탭 기능 개발</li><li class="mt-1 first:mt-0">배민상회 사용자 맞춤 발주서 기능 개발</li><li class="mt-1 first:mt-0">배민상회 어드민 서비스 확장</li><ul class="ml-8 list-disc"><li>
16사내의 유사 서비스를 하나의 플랫폼에서 관리할 수 있도록 확장하여 배민문방구 쇼핑몰을 배민상회 어드민에서 관리할 수 있도록 구현</li></ul><li class="mt-1 first:mt-0">디자인시스템 운영</li><ul class="ml-8 list-disc"><li>모노레포화를 통하여 쇼핑몰과 어드민 컴포넌트들의 패키지 분리</li><li>패키지별 버저닝 및 배포 전략 수립</li></ul><li class="mt-1 first:mt-0">개발 환경 개선</li><ul class="ml-8 list-disc"><li>env-launcher라는 라이브러리 제작을 통해 10개 이상인 개발존 환경의 개발/배포 환경 개선</li><li>Redux 관련 레거시 코드를 Redux Toolkit과 React Query로 전환하여 코드 복잡도 개선</li><li>손쉽게 사용할 수 있는 Infinite Scroll 컴포넌트 개발을 통한 여러 지면의 코드 패턴 정리 및 복잡도 개선</li></ul><li class="mt-1 first:mt-0">웹 성능 개선</li><ul class="ml-8 list-disc"><li>이미지 레이지 로드 기능 추가로 쇼핑몰 메인 페이지에서만 200여개 이상의 불필요 요청 수 감소</li></ul></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">사용 기술</h5><div class="pl-2"><ul role="list" class="flex flex-wrap children:mr-2 children:mt-2"><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Typescript</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Next.js</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React Hook Form</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Redux Toolkit</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Redux Saga</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React Query</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Express</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>styled-components</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Gitlab</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200">
16<svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Storybook</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Jest</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React Testing Library</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Lerna</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>MSW</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>AWS</span></li></ul></div></dd></div></dl></div></div></section><section class="mt-12 first-of-type:mt-0"><h3 class="text-3xl font-bold leading-6 text-gray-900" id="카카오페이2020"><span>카카오페이</span><a title="Direct link to heading" class="anchor" href="#카카오페이2020"><span class="icon icon-link"></span></a></h3><h3 class="mt-1 font-medium text-gray-700">2020.08 ~ 2021.05</h3><div class="border-t mt-2 pt-2"><h4>금융사업클랜 투자파티<!-- --> / <!-- -->팀원</h4><p class="mt-1 max-w-2xl text-sm text-gray-900">2020.08 ~ 2021.05</p><div class="mt-5"><dl><div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 mt-5"><dt class="text-xl font-medium"><h4>코스피 지수에 따른 인덱스/리버스 펀드 투자</h4><p class="text-i text-sm text-gray-500">2020.08 ~ 2021.02</p></dt><dd class="mt-3 sm:mt-1 text-sm text-gray-900 sm:col-span-2"><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">설명</h5><div class="pl-2"><p class="">일반적인 펀드 서비스와 다르게 오락이 가미된 신규 펀드 매매 서비스를 구축하였습니다.<br/>사내 CBT까지 진행하였지만, 아쉽게도 컴플라이언스 이슈로 인해 서비스가 런칭되지는 못하였습니다.<br/>카카오페이에서 최초로 React Query를 도입하여 개발하였고, 그 후에 사용성 등을 전사에 전파하였습니다.</p></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">역할</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">FE 개발 리드 및 일정 관리</li><li class="mt-1 first:mt-0">신규 서비스 구축</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">업무</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">기술 스택, 컨벤션 정의, 배포, 모니터링 등 신규 개발 환경 구축</li><li class="mt-1 first:mt-0">React Query를 활용한 제품 코드 및 테스트 코드 설계</li><li class="mt-1 first:mt-0">지수 차트/펀드 매수/사용자 랭킹 등 다수의 기능 개발</li><li class="mt-1 first:mt-0">Storybook, Mirage JS를 활용하여 UI 개발 및 검증 편리성 증대</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">사용 기술</h5><div class="pl-2"><ul role="list" class="flex flex-wrap children:mr-2 children:mt-2"><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200">
16<svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React Query</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>nivo</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Typescript</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>sass</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Jest</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React Testing Library</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Mirage JS</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Storybook</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>webpack</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Github</span></li></ul></div></dd></div><div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 mt-5"><dt class="text-xl font-medium"><h4>P2P 부동산 투자</h4><p class="text-i text-sm text-gray-500">2020.11 ~ 2021.02</p></dt><dd class="mt-3 sm:mt-1 text-sm text-gray-900 sm:col-span-2"><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">설명</h5><div class="pl-2"><p class="">부동산 P2P 투자 서비스를 운영하였습니다.<br/>이 서비스는 카카오톡 앱 내의 카카오페이 서비스 영역, 그리고 카카오페이 앱에서 접근할 수 있었습니다.<br/>아쉽게도 현재는 운영이 종료되었습니다.</p></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">역할</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">FE 개발 리드 및 일정 관리</li><li class="mt-1 first:mt-0">서비스 고도화</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">업무</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">React Query를 도입하여 투자내역 목록 지면 코드 복잡도 감소</li><li class="mt-1 first:mt-0">카카오페이 통합웹뷰 SDK 적용</li><li class="mt-1 first:mt-0">제휴사를 위한 카카오페이 통합웹뷰 SDK 브릿지 개발 및 가이드 제공</li><li class="mt-1 first:mt-0">웹뷰 뒤로 가기 시 사용자가 보고 있던 화면이 유지되도록 사용성 개선</li><li class="mt-1 first:mt-0">Storybook, Mirage JS를 활용하여 UI 개발 및 검증 편리성 증대</li><li class="mt-1 first:mt-0">개발 환경 개선</li><ul class="ml-8 list-disc"><li>@babel/polyfill, awesome-ts-loader, tslint와 같은 더 이상 유지되지 않는 라이브러리 제거</li><li>babel-loader, core-js, eslint, prettier 설치 및 적용</li></ul></ul></div>
16<h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">사용 기술</h5><div class="pl-2"><ul role="list" class="flex flex-wrap children:mr-2 children:mt-2"><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React Query</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Typescript</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>sass</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Jest</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React Testing Library</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Mirage JS</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Storybook</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>webpack</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Github</span></li></ul></div></dd></div><div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 mt-5"><dt class="text-xl font-medium"><h4>펀드 투자</h4><p class="text-i text-sm text-gray-500">2020.08 ~ 2020.10</p></dt><dd class="mt-3 sm:mt-1 text-sm text-gray-900 sm:col-span-2"><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">설명</h5><div class="pl-2"><p class="">펀드 매매 서비스를 운영하였습니다.<br/>이 서비스는 카카오톡 앱 내의 카카오페이 서비스 영역, 그리고 카카오페이 앱에서 접근할 수 있었습니다.</p></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">역할</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">서비스 고도화</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">업무</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">단 하나의 파일로만 되어있던 js 코드를 분할 처리하여 Overall LCP 약 30% 개선</li><li class="mt-1 first:mt-0">개발 환경 개선</li><ul class="ml-8 list-disc"><li>@babel/polyfill, awesome-ts-loader, tslint와 같은 더 이상 유지되지 않는 라이브러리 제거</li><li>babel-loader, core-js, eslint, prettier 설치 및 적용</li></ul></ul></div>
16<h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">사용 기술</h5><div class="pl-2"><ul role="list" class="flex flex-wrap children:mr-2 children:mt-2"><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Typescript</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Mobx</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>sass</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Jest</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>webpack</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Github</span></li></ul></div></dd></div><div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 mt-5"><dt class="text-xl font-medium"><h4>투자 홈</h4><p class="text-i text-sm text-gray-500">2020.12 ~ 2021.01</p></dt><dd class="mt-3 sm:mt-1 text-sm text-gray-900 sm:col-span-2"><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">설명</h5><div class="pl-2"><p class="">카카오페이 투자 서비스들과 나의 투자 현황을 볼 수 있는 페이지를 운영하였습니다.<br/>이 페이지는 카카오톡 앱 내의 카카오페이 서비스 영역, 그리고 카카오페이 앱의 메인 탭 페이지로 제공되었습니다.</p></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">역할</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">FE 개발 리드 및 일정 관리</li><li class="mt-1 first:mt-0">서비스 고도화</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">업무</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">카카오페이 통합웹뷰 SDK 적용</li><li class="mt-1 first:mt-0">다크 모드 화면 대응</li><li class="mt-1 first:mt-0">개발 환경 개선</li><ul class="ml-8 list-disc"><li>@babel/polyfill, awesome-ts-loader, tslint와 같은 더 이상 유지되지 않는 라이브러리 제거</li><li>babel-loader, core-js, eslint, prettier 설치 및 적용</li></ul></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">사용 기술</h5><div class="pl-2"><ul role="list" class="flex flex-wrap children:mr-2 children:mt-2"><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200">
16<svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Typescript</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>sass</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Jest</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>webpack</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Github</span></li></ul></div></dd></div></dl></div></div></section><section class="mt-12 first-of-type:mt-0"><h3 class="text-3xl font-bold leading-6 text-gray-900" id="위버스컴퍼니2020"><span>위버스컴퍼니</span><a title="Direct link to heading" class="anchor" href="#위버스컴퍼니2020"><span class="icon icon-link"></span></a></h3><h3 class="mt-1 font-medium text-gray-700">2020.06 ~ 2020.08</h3><div class="border-t mt-2 pt-2"><h4>웹개발팀<!-- --> / <!-- -->팀원</h4><p class="mt-1 max-w-2xl text-sm text-gray-900">2020.06 ~ 2020.08</p><div class="mt-5"><dl><div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 mt-5"><dt class="text-xl font-medium"><h4>위버스</h4><p class="text-i text-sm text-gray-500">2020.06 ~ 2020.07</p></dt><dd class="mt-3 sm:mt-1 text-sm text-gray-900 sm:col-span-2"><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">설명</h5><div class="pl-2"><p class="">위버스의 웹 버전을 운영하였습니다.</p></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">역할</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">서비스 고도화 및 신규 기능 개발</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">업무</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">아티스트 커뮤니티 영역의 멤버십 혜택 기능 개발</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">사용 기술</h5><div class="pl-2"><ul role="list" class="flex flex-wrap children:mr-2 children:mt-2"><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Typescript</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Mobx</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>styled-components</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200">
16<svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>i18n</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>webpack</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Storybook</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Github</span></li></ul></div></dd></div><div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 mt-5"><dt class="text-xl font-medium"><h4>타이니탄 상품 프로모션</h4><p class="text-i text-sm text-gray-500">2020.07 ~ 2020.08</p></dt><dd class="mt-3 sm:mt-1 text-sm text-gray-900 sm:col-span-2"><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">설명</h5><div class="pl-2"><p class="">방탄소년단 멤버들을 모티브 한 타이니탄이라는 캐릭터의 상품을 프로모션하는 사이트를 구축하였습니다.<br/>미디어 쿼리를 이용하여 위버스 앱 내 웹뷰 그리고 모바일 & 데스크톱 환경을 지원하였습니다.<br/>글로벌, 미국, 일본 Shop 설정과 그에 따른 다국어도 지원하였습니다.</p></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">역할</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">신규 프로모션 구축</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">업무</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">기술 스택, 컨벤션 정의, 배포 등 신규 개발 환경 구축</li><li class="mt-1 first:mt-0">타이니탄 컨셉, 상품 소개 기능 개발</li><li class="mt-1 first:mt-0">여러 가게와 언어를 지원하고 있는 위버스샵 상품의 딥링크 모듈 개발</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">사용 기술</h5><div class="pl-2"><ul role="list" class="flex flex-wrap children:mr-2 children:mt-2"><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Typescript</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Mobx</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>styled-components</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>i18n</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200">
16<svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>webpack</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Github</span></li></ul></div></dd></div><div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 mt-5"><dt class="text-xl font-medium"><h4>위버스샵</h4><p class="text-i text-sm text-gray-500">2020.07 ~ 2020.07</p></dt><dd class="mt-3 sm:mt-1 text-sm text-gray-900 sm:col-span-2"><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">설명</h5><div class="pl-2"><p class="">위버스샵의 어드민을 운영하였습니다.<br/>벡엔드 팀 리소스 부족으로 버그 수정 및 성능 개선 등의 업무를 지원하였습니다.</p></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">역할</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">서비스 고도화</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">업무</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">배송지 권역 설정 지면의 렌더링 성능 개선</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">사용 기술</h5><div class="pl-2"><ul role="list" class="flex flex-wrap children:mr-2 children:mt-2"><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Angular</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>webpack</span></li></ul></div></dd></div></dl></div></div></section><section class="mt-12 first-of-type:mt-0"><h3 class="text-3xl font-bold leading-6 text-gray-900" id="우아한형제들2018"><span>우아한형제들</span><a title="Direct link to heading" class="anchor" href="#우아한형제들2018"><span class="icon icon-link"></span></a></h3><h3 class="mt-1 font-medium text-gray-700">2018.10 ~ 2020.05</h3><div class="border-t mt-2 pt-2"><h4>배민상회개발팀<!-- --> / <!-- -->팀원</h4><p class="mt-1 max-w-2xl text-sm text-gray-900">2018.10 ~ 2020.05</p><div class="mt-5"><dl><div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 mt-5"><dt class="text-xl font-medium"><h4>배민상회</h4><p class="text-i text-sm text-gray-500">2018.10 ~ 2020.05</p></dt><dd class="mt-3 sm:mt-1 text-sm text-gray-900 sm:col-span-2"><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">설명</h5><div class="pl-2"><p class="">배민상회는 사장님께서 식자재 및 비품을 구매할 수 있는 서비스입니다.<br/>개발팀의 초기 멤버로 합류 후, 고도몰로 운영되고 있었던 서비스를 점진적으로 내재화시켰습니다.<br/>내재화가 완료된 후에는 서비스 관리 어드민 및 판매중개 비지니스 모델 전환을 위해 셀러 어드민을 구축하여 서비스 고도화를 진행하였습니다.<br/>또한, 컴포넌트를 공통으로 사용할 수 있도록 배민상회 디자인 시스템도 구축하였습니다.</p></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">역할</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">FE 개발 리드 및 일정 관리</li><li class="mt-1 first:mt-0">서비스 구축 및 신규 기능 개발</li><li class="mt-1 first:mt-0">서비스 고도화</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">업무</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">기술 스택, 컨벤션 정의, 배포, 모니터링 등 신규 개발 환경 구축</li><li class="mt-1 first:mt-0">배민상회 서비스 자체 플랫폼 구축 ( 고도몰 기능 100% 구현 )</li><ul class="ml-8 list-disc"><li>메인 / 검색 / 상품목록 및 상세 / 장바구니 / 주문 / 회원 / 나의상회 / 샘플 등 기능 개발</li><li>모바일, 데스크톱 브라우저를 지원하기 위한 애플리케이션 설계</li><li>서비스 내재화가 완료되기 전까지 고도몰 운영</li></ul><li class="mt-1 first:mt-0">서비스 고도화를 위한 어드민과 외부 판매사에서 사용할 수 있는 셀러 어드민 구축</li><ul class="ml-8 list-disc"><li>판매사 관리 / 상품 관리 / 가격 관리 / 주문 관리 / 배송 관리 등 주요 기능 개발</li><li>단일 소스로 2개의 서비스가 제공되도록 애플리케이션 설계</li></ul><li class="mt-1 first:mt-0">배민상회 디자인 시스템 구축</li><ul class="ml-8 list-disc"><li>Button / Input / Select / Modal / Pagination / Table 등 주요 컴포넌트 개발</li><li>버저닝 및 배포 전략 수립</li></ul></ul></div>
16<h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">사용 기술</h5><div class="pl-2"><ul role="list" class="flex flex-wrap children:mr-2 children:mt-2"><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Next.js</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Redux</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Redux Saga</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Typescript</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>styled-components</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>webpack</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Rollup</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Storybook</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Node.js</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Express</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Github</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>AWS</span></li></ul></div></dd></div></dl></div></div></section><section class="mt-12 first-of-type:mt-0"><h3 class="text-3xl font-bold leading-6 text-gray-900" id="어나더레인보우2012"><span>어나더레인보우</span><a title="Direct link to heading" class="anchor" href="#어나더레인보우2012"><span class="icon icon-link"></span></a></h3><h3 class="mt-1 font-medium text-gray-700">2012.01 ~ 2018.04</h3>
16<div class="border-t mt-2 pt-2"><h4>개발팀<!-- --> / <!-- -->책임연구원</h4><p class="mt-1 max-w-2xl text-sm text-gray-900">2012.01 ~ 2018.04</p><div class="mt-5"><dl><div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 mt-5"><dt class="text-xl font-medium"><h4>아모레퍼시픽 브랜드 웹사이트</h4><p class="text-i text-sm text-gray-500">2012.01 ~ 2018.03</p></dt><dd class="mt-3 sm:mt-1 text-sm text-gray-900 sm:col-span-2"><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">설명</h5><div class="pl-2"><p class="">아모레퍼시픽 브랜드들을 소개해 주는 서비스입니다.<br/>회사 재직기간 동안 가장 많이 진행하였던 업무들이었고, 시기에 따라 적절한 기술들을 사용하였습니다.<br/>브라우저를 위한 사용 기술 및 언어에 대한 주요 흐름은 아래와 같고, 부가적으로 필요한 환경들을 구성했었습니다.<br/>ActionScript 3.0  ->  jQuery  ->  AngularJS  ->  React<br/><br/>ImageMagick, FFmpeg와 같은 라이브러리들은 특수한 프로모션 사이트들에서 이미지와 영상 처리가 필요하여 사용하였습니다.</p></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">역할</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">FE 개발 리드 및 일정 관리</li><li class="mt-1 first:mt-0">프로젝트 견적 산출</li><li class="mt-1 first:mt-0">신규 기능 개발</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">업무</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">라네즈 프로모션 사이트 개발 및 9개국 확산(한국, 중국, 대만, 홍콩, 태국, 베트남, 싱가폴, 말레이시아, 인도네시아)</li><li class="mt-1 first:mt-0">이니스프리 프로모션 사이트 개발</li><li class="mt-1 first:mt-0">프리메라 프로모션 사이트 개발</li><li class="mt-1 first:mt-0">VB프로그램 프로모션 사이트 개발</li><li class="mt-1 first:mt-0">헤라 프로모션 사이트 개발</li><li class="mt-1 first:mt-0">한율 프로모션 사이트 개발</li><li class="mt-1 first:mt-0">설화수 프로모션 사이트 개발</li><li class="mt-1 first:mt-0">리리코스 마이크로사이트 개발</li><li class="mt-1 first:mt-0">Verite 마이크로사이트 개발</li><li class="mt-1 first:mt-0">VitalBeautie 마이크로사이트 개발</li><li class="mt-1 first:mt-0">VB프로그램 마이크로사이트 개발</li><li class="mt-1 first:mt-0">아이오페 마이크로사이트 개발</li><li class="mt-1 first:mt-0">유스레볼루션 마이크로사이트 개발</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">사용 기술</h5><div class="pl-2"><ul role="list" class="flex flex-wrap children:mr-2 children:mt-2"><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>ActionScript 3.0</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>PHP</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Javascript</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>jQuery</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200">
16<svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>ImageMagick</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>FFmpeg</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Node.js</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Express</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>gulp</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Typescript</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>AngularJS</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>React</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Redux</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Redux Thunk</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>sass</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>webpack</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>AWS</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Serverless</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Github</span></li></ul></div></dd></div><div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 mt-5"><dt class="text-xl font-medium"><h4>하기스 네이처피크닉 시즌5</h4><p class="text-i text-sm text-gray-500">2016.03 ~ 2016.05</p></dt><dd class="mt-3 sm:mt-1 text-sm text-gray-900 sm:col-span-2">
16<h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">설명</h5><div class="pl-2"><p class="">하기스 네이처피크닉 프로모션 사이트에서 사용되는 API를 개발하였습니다.<br/>클라이언트로부터 이미지를 전달받아, 이미지에 필터 효과를 적용하고 애니메이션이 들어간 gif를 생성하고 반환해 주었습니다.</p></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">역할</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">FE 개발 리드 및 일정 관리</li><li class="mt-1 first:mt-0">프로젝트 견적 산출</li><li class="mt-1 first:mt-0">API 기능 개발</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">업무</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">ImageMagick을 활용하여 이미지 필터 모듈 개발</li><li class="mt-1 first:mt-0">FFmpeg를 활용하여 gif 생성 모듈 개발</li><li class="mt-1 first:mt-0">AWS Lambda와 API Gateway로 API 구성</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">사용 기술</h5><div class="pl-2"><ul role="list" class="flex flex-wrap children:mr-2 children:mt-2"><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>FFmpeg</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>ImageMagick</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Node.js</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>AWS</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Github</span></li></ul></div></dd></div><div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 mt-5"><dt class="text-xl font-medium"><h4>제주항공 My Heroine 소셜무비</h4><p class="text-i text-sm text-gray-500">2014.01 ~ 2014.03</p></dt><dd class="mt-3 sm:mt-1 text-sm text-gray-900 sm:col-span-2"><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">설명</h5><div class="pl-2"><p class="">제주항공의 프로모션 사이트에서 SNS 무비를 제작할 수 있는 서비스입니다.<br/>사용자 이미지와 페이스북 친구들의 이미지를 업로드하면 자신만의 SNS 무비를 만들 수 있었습니다.</p></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">역할</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">신규 기능 개발</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">업무</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">이미지 필터 모듈 개발</li><li class="mt-1 first:mt-0">영상 크로마키 모듈 개발</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">사용 기술</h5><div class="pl-2"><ul role="list" class="flex flex-wrap children:mr-2 children:mt-2"><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>ActionScript 3.0</span></li></ul></div></dd></div><div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 mt-5"><dt class="text-xl font-medium"><h4>롯데센터 Fun view walk 앱 (Windows)</h4><p class="text-i text-sm text-gray-500">2014.06 ~ 2014.09</p></dt><dd class="mt-3 sm:mt-1 text-sm text-gray-900 sm:col-span-2">
16<h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">설명</h5><div class="pl-2"><p class="">베트남 하노이 롯데센터 전망대의 대형 스크린에 전시했던 서비스입니다.<br/>사용자가 키오스크에서 입력한 텍스트를 다양한 인터랙션으로 보여주고, 세계 도시들의 전경과 우주 배경 등 다양한 테마가 디스플레이되었습니다.</p></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">역할</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">신규 기능 개발</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">업무</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">만화경 이미지 테마뷰 개발</li><li class="mt-1 first:mt-0">텍스트 파티클 애니메이션 테마뷰 개발</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">사용 기술</h5><div class="pl-2"><ul role="list" class="flex flex-wrap children:mr-2 children:mt-2"><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Cinder</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>C++</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>OpenGL</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Github</span></li></ul></div></dd></div><div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 mt-5"><dt class="text-xl font-medium"><h4>PlayAlarms 앱 (iOS)</h4><p class="text-i text-sm text-gray-500">2013.04 ~ 2013.07</p></dt><dd class="mt-3 sm:mt-1 text-sm text-gray-900 sm:col-span-2"><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">설명</h5><div class="pl-2"><p class="">아이데이션부터 앱 출시까지 주도적으로 진행한 서비스입니다.<br/>아침 기상을 위해 알람을 설정하면, 사용자에게 특정 미션을 수행하라는 푸시 알림이 전송되며,<br/>미션 수행 완료 시 해당 푸시 알림이 자동으로 종료되도록 개발했습니다.<br/>광고 없이 중국 지역 애플스토어 유틸리티 카테고리에서 20위를 달성하였고, 앱 제작부터 배포까지의 개발 과정을 모두 혼자 진행하였습니다.</p></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">역할</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">서비스 기획 및 개발</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">업무</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">iOS 애플리케이션 아키텍처 설계 및 UI 개발</li><li class="mt-1 first:mt-0">데시벨 측정 모듈 개발</li><li class="mt-1 first:mt-0">가속도센서를 활용한 흔들기 측정 모듈 개발</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">사용 기술</h5><div class="pl-2"><ul role="list" class="flex flex-wrap children:mr-2 children:mt-2"><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Objective-C</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200">
16<svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Github</span></li></ul></div></dd></div><div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 mt-5"><dt class="text-xl font-medium"><h4>이니스프리 iCF 앱 (iOS/Android)</h4><p class="text-i text-sm text-gray-500">2012.07 ~ 2012.10</p></dt><dd class="mt-3 sm:mt-1 text-sm text-gray-900 sm:col-span-2"><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">설명</h5><div class="pl-2"><p class="">이니스프리 iCF 앱은 이니스프리의 CF를 제작할 수 있는 서비스입니다.<br/>사용자들이 직접 촬영한 영상으로 자신만의 CF를 제작할 수 있고, 이것을 Youtube로 공유할 수 있었습니다.</p></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">역할</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">신규 기능 개발</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">업무</h5><div class="pl-2"><ul class="ml-4 list-disc"><li class="mt-1 first:mt-0">영상 갤러리 개발</li><li class="mt-1 first:mt-0">Youtube Data API 연동 모듈 개발</li></ul></div><h5 class="text-lg font-medium mt-6 mb-1 first-of-type:mt-0">사용 기술</h5><div class="pl-2"><ul role="list" class="flex flex-wrap children:mr-2 children:mt-2"><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>ActionScript 3.0</span></li><li><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-900 ring-1 ring-inset ring-gray-200"><svg class="h-1.5 w-1.5 fill-blue-500" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>Adobe AIR</span></li></ul></div></dd></div></dl></div></div></section></section><section class="mt-12 pt-6 grid border-gray-100 border-t first-of-type:border-none"><h2 class="text-4xl font-bold text-gray-900 mb-12" id="그 외 경력"><span>그 외 경력</span><a title="Direct link to heading" class="anchor" href="#그 외 경력"><span class="icon icon-link"></span></a></h2><ul class="list-outside list-disc"><li class="mt-4">- <a href="https://www.kimcoder.io" target="_blank" class="hover:underline">https://www.kimcoder.io</a><ul class="ml-4 text-gray-500"><li class="ml-4 list-disc">개인 기술 블로그</li></ul></li><li class="mt-4">- <a href="https://www.npmjs.com/package/react-simple-image-slider" target="_blank" class="hover:underline">https://www.npmjs.com/package/react-simple-image-slider</a><ul class="ml-4 text-gray-500"><li class="ml-4 list-disc">2개의 DOM으로 구현하는 React Carousel 라이브러리</li></ul></li><li class="mt-4">- <a href="https://www.npmjs.com/package/react-sequence-player" target="_blank" class="hover:underline">https://www.npmjs.com/package/react-sequence-player</a><ul class="ml-4 text-gray-500"><li class="ml-4 list-disc">Image Sprite를 기반으로 애니메이션을 구현시켜주는 React 라이브러리</li></ul></li><li class="mt-4">- <a href="https://www.serverless.com/examples/serverless-instagram-crawler" target="_blank" class="hover:underline">https://www.serverless.com/examples/serverless-instagram-crawler</a><ul class="ml-4 text-gray-500"><li class="ml-4 list-disc">serverless 프레임워크에 예제 기여</li><li class="ml-4 list-disc">hashtag와 크롤링 주기를 설정하면 instagram의 피드를 크롤링하여 DynamoDB에 저장</li></ul></li><li class="mt-4">- <a href="https://www.serverless.com/examples/serverless-nextjs" target="_blank" class="hover:underline">https://www.serverless.com/examples/serverless-nextjs</a><ul class="ml-4 text-gray-500"><li class="ml-4 list-disc">serverless 프레임워크에 예제 기여</li><li class="ml-4 list-disc">next.js 애플리케이션을 aws에 serverless 모드로 배포</li></ul></li></ul></section></div><div class="ml-10 hidden w-28 flex-shrink-0 xl:block"><div class="on-this-page sticky top-24 overflow-y-auto pb-16"><h4 class="mb-2 mt-2 text-sm font-semibold uppercase text-gray-500">이력서</h4><ul class="space-y-3"><li class="text-sm"><a class="Toc_contents__link__rO__t" href="#_top">자기소개</a></li></ul></div></div></div></div><!--$--><!--/$--></div>
16<script id="__NEXT_DATA__" type="application/json" crossorigin="">{"props":{"pageProps":{"career":[{"companyName":"카카오페이","beginAt":"2025-06","team":[{"teamName":"광고클랜 광고플랫폼파티","position":"팀원","beginAt":"2025-06","projects":[{"title":"광고플랫폼","beginAt":"2025-06","description":"카카오페이 광고플랫폼은 광고주와 운영자가 캠페인·소재를 생성하고, 노출 조건을 설정하여 카카오페이 서비스 지면에 광고를 집행·관리할 수 있는 플랫폼입니다.\n또한, 사내의 여러 서비스에서 광고를 일관되게 서빙할 수 있도록 광고 노출/트래킹/렌더링을 표준화한 SDK도 운영합니다.","role":[{"description":"FE 개발 리드 및 일정 관리"},{"description":"플랫폼 고도화 및 신규 기능 개발"}],"works":[{"description":"광고주/운영자용 광고 서빙 플랫폼을 구축하고 캠페인/소재/노출 설정 플로우를 고도화하여 운영 효율을 개선"},{"description":"캐시된 광고 서빙 결과에 대한 SDK 내부 노출 제어 로직을 개발하여 노출 품질 및 효율 개선"},{"description":"외부 광고 제휴사 배너를 SDK로 표준화하여 각 서비스 지면에 손쉽게 적용할 수 있도록 지원, 도입/운영 비용 절감"},{"description":"광고 서빙 플랫폼 코드 커버리지 개선 ( 0% → 20% )"}],"techStack":["React","Typescript","Next.js","React Hook Form","Zod","TanStack Query","sass","Github","changesets","Storybook","Vitest","React Testing Library","MSW"]},{"title":"혜택","beginAt":"2025-09","description":"카카오페이 혜택은 사용자가 카카오페이 앱 및 카카오톡 내 카카오페이 영역에서 리워드/프로모션/제휴 혜택을 탐색하고 참여할 수 있는 사용자 대상 서비스입니다.","role":[{"description":"FE 개발 리드 및 일정 관리"},{"description":"서비스 고도화 및 신규 기능 개발"}],"works":[{"description":"외부 광고 제휴사 및 Google AdMob 광고 연동 기반의 광고 레버리지 기능을 개발·운영하여 월 매출 KPI 목표 대비 약 110% 달성"},{"description":"Google AdMob 광고 리워드 미지급 이슈를 3% → 0%로 개선하여 리워드 신뢰도 및 사용자 경험 안정화"},{"description":"프로모션/리워드 혜택 지면 고도화 및 신규 기능 개발을 통해 사용자 참여 흐름(탐색 → 참여 → 전환) 개선"}],"techStack":["React","Typescript","Next.js","TanStack Query","Github","Storybook","Vitest","React Testing Library","MSW"]}]}]},{"companyName":"한국신용데이터","beginAt":"2024-05","endAt":"2025-06","team":[{"teamName":"FE 협의체","position":"챕터 리드","beginAt":"2024-05","endAt":"2025-06","projects":[{"title":"FE 협의체","beginAt":"2024-05","endAt":"2025-06","description":"사내 FE 개발 환경의 표준화와 생산성 향상을 위해 FE 협의체라는 가상조직에 참여하여 다양한 기술적 기여와 개선 활동을 수행했습니다.","role":[{"description":"챕터 리드"}],"works":[{"description":"사내 FE 표준 기술안 수립"},{"description":"서비스 및 어드민 애플리케이션 저장소 템플릿 제공으로 FE 개발자들의 생산성 개선"},{"description":"FE 공통 npm 패키지의 배포 및 알림 프로세스 자동화로 업무 효율 개선"},{"description":"Next.js 설정을 위한 플러그인 시스템과 다양한 플러그인을 개발·제공하여 사내 FE 서비스들의 운영 효율 개선"},{"description":"FE 개발자들과의 1:1 미팅과 Meet-up으로 기술 피드백 제공 및 개발 문화와 트렌드 확산에 기여"}],"techStack":["React","Typescript","Tailwind CSS","Github","changesets","Storybook","Vite","Vitest","Rollup","Datadog"]}]},{"teamName":"구독팀","position":"팀원","beginAt":"2024-05","endAt":"2025-06","projects":[{"title":"캐시노트 플러스 멤버십","beginAt":"2024-05","endAt":"2025-06","description":"캐시노트 플러스 멤버십은 장부, 마켓, 금융, 광고 등 캐시노트의 주요 기능을 선별하여 멤버십 전용 혜택으로 제공하는 서비스입니다.\n캐시노트 앱의 웹뷰를 통해 제공되며 회사 매출의 핵심 역할을 담당하고 있는 서비스입니다.","role":[{"description":"FE 개발 리드 및 일정 관리"},{"description":"서비스 고도화 및 신규 기능 개발"}],"works":[{"description":"기존 가격보다 2배 비싼 신규 멤버십 플랜 출시 및 가입 유도 작업을 통한 매출 목표 90% 달성"},{"description":"서비스 제휴 및 프로모션 기반의 여러 멤버십 가입 페이지 제작으로 가입자 목표 99% 달성","subDescription":["반복 작업 해소를 위해 모듈화 시스템 작업을 제안하고 시스템 설계, 구현을 통해 생산성 향상"]},{"description":"멤버십 플랜별 기능 소구를 할 수 있는 라운지 페이지 개발로 전용 혜택 및 제휴 서비스 강화"},{"description":"모듈 페더레이션을 활용하여 사내 어드민에 멤버십 도메인 통합으로 인증과 리소스 권한 관리 효율화"},{"description":"웹 성능 개선","subDescription":["RSC 사용, BTF 영역의 리소스 레이지 로딩 작업을 통해 내매장 페이지의 LCP 약 65% 개선 ( 2.x초 → 0.7초 )"]},{"description":"개발 환경 개선","subDescription":["데이터독의 RUM, APM을 활용한 모니터링 환경과 E2E 테스트 구축으로 장애 탐지를 강화하여 서비스 안정성 향상","커스텀 Next.js 로그 모듈을 작성해 서비스 운영과 모니터링 환경 개선"]}],"techStack":["React","Typescript","Next.js","React Hook Form","TanStack Query","Tailwind CSS","Github","Storybook","Jest","React Testing Library","MSW","Vite","Module Federation","AWS","Datadog"]}]}]},{"companyName":"우아한형제들","beginAt":"2021-05","endAt":"2024-05","team":[{"teamName":"셀러웹프론트개발팀","position":"팀원","beginAt":"2022-10","endAt":"2024-05","projects":[{"title":"우아한라이브러리","beginAt":"2023-05","endAt":"2024-05","description":"우아한형제들의 전사 프론트엔드 라이브러리 제작을 위한 TF로 라이브러리의 생태계를 구축하였습니다.\nTF는 각 프론트엔드 팀의 시니어 엔지니어들로 구성되었습니다.","role":[{"description":"FE 개발 리드 및 일정 관리 "},{"description":"신규 라이브러리 구축"}],"works":[{"description":"워크플로우 구축 및 라이브러리 운영 정책 수립"}
16,{"description":"React Custom Hook 라이브러리 개발","subDescription":["코드 커버리지 100% 달성"]}],"techStack":["React","Typescript","Turborepo","Vite","Vitest","Docusaurus","Storybook","Gitlab","AWS"]},{"title":"배민사장님 앱","beginAt":"2022-10","endAt":"2024-05","description":"배민사장님 앱은 사장님이 앱을 통해 주문 처리, 배달 설정, 가게 운영에 관련된 설정들을 할 수 있는 서비스입니다.\n주요 기능들을 웹뷰로 제공하는 서비스이며, 앱의 주문접수 웹뷰 개발 파트 리더로 프로젝트를 진행하였습니다.","role":[{"description":"FE 개발 리드 및 일정 관리"},{"description":"서비스 고도화 및 신규 기능 개발"}],"works":[{"description":"배달의민족 커머스 주문접수 기능 개발"},{"description":"배민사장님 앱 가변 폰트 기능 개발"},{"description":"배민사장님 앱 웹뷰 브릿지 SDK 구축 및 가이드 문서 제공"},{"description":"Storybook, MSW을 활용하여 UI 개발 및 검증 편리성 증대","subDescription":["Merge Request에 프리뷰 기능을 제공하여 시각적 리뷰 환경 도입","개발 환경에서 가변폰트 Addon을 제공하여 앱으로부터 받아오는 폰트 크기 값을 모의할 수 있도록 제공"]},{"description":"개발 환경 개선","subDescription":["애플리케이션 번들러 전환 ( 로컬 구동 속도 42ë°° ↑, CI 빌드 속도 1.3ë°° ↑)","센트리, 그라파나 대시보드 구성으로 인한 모니터링/메트릭 측정 환경 구축","불필요하게 사용되고 있던 Redux 관련 코드를 React Query로 전환하여 코드 복잡도 및 사용성 개선"]},{"description":"웹 성능 개선","subDescription":["코드 스플리팅, 트리쉐이킹 등으로 Overall LCP 약 40% 이상 개선 ( 2.x초 → 0.8 ~ 1.2초 )","웹서버 정적 리소스 서빙 방식 변경으로 웹서버 부하 개선 ( 약 90% ↓ )"]},{"description":"코드 커버리지 개선 ( 20% → 60% )"}],"techStack":["React","Typescript","Redux","Redux Saga","React Query","Express","styled-components","TS-Pattern","Gitlab","Storybook","MSW","React Testing Library","Vitest","Vite","AWS","Turborepo","Rspress","tsup","Slack Bolt"]}]},{"teamName":"배민상회웹프론트개발팀","position":"팀원","beginAt":"2021-05","endAt":"2022-10","projects":[{"title":"배민상회","beginAt":"2021-05","endAt":"2022-09","description":"배민상회는 사장님께서 식자재 및 비품을 구매할 수 있는 서비스입니다.\nB2B 이커머스 프론트, 기능 관리할 수 있는 어드민, 외부 판매자가 입점하여 사용할 수 있는 셀러 어드민을 운영하였습니다.","role":[{"description":"FE 개발 리드 및 일정 관리"},{"description":"서비스 고도화 및 신규 기능 개발"}],"works":[{"description":"판매중개 비지니스 모델 전환","subDescription":["외부 판매사들이 사용할 수 있는 셀러 어드민 서비스 구축","상품 관리 / 가격 관리 / 카테고리 관리 기능 개발","엑셀을 통한 대량 상품 이미지 등록 프로세스 개선 ( API 처리 시간 약 80% ↓ )"]},{"description":"배민상회 모바일 메인화면 탭 기능 개발"},{"description":"배민상회 사용자 맞춤 발주서 기능 개발"},{"description":"배민상회 어드민 서비스 확장","subDescription":["사내의 유사 ì
16„œë¹„스를 하나의 플랫폼에서 관리할 수 있도록 확장하여 배민문방구 쇼핑몰을 배민상회 어드민에서 관리할 수 있도록 구현"]},{"description":"디자인시스템 운영","subDescription":["모노레포화를 통하여 쇼핑몰과 어드민 컴포넌트들의 패키지 분리","패키지별 버저닝 및 배포 전략 수립"]},{"description":"개발 환경 개선","subDescription":["env-launcher라는 라이브러리 제작을 통해 10개 이상인 개발존 환경의 개발/배포 환경 개선","Redux 관련 레거시 코드를 Redux Toolkitê³¼ React Query로 전환하여 코드 복잡도 개선","손쉽게 사용할 수 있는 Infinite Scroll 컴포넌트 개발을 통한 여러 지면의 코드 패턴 정리 및 복잡도 개선"]},{"description":"웹 성능 개선","subDescription":["이미지 레이지 로드 기능 추가로 쇼핑몰 메인 페이지에서만 200여개 이상의 불필요 요청 수 감소"]}],"techStack":["React","Typescript","Next.js","React Hook Form","Redux Toolkit","Redux Saga","React Query","Express","styled-components","Gitlab","Storybook","Jest","React Testing Library","Lerna","MSW","AWS"]}]}]},{"companyName":"카카오페이","beginAt":"2020-08","endAt":"2021-05","team":[{"teamName":"금융사업클랜 투자파티","position":"팀원","beginAt":"2020-08","endAt":"2021-05","projects":[{"title":"코스피 지수에 따른 인덱스/리버스 펀드 투자","beginAt":"2020-08","endAt":"2021-02","description":"일반적인 펀드 서비스와 다르게 오락이 가미된 신규 펀드 매매 서비스를 구축하였습니다.\n사내 CBT까지 진행하였지만, 아쉽게도 컴플라이언스 이슈로 인해 서비스가 런칭되지는 못하였습니다.\n카카오페이에서 최초로 React Query를 도입하여 개발하였고, ê·¸ 후에 사용성 등을 전사에 전파하였습니다.","role":[{"description":"FE 개발 리드 및 일정 관리"},{"description":"신규 서비스 구축"}],"works":[{"description":"기술 스택, 컨벤션 정의, 배포, 모니터링 등 신규 개발 환경 구축"},{"description":"React Query를 활용한 제품 코드 및 테스트 코드 설계"},{"description":"지수 차트/펀드 매수/사용자 랭킹 등 다수의 기능 개발"},{"description":"Storybook, Mirage JS를 활용하여 UI 개발 및 검증 편리성 증대"}],"techStack":["React","React Query","nivo","Typescript","sass","Jest","React Testing Library","Mirage JS","Storybook","webpack","Github"]},{"title":"P2P 부동산 투자","beginAt":"2020-11","endAt":"2021-02","description":"부동산 P2P 투자 서비스를 운영하였습니다.\n이 서비스는 카카오톡 앱 내의 카카오페이 서비스 영역, 그리고 카카오페이 앱에서 접근할 수 있었습니다.\n아쉽게도 현재는 운영이 종료되었습니다.","role":[{"description":"FE 개발 리드 및 일정 관리"},{"description":"서비스 고도화"}],"works":[{"description":"React Query를 도입하여 투자내역 목록 지면 코드 복잡도 감소"},{"description":"카카오페이 통합웹뷰 SDK 적용"},{"description":"제휴사를 위한 카카오페이 통합웹뷰 SDK 브릿지 개발 및 가이드 제공"},{"description":"웹뷰 뒤로 가기 시 사용자가 ë³´ê³  있던 화면이 유지되도록 사용성 개선"},{"description":"Storybook, Mirage JS를 활용하여 UI 개발 및 검증 편리성 증대"},{"description":"개발 환경 개선","subDescription":["@babel/polyfill, awesome-ts-loader, tslint와 같은 더 이상 유지되지 않는 라이브러리 제거","babel-loader, core-js, eslint, prettier 설치 및 적용"]}],"techStack":["React","React Query","Typescript","sass","Jest","React Testing Library","Mirage JS","Storybook","webpack","Github"]},{"title":"펀드 투자","beginAt":"2020-08","endAt":"2020-10","description":"펀드 매매 서비스를 운영하였습니다.\n이 서비스는 카카오톡 앱 내의 카카오페이 서비스 영역, 그리고 카카오페이 앱에서 접근할 수 있었습니다.","role":[{"description":"서비스 고도화"}],"works":[{"description":"단 하나의 파일로만 되어있던 js 코드를 분할 처리하여 Overall LCP 약 30% 개선"},{"description":"개발 환경 개선","subDescription":["@babel/polyfill, awesome-ts-loader, tslint와 같은 더 이상 유지되지 않는 라이브러리 제거","babel-loader, core-js, eslint, prettier 설치 및 적용"]}],"techStack":["React","Typescript","Mobx","sass","Jest","webpack","Github"]},{"title":"투자 홈","beginAt":"2020-12","endAt":"2021-01","description":"카카오페이 투자 서비스들과 나의 투자 현황을 ë³¼ 수 있는 페이지를 운영하였습니다.\n이 페이지는 카카오톡 앱 내의 카카오페이 서비스 영역, 그리고 카카오페이 앱의 메인 탭 페이지로 제공되었습니다.","role":[{"description":"FE 개발 리드 및 일정 관리"},{"description":"서비스 고도화"}],"works":[{"description":"카카오페이 통합웹뷰 SDK 적용"},{"description":"다크 모드 화면 대응"},{"description":"개발 환경 개선","subDescription":["@babel/polyfill, awesome-ts-loader, tslint와 같은 더 이상 유지되지 않는 라이브러리 제거","babel-loader, core-js, eslint, prettier 설치 및 적용"]}],"techStack":["React","Typescript","sass","Jest","webpack","Github"]}]}]},{"companyName":"위버스컴퍼니","beginAt":"2020-06","endAt":"2020-08","team":[{"teamName":"웹개발팀","position":"팀원","beginAt":"2020-06","endAt":"2020-08","projects":[{"title":"위버스","beginAt":"2020-06","endAt":"2020-07","description":"위버스의 웹 버전을 운영하였습니다.","role":[{"description":"서비스 고도화 및 신규 기능 개발"}],"works":[{"description":"아티스트 커뮤니티 영역의 멤버십 혜택 기능 개발"}],"techStack":["React","Typescript","Mobx","styled-components","i18n","webpack","Storybook","Github"]},{"title":"타이니탄 상품 프로모션","beginAt":"2020-07","endAt":"2020-08","description":"방탄소년단 멤버들을 모티브 한 타이니탄이라는 캐릭터의 상품을 프로모션하는 사이트를 구축하였습니다.\n미디어 쿼리를 이용하여 위버스 앱 내 웹뷰 그리고 모바일 \u0026 데스크톱 환경을 지원하였습니다.\n글로벌, 미국, 일본 Shop 설
16정과 그에 따른 다국어도 지원하였습니다.","role":[{"description":"신규 프로모션 구축"}],"works":[{"description":"기술 스택, 컨벤션 정의, 배포 등 신규 개발 환경 구축"},{"description":"타이니탄 컨셉, 상품 소개 기능 개발"},{"description":"여러 가게와 언어를 지원하고 있는 위버스샵 상품의 딥링크 모듈 개발"}],"techStack":["React","Typescript","Mobx","styled-components","i18n","webpack","Github"]},{"title":"위버스샵","beginAt":"2020-07","endAt":"2020-07","description":"위버스샵의 어드민을 운영하였습니다.\n벡엔드 팀 리소스 부족으로 버그 수정 및 성능 개선 등의 업무를 지원하였습니다.","role":[{"description":"서비스 고도화"}],"works":[{"description":"배송지 권역 설정 지면의 렌더링 성능 개선"}],"techStack":["Angular","webpack"]}]}]},{"companyName":"우아한형제들","beginAt":"2018-10","endAt":"2020-05","team":[{"teamName":"배민상회개발팀","position":"팀원","beginAt":"2018-10","endAt":"2020-05","projects":[{"title":"배민상회","beginAt":"2018-10","endAt":"2020-05","description":"배민상회는 사장님께서 식자재 및 비품을 구매할 수 있는 서비스입니다.\n개발팀의 초기 멤버로 합류 후, 고도몰로 운영되고 있었던 서비스를 점진적으로 내재화시켰습니다.\n내재화가 완료된 후에는 서비스 관리 어드민 및 판매중개 비지니스 모델 전환을 위해 셀러 어드민을 구축하여 서비스 고도화를 진행하였습니다.\n또한, 컴포넌트를 공통으로 사용할 수 있도록 배민상회 디자인 시스템도 구축하였습니다.","role":[{"description":"FE 개발 리드 및 일정 관리"},{"description":"서비스 구축 및 신규 기능 개발"},{"description":"서비스 고도화"}],"works":[{"description":"기술 스택, 컨벤션 정의, 배포, 모니터링 등 신규 개발 환경 구축"},{"description":"배민상회 서비스 자체 플랫폼 구축 ( 고도몰 기능 100% 구현 )","subDescription":["메인 / 검색 / 상품목록 및 상세 / 장바구니 / 주문 / 회원 / 나의상회 / 샘플 등 기능 개발","모바일, 데스크톱 브라우저를 지원하기 위한 애플리케이션 설계","서비스 내재화가 완료되기 전까지 고도몰 운영"]},{"description":"서비스 고도화를 위한 어드민과 외부 판매사에서 사용할 수 있는 셀러 어드민 구축","subDescription":["판매사 관리 / 상품 관리 / 가격 관리 / 주문 관리 / 배송 관리 등 주요 기능 개발","단일 소스로 2개의 서비스가 제공되도록 애플리케이션 설계"]},{"description":"배민상회 디자인 시스템 구축","subDescription":["Button / Input / Select / Modal / Pagination / Table 등 주요 컴포넌트 개발","버저닝 및 배포 전략 수립"]}],"techStack":["React","Next.js","Redux","Redux Saga","Typescript","styled-components","webpack","Rollup","Storybook","Node.js","Express","Github","AWS"]}]}]},{"companyName":"어나더레인보우","beginAt":"2012-01","endAt":"2018-04","team":[{"teamName":"개발팀","position":"책임연구원","beginAt":"2012-01","endAt":"2018-04","projects":[{"title":"아모레퍼시픽 브랜드 웹사이트","beginAt":"2012-01","endAt":"2018-03","description":"아모레퍼시픽 브랜드들을 소개해 주는 서비스입니다.\n회사 재직기간 동안 가장 많이 진행하였던 업무들이었고, 시기에 따라 적절한 기술들을 사용하였습니다.\n브라우저를 위한 사용 기술 및 언어에 대한 주요 흐름은 아래와 같고, 부가적으로 필요한 환경들을 구성했었습니다.\nActionScript 3.0  -\u003e  jQuery  -\u003e  AngularJS  -\u003e  React\n\nImageMagick, FFmpeg와 같은 라이브러리들은 특수한 프로모션 사이트들에서 이미지와 영상 처리가 필요하여 사용하였습니다.","role":[{"description":"FE 개발 리드 및 일정 관리"},{"description":"프로젝트 견적 산출"},{"description":"신규 기능 개발"}],"works":[{"description":"라네즈 프로모션 사이트 개발 및 9개국 확산(한국, 중국, 대만, 홍콩, 태국, 베트남, 싱가폴, 말레이시아, 인도네시아)"},{"description":"이니스프리 프로모션 사이트 개발"},{"description":"프리메라 프로모션 사이트 개발"},{"description":"VB프로그램 프로모션 사이트 개발"},{"description":"헤라 프로모션 사이트 개발"},{"description":"한율 프로모션 사이트 개발"},{"description":"설화수 프로모션 사이트 개발"},{"description":"리리코스 마이크로사이트 개발"},{"description":"Verite 마이크로사이트 개발"},{"description":"VitalBeautie 마이크로사이트 개발"},{"description":"VB프로그램 마이크로사이트 개발"},{"description":"아이오페 마이크로사이트 개발"},{"description":"유스레볼루션 마이크로사이트 개발"}],"techStack":["ActionScript 3.0","PHP","Javascript","jQuery","ImageMagick","FFmpeg","Node.js","Express","gulp","Typescript","AngularJS","React","Redux","Redux Thunk","sass","webpack","AWS","Serverless","Github"]},{"title":"하기스 네이처피크닉 시즌5","beginAt":"2016-03","endAt":"2016-05","description":"하기스 네이처피크닉 프로모션 사이트에서 사용되는 API를 개발하였습니다.\n클라이언트로부터 이미지를 전달받아, 이미지에 필터 효과를 적용하고 애니메이션이 들어간 gif를 생성하고 반환해 주었습니다.","role":[{"description":"FE 개발 리드 및 일정 관리"},{"description":"프로젝트 견적 산출"},{"description":"API 기능 개발"}],"works":[{"description":"ImageMagick을 활용하여 이미지 필터 모듈 개발"},{"description":"FFmpeg를 활용하여 gif 생성 모듈 개발"},{"description":"AWS Lambda와 API Gateway로 API 구성"}],"techStack":["FFmpeg","ImageMagick","Node.js","AWS","Github"]},{"title":"제주항공 My Heroine 소셜무비","beginAt":"2014-01","endAt":"2014-03","description":"제주항공의 프로모션 사이트에서 SNS 무비를 제작할 수 있는 서비스입니다.\n사용자 이미지와 페이스북 친구들의 이미지를 업로드하면 자신만의 SNS 무비를 만들 수 있었습니다.","role":[{"description":"신규 기능 개발"}],"works":[{"description":"이미지 필터 모듈 개발"},{"description":"영상 크로마키 모듈 개발"}],"techStack":["ActionScript 3.0"]},{"title":"롯데센터 Fun view walk 앱 (Windows)","beginAt":"2014-06","endAt":"2014-09","description":"베트남 하노이 롯데센터 전망대의 대형 스크린에 전시했던 서비스입니다.\n사용자가 키오스크에서 입력한 텍스트를 다양한 인터랙션으로 보여주고, 세계 도시들의 전경과 우주 배경 등 다양한 테마가 디스플레이되었습니다.","role":[{"description":"신규 기능 개발"}],"works":[{"description":"만화경 이미지 테마뷰 개발"},{"description":"텍스트 파티클 애니메이션 테마뷰 개발"}],"techStack":["Cinder","C++","OpenGL","Github"]},{"title":"PlayAlarms 앱 (iOS)","beginAt":"2013-04","endAt":"2013-0
167","description":"아이데이션부터 앱 출시까지 주도적으로 진행한 서비스입니다.\n아침 기상을 위해 알람을 설정하면, 사용자에게 특정 미션을 수행하라는 푸시 알림이 전송되며,\n미션 수행 완료 시 해당 푸시 알림이 자동으로 종료되도록 개발했습니다.\n광고 없이 중국 지역 애플스토어 유틸리티 카테고리에서 20위를 달성하였고, 앱 제작부터 배포까지의 개발 과정을 모두 혼자 진행하였습니다.","role":[{"description":"서비스 기획 및 개발"}],"works":[{"description":"iOS 애플리케이션 아키텍처 설계 및 UI 개발"},{"description":"데시벨 측정 모듈 개발"},{"description":"가속도센서를 활용한 흔들기 측정 모듈 개발"}],"techStack":["Objective-C","Github"]},{"title":"이니스프리 iCF 앱 (iOS/Android)","beginAt":"2012-07","endAt":"2012-10","description":"이니스프리 iCF 앱은 이니스프리의 CF를 제작할 수 있는 서비스입니다.\n사용자들이 직접 촬영한 영상으로 자신만의 CF를 제작할 수 있고, 이것을 Youtube로 공유할 수 있었습니다.","role":[{"description":"신규 기능 개발"}],"works":[{"description":"영상 갤러리 개발"},{"description":"Youtube Data API 연동 모듈 개발"}],"techStack":["ActionScript 3.0","Adobe AIR"]}]}]}],"etc":[{"title":"https://www.kimcoder.io","link":"https://www.kimcoder.io","description":["개인 기술 블로그"]},{"title":"https://www.npmjs.com/package/react-simple-image-slider","link":"https://www.npmjs.com/package/react-simple-image-slider","description":["2개의 DOM으로 구현하는 React Carousel 라이브러리"]},{"title":"https://www.npmjs.com/package/react-sequence-player","link":"https://www.npmjs.com/package/react-sequence-player","description":["Image Sprite를 기반으로 애니메이션을 구현시켜주는 React 라이브러리"]},{"title":"https://www.serverless.com/examples/serverless-instagram-crawler","link":"https://www.serverless.com/examples/serverless-instagram-crawler","description":["serverless 프레임워크에 예제 기여","hashtag와 크롤링 주기를 설정하면 instagram의 피드를 크롤링하여 DynamoDB에 저장"]},{"title":"https://www.serverless.com/examples/serverless-nextjs","link":"https://www.serverless.com/examples/serverless-nextjs","description":["serverless 프레임워크에 예제 기여","next.js 애플리케이션을 aws에 serverless 모드로 배포"]}]},"__N_SSG":true},"page":"/resume","query":{},"buildId":"mYpFDr1DZDEyR2tzQItwY","isFallback":false,"gsp":true,"scriptLoader":[]}</script>
16</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.