• 소개
  • 기술스택
  • 경력
  • 소개
  • 학력사항
  • 민 병 찬
  • Frontend Developer
  • 서울시 구로구 고척동
  • 📞  (+82) 010-7702-0481
  • 📬  mbc0481@naver.com
  • 🏠  https://mbc-dev-blog.vercel.app
  • https://github.com/MinByeongChan
소개
  • 안녕하세요! 5년차  프론트엔드 주니어 개발자 입니다.
기술스택
  • 프론트엔드
      언어
      JavaScript(ES6+) / Typescript / HTML5 / CSS / SCSS
      퍼블리싱
      HTML5 / CSS / SCSS / emotion / styled-component
      개발환경
      React18 / jotai / Recoil / TanStack Query / Redux(RTK) / Redux-Thunk / Vue3 / pinia
      Bundler
      Webpack / vite
      Package
      npm / yarn
  • 데브옵스
    • AWS EC2 / CloudFront / S3
  • 그 외
    • Github / Jira
  • React 사용하는 것을 선호합니다.컴포넌트 공통화 및 재활용 하는 것에 능숙합니다. 상태관리, 비동기 처리, 컴포넌트 로직 제어, 다양한 디자인 패턴을 익히고 적용하며 개발합니다.
  • 재귀함수, 함수형 프로그래밍을 사용하여 개발하려고 합니다. SRP원칙을 준수하려고 하며 가독성있는 코드를 작성하려고 노력합니다.
  • 타입스크립트 타입 재활용 및 유틸리티 타입을 활용하여 타입을 작성하고, 유니온, 인터섹션 타입 등 활용할 수 있습니다.
  • 유틸성 함수는 jest를 사용하여 테스트코드를 작성하며, QA에 많이 잡히는 이슈들에 대해서는 cypress를 사용하여 이슈 재발하는 것을 방지하려합니다.
  • 최근에는 비즈니스 로직을 스토어 및 셀렉터를 사용하여 로직을 구성합니다.
  • 웹접근성 및 시맨틱 태그를 고려하여 개발합니다.
경력
2021. 09 - 현재
coway코웨이(서울)
  • 국내 정수기 및 생활가전 제조업 기업 코웨이에서 IT 프론트엔드 개발을 수행하고 있습니다. 코웨이에서 구축한 통합회원, 통합회원 어드민 회원 체계, 그리고 전자결제 서비스, 코디 매칭 서비스, 국내 배정 어드민, 미국 신사업 어드민 사이트, 미국 신사업 배정판과 같은 서비스를 만들었습니다.
  • 팀원들과 이슈들에 대해 소통하며 개발에 참여했습니다. 라이브러리 하나 선정하는 것도 여러 토의와 기술 검토를 통해 채택하는 과정을 거쳤습니다.
  • 매주 스프린트 개발하는 애자일 개발 프로세스를 경험했습니다. 해당 프로젝트의 기획이나 이슈가 있는 사항은 이슈화하여 산출물을 보다 완성도 있게 만들도록 했습니다.
2020. 02 - 2021.09
cowayKSNET(서울)
  • 국내 VAN/PG 서비스를 제공하는 KSNET에서 모바일 파트에서 WEB/APP 개발을 수행했습니다. KSNET에서 제공하는 앱인 KSTA Mobile, KSNET VAN 가맹점 매출 정보 확인 앱, 사내 기술 공유 사이트인 테크넷을 만들었습니다.
