Moon Seung Hyun

About Developer Dave


기술 스택

아래는 네이버 지원서 준비과정에서 알게된 스킬체크 기준입니다. 합리적이라고 생각하여 가져왔습니다

초급 구체적으로는 잘 모르지만, 기본적인 지식과 경험은 가지고 있음
중급 중간 규모 프로그램 및 시스템을 개발할 수 있으며, 주요 이슈 트러블슈팅을 할 수 있을 정도로 내부구조에 대해 이해하고 있음
고급 대규모 프로그램 및 시스템을 참고사항(책/인터넷) 없이 개발할 수 있으며, 일반적이지 않은 난해한 부분도 일부 참고를 통해 개발할 수 있음

협업툴

  • Slack, 잔디, Teams
  • Trello
  • Google (Drive, Hangout, Mail..)
  • JIRA, Confluence, Notion

경력

Zigbang 프론트엔드 개발자 2021/05 ~ 2023/12 (2년 7개월)
BMSMILE 웹 프론트엔드 개발자 2020/07 ~ 2020/12 (5개월)
Rsupport 웹 프론트엔드 개발자 2020/02 ~ 2020/07 (5개월)
Virnect 웹 프론트엔드 개발자 2019/10 ~ 2020/02
Slowalk 웹 풀스택 개발자 2016/06 ~ 2019/04 (2년 10개월)


담당 프로젝트 & 업무

Zigbang

  • ZAMS - 사용자 행동 로그 관리 시스템 in FE지원팀

    • 직방 기술블로그 글 참고 : 직방이 사용자 행동 로그를 관리하는 방법. ZAMS
    • 담당업무 : 관리 시스템 페이지 & 일부 API 개발, 리포트 & 슬랙알림
    • 기술 스택 :
      • 프론트엔드 : Typescript, React Hooks, Apollo-Client, React-DnD, Handlebar
      • 백엔드 : Node.js,
      • Database : MongoDB
      • Test : Jest, Playwright
      • ETC : Serverless(Lambda scheduled cron), Slack API
    • 효용성
      • 관리 비용 감소 : 기존에 엑셀로 관리하던 것을 사용자로그 관리 전용 툴을 이용함으로써 보다 체계적으로 관리 가능.
      • 의사소통 비용 감소 : 엑셀보다 정돈된 UI를 통해 소통. 개발 담당자를 등록하고 슬랙 알림으로 작업을 요청할 수 있어서 추가적인 소통 비용 감소.
      • 버그 가능성 감소 : 데이터 분석팀, 기획팀에서 파라미터를 등록하고 개발자는 해당 파라미터를 설계 타입에 맞게 불러와야하기 때문에(타입 강제성으로) 정확한 작업이 가능.

  • E2E 테스트 도입 in FE지원팀

    • 설명 : 직방 앱 안드로이드 & IOS 앱 E2E 테스트 도입. 서비스 개발팀에서 시연했던 프로젝트를 지원팀으로 이동하며 담당 업무로 바뀜.
    • 담당업무 : 테스트 시나리오 개발 및 기기 대응, 리포트 & 알림 개발
    • 기술 스택 :
      • Langage: Node.js(Typescript), Cucumber(Gherkin)
      • Test 원칙 : BDD(Behaviour-Driven Development)
      • Test lib: WDIO, Appium
      • Test Infra: Browserstack
    • 테스트 디바이스
      • Android 실기기 & 에뮬레이터
      • IOS 실기기 & 에뮬레이터
    • 테스트 커버리지 (전체 기능들 중 약 60% 이상)
    • 효용성
      • preview 단계에서 버그 발견
      • rn 버전업 작업에서 사용. QA 인력은 마지막 검증에만 사용.

  • 기술공유 in FE지원팀

  • D3 차트 개발 in FE지원팀

    • 설명 : 직방앱에 들어가는 차트 개발
    • 관련 블로그 글 : D3.js 차트 개발 Hands on lab
    • 담당업무 : 다른 프로젝트의 차트를 마이그레이션 & 커스텀. 다수의 리팩토링 작업 진행
    • 기술 스택 : Typescript, D3.js, Storybook, Jest

