Search

문승현’s Portfolio

안녕하세요  프론트엔드 개발자, 문승현(Dave)입니다

제 작업물들을 소개할게요

Contact

 Email: antmgu@gmail.com
Phone: 010-9917-8998
 Github: https://github.com/Seunghyum
 이력서: https://davemoon.oopy.io/

목차(최신순)

1. [프리랜서] Telco(텔코) 서비스 개발

앱: 스토어에서 “텔코” 검색해서 직접 사용해 볼 수 있습니다. 웹: https://www.tel-co.net/
프로젝트 내용
테마여행, 먹방투어 공유 서비스인 “TELCO” 앱&웹 개발
주요 업무 및 상세 역할
라이브러리 개발: 에디터(lexical.js) - telco-wysiwyg, 뷰어 개발 - telco-editor-viewer
커뮤니티 - 게시글CRUD, 댓글&대댓글 CRUD개발
버그 수정 및 서비스 운영개발
작업기간: 약 7개월
인력 구성(기여도): FE 개발자 4명 (기여도 25%)
사용언어 및 개발 환경
Typescript, Next.js, React Query, GraphQL, lexical.js(에디터),Tailwind css, Flutter(웹뷰)

2. [직방] iOS/Android 모바일 앱 E2E 프로세스 구축 및 운영

시스템 구조도\huge {\textsf {시스템 구조도}}
딥링크 테스트 영상(iOS)
카카오 로그인 테스트 영상(iOS)
위 시스템 구조도의 3. 앱 업로드 & 테스트 실행 과정 Azure Pipeline 설명
테스트 결과 슬랙 알림 화면
지도 필터 수정,마커 검증 테스트 영상(Android)
Browserstack Appautomate 테스트 목록 화면
Browserstack - Test Observability (텍스트 결과 화면)
프로젝트 목적 개발자가 코드 리팩토링 또는 라이브러리 업데이트 시 개발자의 dev 테스트 비용과 QA팀의 비용이 높아 진행에 어려움을 겪음 이에 도움을 주고자 E2E 테스트 시스템 구축
프로젝트 내용
preview 빌드시 azure pipeline을 통해 browserstack에서 ios(15,16)와 android(22,23) 실기기 4개를 E2E 테스트를 실행
Cucumber를 이용한 BDD(Behavior Driven Development) 방식의 테스트 시나리오 관리
테스트 실행결과 리포트를 슬랙 알림으로 빌드넘버 슬랙 스레드에 알림
직방과 호갱노노 앱에 적용
주요 업무 및 상세 역할
QA 테스트 리스트를 cucumber의 Gherkin 문법의 문서로 전환 & 테스트 코드 작성
Test observability 적용 전, 커스텀 리포트 제작
리포트 슬랙 알림 기능(추후에 Browserstack의 Test observability로 전환)
작업기간: 약 2년
인력 구성(기여도): FE 개발자 2명 (기여도 50%)
성과
E2E 테스트가 QA 테스트 리스트의 약 70%를 커버(SNS로그인&회원가입&탈퇴, 딥링크 검증, 지도 렌더링 검증, 매물 개수 검증, 헛걸음 보상제 신청 등)
React Native 버전업과 같은 민감한 라이브러리 버전업 작업이 Full QA 전에 개발자 선에서 작업 완성도를 테스트하는데 사용
QA와 개발자간의 소통 방식 개선. 기존에 간략하게, 추상적으로 문서화했던 테스트 시나리오를 Cucumber(Gherkin) 문서로 구체화
사용언어 및 개발 환경
Typescript, Node.js, Browser Stack(App Automate), Appium, Cucumber.js(Gherkin - 테스트 문서관리)

3. [직방] 사용자 로그 관리 시스템. ZAMS(Zigbang Analytics Management System)