프로젝트
2024.04 – 현재
미국 신사업 어드민, 코웨이
  • 코웨이 미국 신사업을 위한 내부 어드민 서비스, FE 개발
  • 주문 대시보드, 작업 리스트, 지점장 배정판, 고객용 배정판, 창고이동 화면, 출고, 회계, 시스템 등 미국 작업자들이 사용할 어드민 메뉴 개발.
  • react-hook-form에서 제공하는 controller, form 두 기능을 모두 제공하는 템플릿 구조 설계 및 개발. 템플릿을 활용하여 각 필드에 대한 form을 전송하도록 함.
  • 기획, BE, FE 3팀과 협의하여 BE API 구조, 호출 순서, 페이지 렌더링 이슈 최적화. FE팀 내에서 팀원들과 협의하에 공통으로 처리할 수 있는 부분을 추출하여 SRP원칙을 준수할 수 있도록 함.
  • 프로젝트 코드의 유지보수성을 높이기 위해 코드 컨벤션을 주도적으로 제안하여 맞추고, 각 메뉴별로 코드의 일관성을 맞도록 함.
  • github 자동화 작업 진행. 깃헙 코드 오너 추가 및 허스키 스크립트 추가. github action을 사용하여 push 전 오류있는 코드를 올라가지 않도록 함.
  • sentry를 활용하여 stg에서 잡히는 에러를 트래킹 함. 타입에러 또는 비정상적인 api호출에 대한 검출 한 이후 jira를 통해 이슈를 팀내 공론화 시키고 주도적으로 에러 수정.
  • 유틸함수 관련하여 테스트코드를 작성하여 유틸함수개발 완성도를 높이려고 시도함. 테스트 코드 spec과 dummy데이터를 다양하게 만들어 여러 방면으로 테스트를 진행할 수 있도록 함. dev, stg 환경에서 에러 발생시, 테스트코드를 수정하여 에러가 재발하지 않도록 함.
  • React, Typescript, TanStack Query, Recoil, Mui, Styled-Component, Sentry, vite, AWS EC2 사용
ABC 어드민 사이트
2022.04 – 2023.11
코디매칭 서비스, 코웨이
  • 기존 오프라인 방식에서 웹페이지를 제공하여 고객에게 보다 쉬운 렌탈방식을 제공. FE 개발
  • 기존 Vue.js 로직을 React 환경으로 마이그레이션, 중복되는 화면 및 기능을 최소화하여 성공적으로 마이그레이션 수행.
  • 데이터독 RUM 연동과 cypress를 E2E 테스트코드를 작성하여 운영배포 시, 이슈발생률을 최대한 낮추어 배포시킬 수 있도록 함.
  • 기존 매칭 카운팅을 FE에서 setTimeout으로만 제어했던 방식을 BE와 협업하여 개선하고 매칭 안정성을 향상 시킴. setTimeout의 카운트로 제어하는 것이 아닌 더 빠른주기로 현재 시간을 불러와 카운트하는 방식으로 변경. BE에서는 유효한 카운트를 제공하는 방식으로 매칭하는 방식으로 변경하여 매칭 안정성을 높임.
  • GA360을 이용하여 마케팅에 유용한 정보(제품 정보, 매칭 시도 횟수, 매칭 성공페이지 진입률 등)를 제공하도록 적용.
  • CI/CD를 적용하여 쉽고 안전한 배포 방식 적용 (수동배포 스크립트 개발). github publishing 을 이용하여 배포노트 기록 및 버전관리되도록 설계.
  • React.js, Typescript, TanStack Query, jotai, vite, AWS (S3, CloudFront) 사용
Situation
  1. 기존 레거시 버전이었던 Vue 버전을 React 버전으로 마이그레이션 하던 도중, 무분별하고 불필요하게 중복되는 컴포넌트 및 비즈니스 로직 발견
  2. 코디 매칭 상태 체크를 FE에서 REST API를 사용하여 Browser에서 매 초 마다 확인하고 있었음.
Task
  1. 무분별하게 중복되는 코드를 사용하는것은 컴포넌트 개발론과 정반대로 이어지는 개발법이라고 판단하여 중복되는 컴포넌트 공통화 및 비즈니스로직을 공통화시키는 작업이 필요하다고 판단.
  2. 자바스크립트에서의 setTimeout으로 제어하기에는 부정확하다고 판단. 또한 단순 매 초 마다 단순 매칭 확인 로직을 넣어도 되는지 BE와 같이 협업 제안.
Action
  1. 공통 컴포넌트 로직을 구성하고, 비즈니스 로직은 팀 내 공통된 처리 방안이 없었기 때문에, 훅으로 전환하여 처리. 커스텀 훅으로 전환 시, useMemo 또는 useCallback을 사용하여 시간 복잡도를 줄이려고 시도.
  2. setTimeout을 매초 가 아닌, 브라우저 현재 시간을 기준으로 비교하여 현재시간을 파악하는 방식으로 변경. 또한, 매칭을 매 초 확인하는 것이 아닌, BE에서 임의의 값으로 내려주는 카운트로 수정. 매칭 확인 시간을 BE에서 제어하도록 정책 변경.