BMSMILE

  • Pethroom(페스룸) - 반려동물 브랜드 쇼핑몰

    • 설명: 멤버십, 혜택 등 재구매 고객을 확보하는데 특화된 커머스 서비스
    • 담당업무 : 리뉴얼 웹 사이트 프론트엔드 개발 전담, 웹뷰 제작
    • 기술 스택 : Typescript, React.js(Hooks), Redux, Redux-Saga, Storybook, Cloudfront, Route53, Styled-Components, Firebase Auth, Webpack
    • 기능 & 페이지
      • 계정 & 인증(Firebase Auth)
      • 홈
      • 스토어
      • 멤버십
      • 마이페이지
      • 설정
      • 장바구니
      • 반려동물 조회/등록/수정/삭제
      • 체험단 •쿠폰 •포인트
      • 주소 관리 (Daum Address API)
      • 주문 & 결제(INICIS)
      • 주문 관리
      • 리뷰
      • 고객센터
      • 약관
      • 미션

RSUPPORT

  • Reemote Meeting 유지보수
    • Reemote Meeting 퍼포먼스 향상을 위한 React Lazy Load Component 개발 Github 링크
    • Lighthouse를 활용한 모든 웹페이지 성능측정 스크립트 작업 Github 링크
    • 렌더링 속도 향상을 위한 에셋 분석툴 도입 제안(Webpack Bundle Analyzer)
  • 수습과제 채팅앱 개발 by Socket.io - Github 링크
  • 회사 서비스 관련 기술 공부하며 작성한 블로그 글 : [WebRTC] 공부
  • 수습 발표
presentation after intern from 승현 문

Virnect

  • 클라우드용 서비스 프론트엔드 개발
  • 새로운 워크 플로우 제안 - https://www.notion.so/Workflow-9208a770012643c5b404376927d313e2
    • vardaccio 를 이용한 private npm registry 구축.
    • vardaccio를 활용하여 기능 모듈, UI 컴포넌트 공유
    • storybook을 개발 명세서로 활용.
  • Notion에 프론트엔드 개발자 가이드라인 작성. 작업자들간 공유할 컨벤션, 작업방식을 문서화 함.

새로운 Workflow 설계