보다 자세한 내용은 직방 기술블로그 [직방이 사용자 행동 로그를 관리하는 방법. ZAMS] 포스팅을 확인해주세요
ZAMS를 적용하기 전, 기존 Workflow
1. 데이터 입력 - ZAMS 화면
2. 슬랙 알림
로그 상태관리 Workflow
사용자 로그 발생 지점 표시(gif)
zams 라이브러리의 타입스크립트 & Ajv를 통한 유효성 검사
상태별 로깅 리스트 화면
프로젝트 목적 기존에 엑셀로 관리되던 사용자 로그 추적을 위한 로깅 작업 과정을 백오피스 시스템화
프로젝트 내용:
작업 요청자(비개발자)와 개발자간의 소통을 위한 백오피스 개발
작업 요청에 필요한 파라미터 값들을 라이브러리로 배포
각 작업 상태에 따라 작업자에게 슬랙 알림
주요 업무 및 상세 역할
Frontend
공용 UI(DnD, tree UI, 이미지 업로드 등) 및 JS 로직 개발
Backend
node.js 서버 API 개발
슬랙 알림
회사 사원 정보 DB 업데이트 스케줄러 (AWS Lambda)
작업기간: 약 2개월
인력 구성(기여도): FE 개발자 3명 (기여도 33%)
성과
관리 비용 감소 : 기존에 엑셀로 관리하던 것을 사용자로그 관리 전용 툴을 이용함으로써 보다 체계적으로 관리 가능
의사소통 비용 감소 : 엑셀보다 정돈된 UI를 통해 소통. 개발 담당자를 등록하고 슬랙 알림으로 작업을 요청할 수 있어서 추가적인 소통 비용 감소
버그 가능성 감소 : 데이터 분석팀, 기획팀에서 파라미터를 등록하고 개발자는 해당 파라미터를 설계 타입에 맞게 불러와야 하므로(타입 강제성) 정확한 작업이 가능.
사용언어 및 개발 환경
Typescript, Next.js, Recoil, Nodejs, GraphQL, Apollo-client, AWS(Lambda, s3, DynamoDB, CDK 등)

4. [직방] 시세 차트 컴포넌트

실제 서비스 화면
Storybook 화면
프로젝트 목적 직방 아파트 서비스에 차트 기능 추가
프로젝트 내용: 시계열 데이터를 인터렉티브한 차트로 개발
주요 업무 및 상세 역할
기존 D3.js & jQuery로 만들어진 차트 코드를 React 컴포넌트로 전환&새로운 기능 추가
차트의 인터렉티브한 데이터 테스트를 위한 Playground를 Storybook에 등록. 개발자들이 사용하기 쉽도록 컴포넌트 사용법 문서화
데이터에 따라 비주얼적인 예외처리가 많이 필요한 차트의 특성을 고려해 코드 안정성을 위해 Unit Test 작성
작업기간: 2개월
인력 구성(기여도): FE 개발자 1명 (기여도 100%)
성과
유저 재방문율 증가
Playground 테스트로 기획자, 디자이너, 개발자의 의사소통 비용 감소. 배포전 미리 예외처리를 발견하고 이에 대응할 수 있었음.
사용언어 및 개발 환경
Typescript, React.js, D3.js, Storybook

5. [비엠스마일] 반려동물 브랜드 쇼핑몰 Pathroom

홈 화면
상품 상세 화면
장바구니 화면
주문 및 결제 화면
프로젝트 목적 기존 외주로 운영되던 서비스를 자체 서비스로 전환하기 위해 모든 시스템을 처음부터 만든 프로젝트
프로젝트 내용
회원 관리, 주문관리, 결제, 멤버십, 리뷰, 이벤트 페이지 등의 반응형 웹의 시스템 초기 개발
주요 업무 및 상세 역할
커머스 주요 기능 개발
- 계정 & 인증(Firebase Auth)
- 주문관리 &결제
- 리뷰
- 반려동물 조회/등록/수정/삭제
- 멤버십
- 미션
- 체험단 •쿠폰 •포인트
- 마이페이지
- 주소 관리
- 장바구니
모든 UI 컴포넌트를 Storybook으로 등록. 디자이너와 원활한 소통과 UI 예외사항 대응을 위해 Playground 활용
작업기간: 6개월
인력 구성(기여도): FE 개발자 1명 (기여도 100%)
사용언어 및 개발 환경
Typescript, React.js(Hooks), Redux, Redux-Saga, Storybook, Styled-Components, Firebase Auth, AWS(Cloudfront, Route53), Webpack

6. [슬로워크] 국립암센터 암발생지도

