About Developer Dave
기술 스택
아래는 네이버 지원서 준비과정에서 알게된 스킬체크 기준입니다. 합리적이라고 생각하여 가져왔습니다
초급 구체적으로는 잘 모르지만, 기본적인 지식과 경험은 가지고 있음
중급 중간 규모 프로그램 및 시스템을 개발할 수 있으며, 주요 이슈 트러블슈팅을 할 수 있을 정도로 내부구조에 대해 이해하고 있음
고급 대규모 프로그램 및 시스템을 참고사항(책/인터넷) 없이 개발할 수 있으며, 일반적이지 않은 난해한 부분도 일부 참고를 통해 개발할 수 있음
- Language : Javascript Typescript Node.js Ruby R Python
- Frontend
- Cross platform : React Native Flutter
- JS Library : React.js Vue.js jQuery
- State management : Redux Vuex Recoil Mobx
- Data synchronization & management lib : React-Query Apollo-Client
- HTML&CSS : SASS(SCSS) Template Engine(pug, handlebars) Styled-Components Emotion
- Data Visaulize : D3.js
- Test
- Test Tool : Cucumber(Gherkin) for BDD(Behaviour-Driven Development)
- Unit Test Lib : Jest
- E2E Test Lib : Appium Cypress Playwright
- Test Infra : Browserstack
- Bundler : Webpack Parcel Vite
- ETC : Puppeteer Naver Map API SGIS MAP API Storybook Socket.io
- Database : MongoDB MySQL
- WebServer : Nginx Apache
- CI/CD : Azure Pipeline Serverless
- Infra : Docker AWS Verdacio
협업툴
- 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% 이상)
- 🎥 딥링크
- 로그인/회원가입/탈퇴 (🎥 이메일, 🎥 Google, 🎥 Kakao, Facebook)
- 🎥 아파트 문의하기
- 지도 검증
- 🎥 필터 검증
- 🎥 리스트 페이지 매물 갯수 검증
- 지킴중개
- 🎥 헛걸음 보상제
- …등등
- 효용성
- preview 단계에서 버그 발견
- rn 버전업 작업에서 사용. QA 인력은 마지막 검증에만 사용.
-
기술공유 in FE지원팀
-
D3 차트 개발 in FE지원팀
- 설명 : 직방앱에 들어가는 차트 개발
- 관련 블로그 글 : D3.js 차트 개발 Hands on lab
- 담당업무 : 다른 프로젝트의 차트를 마이그레이션 & 커스텀. 다수의 리팩토링 작업 진행
- js ➡️ typescript 리팩토링
- 다양한 차트를 연동 (Line chart + Area chart + Bar plot chart + scatter chart)
- 텍스트 데이터 정규화에 대한 unit 테스트 작성(jest)
- 기획자들이 스토리북에 API를 조회해가며 테스트 해볼 수 있게 세팅
- 기술 스택 : 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 유지보수
- 수습과제 채팅앱 개발 by Socket.io - Github 링크
- 회사 서비스 관련 기술 공부하며 작성한 블로그 글 : [WebRTC] 공부
- 수습 발표
Virnect
- 클라우드용 서비스 프론트엔드 개발
- 새로운 워크 플로우 제안 - https://www.notion.so/Workflow-9208a770012643c5b404376927d313e2
- vardaccio 를 이용한 private npm registry 구축.
- vardaccio를 활용하여 기능 모듈, UI 컴포넌트 공유
- storybook을 개발 명세서로 활용.
- Notion에 프론트엔드 개발자 가이드라인 작성. 작업자들간 공유할 컨벤션, 작업방식을 문서화 함.
새로운 Workflow 설계
- 직접 작성한 노션 글 : Workflow 설계 👈 읽어주시면 감사하겠습니다 🙏
- 문제상황 : SI 작업들을 담당 작업자들이 각자 개발함. 공통된 부분들을 공유하지 않아 비효율성이 발생.
- 해결 방법 : Scaffolding 모듈과 컴포넌트 공유 Workflow를 설계 함.
- UI 컴포넌트 & 기능모듈 공유 : Vardaccio
- UI 컴포넌트 명세서 : Storybook
- 상세 스토리
SI 작업들을 담당 작업자들이 각자 개발함. 공통된 부분들을 공유하지 않아 비효율성이 나타남. 이 문제를 해결하기 위해 새로운 Workflow 아이디어 제시. 데모서비스를 만들어서 구성원들에게 시연함.
- 시연 : 데모용 Storybook
- 발표 내용 : VirnectStorybookTest README 페이지 참고
- 처음엔 Storybook을 UI 명세서 역할로, bit을 도입하여 컴포넌트 공유를 하려고함. Notion 정리 내용 참고
- 하지만 기능 모듈(ex - ID, Password form validate)을 공유하기엔 부적합하다고 생각하여 구축형 Private NPM Registry Verdaccio로 모든 모듈들(UI 컴포넌트 & 기능 모듈)을 관리하고 prefix name space로 관리하는 것으로 설계함.
- Notion 내용 참고
- 구축형 Private NPM Registry인 Verdaccio를 통해 별도의 비용없이 사내 개발서버에 Verdaccio를 구축하여 코드를 사내망에서만 관리할 수 있게 아이디어를 제시.
- 전동료에게 문의해보니 2021년 현재 실제 아키텍처에 반영됐다고 함. 🎉🎉
- 시연 : 데모용 Storybook
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로 데이터 값과 엮어서 가져옴.
- 지도의 zoom이 10개 정도의 시군구만 보여줄때만 시군구를 볼 수 있도록 제한함.
개인프로젝트
-
연예인 사진 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)
- 응모 기능
-
인터렉티브 신용카드 결제 폼
-
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
-
Data Lab
- 서비스 주소 : https://seunghyum.github.io/data-visualization
- 토이 프로젝트
- 진행기간 : 2019년~(진행중)
- 주요내용 : 공공데이터를 활용하여 이전에 활용했던 기술들을 아카이빙.
- 본인이 공헌한 점 : 풀스택
- 사용한 Skill : D3.js, GeoJson, Image Sprite
- 관련 내용 : SGIS에서 받은 지도데이터(.shp)를 geojson으로 변경하는 작업
- 깃헙 주소 : https://github.com/Seunghyum/data-visualization
-
블로그 이력서 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 졸업예정