Slowalk

  • [한국백혈병어린이재단] 희망별빛 캠페인 원페이지 제작 Slowalk

    • 담당업무 : 풀스택 개발. 간단한 원페이지의 소개 + 행사관련 내용 이메일 발송기능
    • 백엔드 : Ruby on Rails
    • 프론트엔드 : Jquery, HTML&CSS
    • DB : MySQL
    • 웹서버 : Nginx
    • 이미지 저장소 : AWS S3
    • infra : AWS Elastic Beanstalk

  • [서울시금천직장맘지원센터] 금천직장맘 홈페이지 개발 Slowalk

    • 담당업무 : 풀스택 개발
    • 주요내용
      • 관리자(상담사)와 고민있는 직장맘들을 위한 상담 서비스
      • 관리자 페이지 (회원관리, 배너 관리, 문의 & 답변 관리, 알림 이메일)
      • 게시판 기능(CRUD), 댓글 기능
      • 회원 관리(로그인, 회원가입, 비밀번호 찾기, 아이디 찾기)
      • Static 페이지들(서비스 소개, 상담사 소개 …)
    • 백엔드 : Ruby on Rails
    • 프론트엔드 : Jquery, HTML&CSS
    • DB : MySQL
    • 웹서버 : Nginx
    • 이미지 저장소 : AWS S3
    • infra : AWS ElasticBeanstalk

  • [언론재단] 뉴스트러스트 프로젝트 Slowalk

    • 담당업무 :
      • 기초적인 데이터 가공
      • Read기능 위주의 홈페이지 제작
      • 가공한 형태소 데이터 시각화
      • 정답셋 데이터 생성을 위한 설문조사 형태의 페이지 제작
    • 백엔드 : Ruby on Rails
    • 프론트엔드 : Jquery, HTML&CSS
    • Bundler : Webpack
    • DB : MongoDB
    • 웹서버 : Nginx
    • infra : Docker
    • 시각화 라이브러리 : D3.js

  • [국립암센터] 암발생 지리정보 서비스 Slowalk

    • 서비스 주소 : http://ncrs.cancer.go.kr/csgis
    • 담당업무 :
      • 풀스택 개발
      • 지도기반 데이터 시각화와 차트를 통한 대시보드 개발
      • 클라이언트의 IDC의 서버세팅규정에 따라 서버 세팅(RedHat)
    • 백엔드 : Node.js
    • 프론트엔드 : Vue.js
    • DB : Oracle
    • OS : Red hat(CentOS 7)
    • 웹서버 : Apache(중앙서버), Nginx(배포서버)
    • infra : Docker
    • Bundler : Webpack
    • 지도 API : SGIS MAP API
    • PDF 다운로드 : Puppeteer
    • 실시간 미세먼지 데이터 : 공공데이터포털 실시간 미세먼지 API
    • 시각화 라이브러리 : D3.js, Billboard.js, chart.js, chartist.js

    • 기억에 남는 경험 :

      시스템 마이그레이션

      서비스 개발초기에 백엔드, 프론트, 디비를 다 JS스택으로 구성함.
      클라이언트의 요청에따라 개발후반에 Oracle 디비로 바꿔야했음.
      그래서 기존의 MongoDB ➡️ Oracle로, ODM(Mongoose) ➡️ ORM(node-oracledb), 백엔드 코드를 다 마이그레이션함.

      폐쇠된 네트워크에서 Docker 도입

      IDC에서 내부망을 제외한 아웃바운딩을 다 막아놔서 서버입고시 인터넷을 쓸 수 없음.
      입고후에는 의존성 패키지, 라이브러리등을 다운 받지 못함.
      docker save, load를 통해 다른 컴퓨터에서 이미 빌드된 이미지를 gzip으로 배포서버에 옮기는 방식으로 개발함.
      그래서 입고할 Red hat 서버에 docker, docker-compose 패키지만 설치하고 입고함.

  • [서울대학교산학협력단] 미세먼지 대기건강지수 웹 페이지, 설문조사 웹 페이지 개발 Slowalk

    • 서비스 주소 : 클라이언트 내부 검토중이라 아직 미공개.
    • 담당업무 :
      • 지도기반 데이터 시각화와 차트를 통한 대시보드 개발
      • 데이터 시각화 효용성을 측정하기 위한 설문조사 웹 페이지 개발
      • 유저의 현재위치(GPS)에 해당하는 데이터 값 출력
      • 서울대학교 산악협력단의 요청으로 서울대 대학원에서 대학원생들과 교수님들을 대상으로 “인터렉티브 데이터 시각화”에 대한 발표를 진행함.
      • 시각화의 효용성에 대한 설문조사 웹 페이지 개발
    • 백엔드 : Node.js
    • 프론트엔드 : Vue.js
    • DB : MongoDB
    • 웹서버 : Nginx
    • infra : Docker
    • 지도 API : Naver Map API
    • 실시간 미세먼지 데이터 : 공공데이터포털 실시간 미세먼지 API

    • 시각화 라이브러리 : D3.js, Billboard.js, chart.js, chartist.js

      지도페이지 제작당시 성능이슈

      문제상황 : 251개의 시군구를 브라우저(IE)에서 한꺼번에 그리는 것에 성능이슈가 생김.

      해결 방법 :

      • 지도의 zoom이 10개 정도의 시군구만 보여줄때만 시군구를 볼 수 있도록 제한함.
      • 데이터 역시 MongoDB의 Geospatial Query를 이용하여 화면에 나타나는 지역만 가져옴.
      • 화면 정중앙의 좌표값과 화면 가장자리까지의 거리값을 쿼리에 넣으면 컴퍼스로 원을 그려 해당 지역에 겹치는 지역의 GeoJson데이터 만 출력해줌.
      • 그것을 MongoDB Aggregate로 데이터 값과 엮어서 가져옴.