프로젝트 목적 암 관련 공공데이터의 지도 기반 데이터 시각화, 대시보드 개발
프로젝트 내용
지도기반 데이터 시각화와 차트를 통한 대시보드 개발
주요 업무 및 상세 역할
풀스택 개발
각종 차트
지도 API와 데이터 연동
지도 데이터 가공(TopoJson)
클라이언트의 IDC의 서버세팅규정에 따라 서버 세팅(RedHat)
국립암센터 IDC 서버에 웹 서비스 개발&배포
작업기간: 약 6개월
인력 구성(기여도): Fullstack 개발자 1명 (기여도 100%)
사용언어 및 개발 환경
Vue.js, Node.js, Oracle DB, Docker, Webpack, D3.js

7. [슬로워크] 미세먼지 대기건강지수 웹 서비스

프로젝트 목적 미세먼지 공공데이터의 지도 기반 데이터 시각화, 대시보드 개발
프로젝트 내용:
서울대학교산학협력단과 진행한 공공 웹서비스 제작
주요 업무 및 상세 역할
풀스택 개발
지도기반 데이터 시각화와 차트를 통한 대시보드 개발
유저의 현재위치(GPS)에 해당하는 데이터 값 출력
서울대학교 산악협력단의 요청으로 서울대 대학원에서 대학원생들과 교수님들을 대상으로 “인터렉티브 데이터 시각화”에 대한 발표를 진행함.
데이터 시각화 효용성을 측정하기 위한 설문조사 웹 페이지 개발
작업기간: 약 6개월
인력 구성(기여도): Fullstack 개발자 1명 (기여도 100%)
성과
사용언어 및 개발 환경
Vue.js, Node.js, Oracle DB, Docker, Webpack, D3.js

8. [개인] 지도 데이터 시각화

18/19 UEFA Champions League 대진표
미세먼지 지도 데이터 시각화
프로젝트 내용:
18/19 UEFA Champions League 대진표 제작
미세먼지 지도 데이터 시각화 아카이빙
작업기간: 1주일
인력 구성(기여도): Fullstack 개발자 1명 (기여도 100%)
사용언어 및 개발 환경
Vue.js, D3.js

9. [개인] 단국대학교 커뮤니티 <디쿠> 개발

로그인 화면
강의평가 게시판
게시판 글 작성 화면
인기투표 결과 화면
수강신청 모의 연습 이벤트 페이지
홈 화면
자유게시판
학교 부서 전화번호 검색
인기투표 선택 화면
강의 평가
게시판 상세
Professor101(교수 인기 투표)
사물함 신청 / 중고책 신청 화면
프로젝트 내용
단국대 커뮤니티 만들기 프로젝트 (2017)
주요 업무 및 상세 역할
풀스택 개발
강의평가 게시판 (강의 정보 크롤링)
CRUD 게시판
Professor 101 (교수 인기투표)
학교 홈페이지 크롤링(전화번호부)
수강신청 리허설 - 수강신청기간 전 수강신청을 연습해볼 수 있는 페이지 개발. 수강신청 페이지의 assets들을 그대로 따와서 클론 페이지를 개발하여 배포함.
작업기간: 약 2개월
인력 구성(기여도): Fullstack 개발자 1명 (기여도 100%)
성과
Professor101 이라는 교수 인기투표 서비스는 학기초 수강신청 시기에 배포하여 좋아요 100여개 받음
사용언어 및 개발 환경
Ruby On Rails, HTML&CSS, jQuery, MySQL, AWS EC2/S3, GitHub

10. [개인] 단국대 국제학부 사물함 & 중고책 온라인 예약서비스

프로젝트 내용
단국대 국제학부 사물함 & 중고책 온라인 예약서비스, 오프라인으로 받는 학과사물함 접수와 중고전공서적 판매를 온라인으로 옮김
주요 업무 및 상세 역할
풀스택 개발
학번 & 이메일 계정으로 로그인 기능
사물함 예약 화면 & 백엔드 로직 개발
중고책 예약 화면 & 백엔드 로직 개발
작업기간: 약 2개월
인력 구성(기여도): Fullstack 개발자 2명 (기여도 70%), 디자이너 1명
성과
학생회와 협업하여 실제 국제학부 200여명 대상으로 실제 서비스 진행
사용언어 및 개발 환경