Introduce

개발 경험을 향상시키는 개발자를 목표로하고 있는 6년차 웹 프론트엔드 개발자 이희윤 입니다. React, NextJS 개발을 주력으로 업무를 진행해 왔습니다.

개발 경험을 향상시키기 위해 신규 기술을 도입하거나 기존 작업을 개선하는 것에 관심이 있습니다. 대표적으론 디자인 시스템 구축과 컴포넌트 npm 모듈화 작업을 진행해 구성원들 간의 작업 효율을 높인 경험이 있습니다. 규격화된 UI는 기획 단계부터 구현될 화면에 대한 청사진을 그릴 수 있었고, 디자이너 분들과의 소통에도 효과적 이었습니다. 무엇보다 같은 프론트엔드 개발자들과 협업에서 모듈화 된 컴포넌트를 사용함으로서 퍼블리싱보다 비즈니스 로직에 집중할 수 있는 개발 경험을 제공할 수 있었습니다.

<aside> 🖥️ 개인 blog

</aside>

<aside> 💾 github

</aside>

<aside> 📧 [email protected]

</aside>

Skills

Language

• Javascript
• Typescript

Frameworks / Library

• React
• NextJS
• React-query
• Recoil
• Storybook

MarkUp

• Html
• Css
• Emotion
• Styled-component

Etc Tools

• Git
• Bitbucket
• Jira
• Slack
• Figma

Education & Certifications

명지대학교 전자공학 (본) / 시각디자인(복수) 학사 전공

2010.03 ~ 2017.02

정보처리기사

2018.11

Work Experience

1. 스테이지파이브

웹 프론트엔드 매니저 | 2021.09 - 2024.01 (2년 4개월)

• 서비스 개요

  KT / SKT / Uplus MVNO(알뜰폰) 상품 관련 커머스몰. 주문 및 셀프 개통 프로세스와 마이페이지에서 개인 정보 조회 제공.(실시간 이용량 / 이벤트 혜택 / 명세서 등) 해외 로밍 서비스, 채널톡 고객센터 연동한 cs 편의성 제공.

• 담당 업무 / 프로젝트

  1. 커머스몰 PindirectShop | 2021.09 - 2024.01 (2년 4개월) 링크

     a. 요금제 통신망 3사 확대 2023.08 - 2023.12 (5개월)

     수행 내용.

     • 기존 KT 요금제만 제공 → KT, SKT, Uplus 통신 3사 요금제 확대.
     • 주문 / 개통 / 마이페이지 통신망별 프로세스 추가 화면 개발 및 api.
     • 3사 확대에 따른 신규 에러 케이스 핸들링.

     <aside> ⚡ 확장 효과

     • 요금제 상품 확장으로 자사 경쟁력 확보.
     • 입사 초기 서비스 이용자 대비 이용자 50% 증가. (3만 → 4.5만) </aside>

     b. react regacy 프로젝트 리뉴얼 2021.12 - 2022.06 (7개월)

     수행 내용.

     • react regacy 프로젝트 → NextJS로 리뉴얼.
     • 프로젝트 빌딩 부터 배포 후 운영 유지보수까지 전 과정 참여.
       • 프론트엔드 기술 스택 및 룰 협의.
         • eslint (airbnb custom), prettier.
         • code convention.
         • pr review 방식.
       • 백엔드, 기획, 디자인, QA 타팀과 협업 프로세스 협의.
       • 런칭 이후 운영 유지보수 및 신규 프로세스 추가 개발.
     • 페이지별 meta data, sitemap, robot.txt 설정을 통한 검색엔진 최적화.
     • 메인 화면 & 컨텐츠 피드 server driven component 도입.
     • 개통 프로세스 / 마이페이지 / 메인 화면 등 주요 프로세스 메인 담당 개발.

     <aside> ⚡ 리뉴얼 효과.

     • SEO 설정으로 검색엔진 조회시 페이지 커스텀 및 노출도 증가.
       • react regacy 프로젝트는 CSR만으로 구현 되어있어 SEO 기능이 제한적이라 개선 필요.
     • 운영 유지 보수 효율 개선.
       • react regacy 프로젝트는 아웃소싱 & 잦은 개발 인력 변경으로 Redux, Context 상태관리가 혼잡하고 코딩 컨벤션이 일괄적이지 않아 운영 유지 보수에 비효율 발생.
     • 사용자 편의성 및 서비스 이용 경험 증대
       • 주문/개통 프로세스 등 전사적 차원에서 모든 프로세스 개선 진행.
     • 메인 화면 수정 / 추가 작업 요청시 배포 없이 작업 반영 & 작업시간 감소.
       • 퍼블리싱 작업 없이 메인화면 데이터를 DB화 하여 배포 없이 즉각적으로 화면 수정 / 추가 가능하게 개선. </aside>

     c. 리뉴얼 후 커머스몰 운영 유지보수 2022.07 - 2024.01 (18개월)

     수행 내용.

     • 주요 프로세스(개통, 주문, 마이페이지) 런타임 에러 모니터링을 위한 sentry 도입 및 관리.
       • 타 기관, 통신사와 관련된 프로세스 진행시 서드파티 에러로 인한 VOC 다수 발생.
       • 런타임 에러 케이스별 log history 기록.
     • 타팀(기획, 마케팅, 데이터분석)에서 사용자 트래픽과 데이터 분석을 하기 위해 google analytics 도입 및 관리.
     • 퍼블리싱 관련 업무 표준화를 위해 디자인 시스템 고도화.
       • 공용 컴포넌트 npm 라이브러리로 마이그레이션.
       • 유닛 테스트 역할을 위한 storybook 도입.
     • 요금제 추가 / 수정, 각종 이벤트, 고객 혜택 등 신규 프로세스 개발.
     • 리팩터링 및 기타 운영 이슈 대응.

     <aside> ⚡ 유지보수 개선 효과.

     • sentry 도입: 에러 발생시 고객 케이스별 명확한 안내 가능 등 고객센터에서 효율적으로 에러케이스 대응하도록 개선.

     • google analytics 도입: 각종 이벤트, 신규 사업 도입시 해당 상품 효과 분석이 가능해 크로스 셀링에 기여.

     • 디자인 시스템 고도화: 프론트엔드 개발시, 비즈니스 로직에 좀 더 집중할 수 있는 환경 제공. </aside>

     • 프로젝트 기술 스택

       • NextJS / Typescript / recoil / react-query / emotion

  2. Backoffice | 2021.09 - 2022.03 (7개월)

     • 프로젝트 기술 스택