개인프로젝트

  • 연예인 사진 NFT 온라인 응모 플랫폼

    • 진행기간 : 2022
    • 서비스 주소 : 아직 일반 공개가 안됨.
    • 내용 : 연예인의 사진을 NFT로 만들어서 응모할 수 있는 플랫폼 작업
    • 사용한 Skill 또는 지식
      • Language : Typescript
      • JS Library : React v18(Hooks), Next.js, React-Query
      • Code Formatting : ESlint, Prettier, Husky
      • UI Library : Material
    • 기능
      • 반응형 웹
      • 서비스 페이지
      • 관리자 페이지
      • 로그인 & 로그아웃(카카오)
      • 가상화폐(Klayton) 지갑 연결 (Kaikas - chrome extension)
      • 응모 기능

  • 인터렉티브 신용카드 결제 폼

    • 진행기간 : 2021
    • 서비스 주소
    • 깃헙 주소
    • 내용 : 인터렉티브 신용카드 결제 폼 구현
    • 사용한 Skill 또는 지식
      • Language : Typescript
      • JS Library : React(Hooks)
      • Bundler : Webpack
      • Formatting : ESlint, Prettier, Husky

  • TDD-BDD-case-study

    • 진행기간 : 2021
    • 서비스 주소
    • 깃헙 주소
    • 내용 : TDD, BDD를 공부해보며 infinite 스크롤 개발에 적용. README에 내용 작성
    • 사용한 Skill 또는 지식
      • TDD & BDD
      • Language : Typescript
      • JS Library : React(Hooks)
      • Data synchronization & management lib : React-Query
      • Test lib
        • Unit Test : Jest, Jest-Dom, testing-library/react
        • E2E Test : Cypress(E2E)
      • Bundler : Webpack
      • Web API : IntersectionObserver, Fetch
      • Style : Styled-component
      • Formatting : ESlint & TSlint, Prettier, Husky
      • CI/CD Tool : Travis CI, Coveralls

  • 공개 채팅앱 개발

    • 진행기간 : 2020
    • 본인이 공헌한 점 : 풀스택 개발
    • 주요 기능 :
      • 채팅창 들어오고 나갈때 상태 메세지
    • 사용한 Skill 또는 지식
      • Frontend : React.js, Mobx, Socket.io-client
      • Backend : Node.js, Socket.io

  • 세운상가 네트워크 맵 프로젝트 - 기능 개선

    • 진행기간 : 2020
    • 서비스 주소 : 아직 일반 공개가 안됨.
    • 주요내용 : 세운상가의 네트워크 데이터를 D3를 이용하여 네트워크 맵으로 표현한 프로젝트. 프리랜서로 진행한 프로젝트
    • 본인이 공헌한 점 : sigma.js로 되어있던 코드를 D3.js로 바꿈.
    • 기능 추가 - 메뉴, 노드 포커싱 등
    • 사용한 Skill 또는 지식
      • Skill : D3.js

  • 블로그 이력서 PDF 출력

    • 생계형 프로젝트
    • 진행기간 : 2019년 9월
    • 주요내용 : 블로그에 적은 이력서를 원페이지 PDF 파일로 출력. puppeteer로 출력시 PDF파일이 10mb가 넘어 compressing을 위해 Ghostscript를 도입.
    • 사용한 라이브러리 : Puppeteer, Ghostscript
    • 깃헙 주소 : https://github.com/Seunghyum/onePagePDFDownload-Puppeteer-Ghostscript

  • 서울시 미세먼지 지도시각화

    • R ShinyApp 웹서비스 퍼포먼스 테스트용 토이 프로젝트
    • 진행기간 : 2018년
    • 주요내용
      • 지도 시각화 프로젝트 시작 전 프레임워크 테스트용 프로젝트
      • Shiny App(R)을 웹서비스로 만들 수 있는지 확인차 만듦.
      • 테스트 후 데이터 시각화 관련프로젝트들을 Node.js로 만듦.
        • <서울대학교산학협력단> 미세먼지 대기건강지수 웹 서비스
        • <국립암센터> 암발생 지리정보 웹 서비스
      • 깃헙 주소 : https://github.com/Seunghyum/R-seoul_dust_map
    • 본인이 공헌한 점 : 풀스택 개발.
    • 사용한 Skill 또는 지식 : Shiny App(R), HTML&CSS, jQuery, D3.js, SQLite, AWS EC2, Docker, Bitbucket

  • Shapefile to Geojson

    • SGIS에서 받은 지도데이터(.shp)를 웹에서 표현가능한 geojson, topojson으로 변경하는 작업 내용 방식 정리
    • 진행기간 : 2018년
    • 사용한 Skill : topojson, geojson, shpfile, sgis, ogr2ogr, geo2topo

  • 단쿠키(단국대 커뮤니티)

    • 서비스 주소 : https://www.dankookie.com
    • 운영중인 서비스
    • 진행기간 : 2018년
    • 주요내용 : 단쿠키(단국대 커뮤니티) 제작 참여.
    • 본인이 공헌한 점 : 풀스택으로 개발 참여. 교수 인기투표, 학교 주변맛집 지도시각화. 기능 고도화 및 버그&에러 수정, 동아리별 페이지 제작(예시 : https://github.com/Seunghyum/dankookie-D-Voice)
    • 사용한 Skill 또는 지식 :
      • 지식 : Monorepo(Yarn workspace), AWS VPC
      • Skill : Node.js, Vue.js, Vuex, Yarn, HTML&CSS(SCSS), MongoDB

  • 단국대 커뮤니티 디쿠(DKU)

    • 토이 프로젝트
    • 진행기간 : 2017년
    • 주요 내용 :단국대 커뮤니티 만들기 프로젝트.
    • 주요 기능 :
      • 강의평가
      • CRUD 게시판
      • 교수 인기투표
      • 학교 홈페이지 크롤링(전화번호부)
      • 수강신청 리허설 - 수강신청기간 전 수강신청을 연습해볼 수 있는 페이지 개발. 수강신청 페이지의 assets들을 그대로 따와서 클론 페이지를 개발하여 배포함.
    • 성과 : Professor101 이라는 교수 인기투표 서비스는 학기초 수강신청 시기에 배포하여 좋아요 100여개 받음
    • 본인이 공헌한 점 : 풀스택 개발.
    • 사용한 Skill 또는 지식 :
      • 지식 : MVC 모델
      • Skill : Ruby On Rails, HTML&CSS, jQuery, MySQL, AWS EC2/S3, GitHub
    • 깃헙 주소 : https://github.com/Seunghyum/Dku-dankook_community_service

  • 단국대 국제학부 사물함 & 중고책 온라인 예약서비스

    • 운영했던 서비스
    • 진행기간 : 2017년
    • 주요내용 : 단국대 국제학부 사물함 & 중고책 온라인 예약서비스. 자리예약 기능.
    • 성과 : 국제학부 200여명 대상으로 실제 서비스 함.
    • 본인이 공헌한 점 : 풀스택 개발. 오프라인으로 받는 학과사물함 접수, 중고전공서적 판매를 온라인으로 옮김. 학생회와 협업하여 실제 국제학부 200여명 대상으로 실제 서비스 함.
    • 사용한 Skill 또는 지식 :
      • 지식 : MVC 모델, Queue
      • Skill : Ruby On Rails, HTML&CSS, jQuery, MySQL, AWS EC2/S3, GitHub
    • 깃헙 주소 : https://github.com/Seunghyum/DKU-IBA-locker-booking-backup

  • 수원도서관 크롤링

    • 토이 프로젝트
    • 진행기간 : 2017년
    • 주요내용 : 수원도서관 자료 크롤링
    • 본인이 공헌한 점 : 풀스택 개발.
    • 사용한 Skill 또는 지식 :
      • 지식 : MVC 모델
      • Skill : Ruby On Rails, HTML&CSS, jQuery, MySQL, AWS EC2, GitHub
    • 깃헙 주소 : https://github.com/Seunghyum/Crawler-Suwon_library

  • 택시 공유서비스 Taxiple

    • 창업 & 경진대회
    • 진행기간 : 2016년
    • 주요내용 :
      • 택시 카풀 서비스
      • 단국대 창업지원 동아리
      • 채팅기능, 매칭 기능
      • 개발파트 2명, 디자인 1명이서 개발함.
    • 성과 : 멋쟁이사자처럼 내부 해커톤 100개 팀중 10위.
    • 본인이 공헌한 점 : 풀스택 개발.
    • 사용한 Skill 또는 지식 :
      • 지식 : MVC. 모델
      • Skill : Ruby On Rails, HTML&CSS, jQuery, MySQL, AWS EC2/S3, GitHub
    • 깃헙 주소 : https://github.com/Seunghyum/Taxiple-backup

외부 활동

  • 멋쟁이 사자처럼 4기 중앙운영진

학력

  • 태장고등학교 2008/02 ~ 2010/02 졸업
  • 단국대학교 2014/02 ~ 2020/07 졸업예정