Result
  1. 프로젝트 내 중복되는 코드양을 상당수준으로 줄일 수 있었음. 템플릿 및 레이아웃과 같은 공통된 데이터 컴포넌트를 생성함으로써 코드 재사용률이 높아졌고, React.memo, 컴포넌트 내부에서 useMemo, useCallback을 처리하여 중복되는 로직일 경우 리렌더링되는 이슈를 최소화함.
  2. 브라우저 탭 전환 및 포커싱을 잃을 경우 브라우저 현재시간을 계속 불러오게 하여 이전보다 정확한 시간으로 매칭을 판단하도록 함. 매칭 시간을 BE에서 전담하는 정책으로 변경하므로 매칭 탈취율이 높아질 경우, BE에서 DB 업데이트 만으로 매칭 시간을 제어할 수 있도록 함. 비정기 배포하는 경우를 줄어들게 함.
2023.05 – 2024.04
통합회원, 코웨이
  • 코웨이 구서비스 및 신규 서비스 회원을 통합하기 위한 서비스. 각 서비스에 통합회원 공통 회원가입, 계정찾기, 마이페이지 화면 제공 및 회원 마이그레이션 기능 개발. FE 개발
  • 각 회원서비스에 제공되는 마이페이지, 로그인, 계정 찾기, 회원가입 페이지 개발.
  • 유닛테스트부터 통합테스트까지 개발팀 내부에서 진행하여 버그를 최소한으로 줄임.
  • 웹접근성 WCAG 2.1을 준수하여 부분적으로 적용하고, 다양한 사용자에게 접근하기 용이하도록 화면 구성
  • QA에서 발견된 이슈들을 스크립트로 구성하여 테스트 및 오류가 재발하지않도록 함. 매 배포마다 테스트코드를 같이 수정하여 현행을 유지하고자함.
  • Vue 3, Typescript, Pinia, vite, SCSS, AWS(S3, CloudFront), Jest, Storybook, Cypress 사용
Situation
  1. Vue2에서 Vue3 업데이트 하는 과정에서 이전에 잡히지 않던 이슈들이 QA에서 잡히는 이슈 발생.
Task
  1. 해당 이슈들에 대해 재발하지 않도록 테스트 코드를 작성하는것이 좋다고 판단. 이전에 레거시로 남아있던 e2e 테스트 코드를 활성화.
Action
  1. 유틸함수에 대해서 유닛테스트를 진행하였고, QA에서 발생하는 로그인 이슈, api 관련 이슈들은 cypress interceptor 기능으로 처리, store가 필요한 부분은 cypress에서 세팅하여 실제 브라우저 상황이랑 동일하게 만들어 테스트를 진행.
Result
  1. 결과적으로 Vue3 코드 리팩터링으로 인한 이슈들은 해결되었고, 발생했던 이슈들에 대해서 테스크 코드에 케이스별로 갖고 있게됨. 이러한 코드 히스토리를 이용하여 이후 발생하는 QA이슈들에 대해 이전 버전과 비교하여 보다 확실하게 처리할 수 있었음.
2021.11 – 2022.02
통합회원 어드민, 코웨이
  • 코웨이 통합회원의 회원 조회, 통계성 데이터 제공, 이용약관 관리 등 관리자에게 관련 정보들을 제어 및 조회할 수 있도록 제공되는 어드민 사이트. FE 개발
  • 팀 내 라이브러리 사용 접합성을 확인하기 위해 RTK, redux 최초로 도입 및 팀내 이슈 공유. modal provider 초기 구조 개발.
  • 어드민 회원별 권한을 제어하여 각각 다른 메뉴를 접근할 수 있도록 제어하는 로직 개발.
  • Editor를 커스터마이징 하여 통합회원에서 사용될 스타일을 에디터에 그대로 반영함. 사용자가 이용하기에 친숙한 UI를 사용할 수 있도록 함.
  • React, Typescript, Redux(RTK / redux-thunk), vite, AWS (S3, CloudFront) 사용
2020.04 – 2021.09
KSTA, KSNET
  • KSNET VAN/PG 가맹점에 대한 매출정보확인 앱 리뉴얼 및 서비스 유지보수
  • JavaScript, HTML5, CSS, jQuery 사용
학력사항
  • o 2014.03 ~ 2020.02 성결대학교 정보통신공학부 전공
  • o 2020.05 정보처리기사 자격증 취득
  • o 2019.12 ~ 2020.03 IT동아리 넥스터즈 16기 개발자 활동