안녕하세요
프론트엔드 개발자, 문승현(Dave)입니다
제 작업물들을 소개할게요 
Contact
목차(최신순)
1. [프리랜서] Telco(텔코) 서비스 개발
앱: 스토어에서 “텔코” 검색해서 직접 사용해 볼 수 있습니다.
웹: https://www.tel-co.net/
•
프로젝트 내용
◦
테마여행, 먹방투어 공유 서비스인 “TELCO” 앱&웹 개발
•
주요 업무 및 상세 역할
◦
◦
커뮤니티 - 게시글CRUD, 댓글&대댓글 CRUD개발
◦
버그 수정 및 서비스 운영개발
•
작업기간: 약 7개월
•
인력 구성(기여도): FE 개발자 4명 (기여도 25%)
•
사용언어 및 개발 환경
◦
Typescript, Next.js, React Query, GraphQL, lexical.js(에디터),Tailwind css, Flutter(웹뷰)
2. [직방] iOS/Android 모바일 앱 E2E 프로세스 구축 및 운영
딥링크 테스트 영상(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를 적용하기 전, 기존 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여명 대상으로 실제 서비스 진행
•
사용언어 및 개발 환경