함께하면 서로 성장하는 개발자 정석호입니다.

 정석호

httpsgithubcomCreatiCoding / nodejsdeveloper@kakaocom

자기소개

안녕하세요 저는 Viva Republica에서 Client Platform에서 일하고 있는 Frontend DeveloperDevops 입니다

frontend 개발자도 DevOps를 조금만 알면 backend 개발자 못지않게 유용하게 활용할 수 있음을 널리 알리고 싶습니다

#DivOps는 재밌어요 ✨

저는 아래를 추구하고고민합니다

- 최소한의 리소스로 정직하고 최대한의 효과

- 성능 좋은 코드 < 읽기 좋은 코드

- 주석 달린 코드 < 직관적인 코드

- 개발자 모두의상향 평준화

저는 이것을 좋아합니다

- frontend를 위한DevOps자동배포 및 유닛테스트

- 성능 최적화첫 로딩 속도 번들링 분석

- 트러블 슈팅레이아웃 쉬프트 플리커현상)

 경력사항 국방통합데이터센터 1센터 - 만기제대 2014-08-11 ~ 2016-05-10 - 군대SW 관리병 / 체계관제병 - 서버 모니터링 및 유지보수 스크립트 실행하여 서버 재실행 등

웍스모바일 - 인턴 8주 2018-07-02 ~ 2018-08-24 - 채용전제형 인턴 / 인턴 과제 진행 - Elasticsearch를 활용한 검색엔진 개선 Elasticsearch Logstash c언어

펫프렌즈 - 퇴사 2018-12-17 ~ 2021-05-21 - 정규직 / Frontend Developer - 신규 서비스 UI 담당 및 기존 서비스 유지보수

비바리퍼블리카 - 재직 중 2021-05-31 ~ - 정규직 / Frontend Developer devops - 프론트엔드 개발 환경 개선 및 CICD 안정화

 경력 기술서

feature 긴급점검 기능

2021-03 ~ 2021-03 - Nodejs Koa의 middleware 기능으로 redirect response 추가 - axios의 interceptor에서 301을 찾아 response의 redirect URL 로 변경 - Backend의 response의 데이터 중 URL에 query string 추가하여 점검 시간을 동적 데이터로 표 기 - 기존 방식 이미지 교체 + 정적 소스 배포 - => 디자이너 + 프론트엔드 개발자의 리소스를 절약

edu 사내 교육 frontend 신입 개발자 Vuejs 세미나

2021-03 ~ - frontend 신입 개발자를 위한 사내 개발팀 세미나를 진행 중 - 공통 코드 스타일 정립 및 공유 - httpsgithubcomCreatiCodingseminarvuejs

project 신 파트너사 사이트 개발 React Nextjs 무중단 배포 new 2020-08 ~ 2020-11 - 파트너사를 위한 웹 사이트를 React Nextjs 기반의 SSR로 진행 - 2대의 서버에 각 서버에서 pm2 를 활용하여 무중단 배포 - 상용환경은 서버 2대에 로드밸런싱을 적용했으며 그로 인해 발생했던 사이드이펙트도 해결

feature 배너 움짤

2020-06 ~ 2020-07 - 기존 슬라이드 배너Carousel안에 Videojs 플레이어를 삽입 - 용량이 큰 gif보다 최적화된 HLS 기반의 짧은 영상 이용 - Videojs 특성상 Element의 ID 값의 중복과 Carousel의 innite loop 기능 충돌의 트러블 슈팅

feature 개선 SPA Vuejs Hash 제거

2020-05 ~ 2020-07 - Vue Router의 Hash mode를 History mode로 변경 - 마케팅 툴의 자유로운 도입을 위해 안정적인 라우팅으로 개선 - AWS CloudFront의 Custom Error Page를 활용

feature 펫프티비 2.0 new

2020-02 ~ 2020-06 - Youtube 기반의 플레이어로부터 HLS 스트리밍 기반의 비디오 플레이어로 개선 - Videojs로 applicationxmpegURL을 설정하여 HLS 스트리밍 적용

feature 검색 페이지 리뉴얼 new

2019-09 ~ 2020-02 - backend RDS 기반 검색 -> Elasticsearch 기반 검색 변경에 따른 UI 업데이트 - 인기 검색 최근 검색 검색어 제안 등의 기능 UI 구현

project 라이더앱 설계 및 어드민 화면 단 new

2019-09 ~ 2019-12 - 심쿵배송자체 당일 2시간 배송의 서비스 효율의 극대화 - 카카오 맵의 커스텀 마커 기능을 활용하여 지도 UI에서 배송 기사에게 주문 배송 건을 배정하는 화 면 개발

feature 펫프티비 new

2019-05 ~ 2019-09 - 좋아요 기능 및 댓글 기능을 위해 CSS grid를 시범적으로 적용 - Vuejs에 Youtube Player 임베딩 - 하이브리드 앱 iOS의 경우 웹뷰 설정을 통해 playsinline 설정 추가 project 펫프렌즈 모바일 웹 오픈 new

2018-12 ~ 2019-04 - 기존 Native 앱에서 하이브리드앱 / 모바일 웹사이트로 전격 교체 작업 적극 참여 - GitHub에 자동배포Circle CI AWS S3 AWS CloudFront 등 연결 - 직접적인 Vuejs 개발 Axios Router 등등 - 웹의 경우 기존에는 없던 루트였기에 새로운 유저 트래픽을 맞이하는 계기

 업무 경험

장애 대응 하이브리드 앱의 잘못된 웹뷰 URL 배포를 route53cloudfront 수정으로 5분 안에 빠른 대응

- 앱내 웹뷰의 경로가 테스트 웹으로 잘못된 배포에 대한 신속한 장애 대응

- 테스트 웹 CloudFront의 Origin을 상용으로 바라보도록 변경

DevOps CICD Circle CI 자동 배포 프로세스

- yarn install cache build S3 업로드 CloudFront invalidation을 통해 자동 배포 구성

DevOps CICD GitHub Actions

- Circle CI -> GitHub Actions 으로 이전

DevOps 브랜치 관리 전략에 따른 자동 배포 구성

- master staging develop feature기능별 배포 테스트 사이트 구성AWS S3 CloudFront

DevOps React Nextjs 무중단 배포

- Nginx log 및 logrotate 설정

- Target group으로 ELB 연결 및 가용성을 위한 Auto Scaling 2대 적용

- 2대의 Nextjs 배포를 위한 build id 통일 route 트러블 슈팅

DevOps Disk Full 트러블 슈팅

- 특정 서버레거시의 Nodejs Network TimeOut 감지 - 접속 시도 후 Disk Full 해결 및 유지보수

DevOps DB 백업

- 방화벽을 통한 INBOUND 차단

- mysqldump를 통한 백업

DevOps GitHub Actions을 통한 브랜치 Protection 룰 및 자동 Approve 봇

- 브랜치 전략에 따른 코드 리뷰의 강제성 부여GitHub Protection Rule 이용

- 긴급 상황을 위한 최소 approve 충족용 approve 봇 활성화hmarrautoapproveaction 활용

FrontEnd SPA 배포 버전 관리구버전시 새로고침

- require한 versionjson과 fetch한 versionjson을 비교

- 캐싱된 HTML 파일로 인한 간헐적 연속 새로고침 트러블 슈팅meta 활용

FrontEnd Vuejs Sentry

- 연결 후 beforeSend를 이용한 로그 그룹 커스터마이징

FrontEnd Hot Reload 속도 개선

- frontend 개발 생산성 증대

- 상용은 sourcemap 로컬 개발용은 evalcheapsourcemap로 devtool 설 정

장애 대응 특정 UI 기능 오류

- 특정 라이브러리의 ES6 문법에 대해서 특정 브라우저에서 오류 발생

- ES6 transpileDependencies 오류 개선

FrontEnd 첫 로딩 속도 개선

- WebPack chunk 설정을 이용한 파일 분할 및 첫 로딩 속도 개선

- Dynamic import를 통한 비동기 라이브러리 및 플러그인 호출 - lazysizes를 활용한 이미지 lazy load 적용

- WebPack 은 계속 학습 중

六  개인 프로젝트

project marpslide

httpswwwnpmjscompackagemarpslide

2021-03 - 아래 두개의 라이브러리를 통합한 새로운 웹 MarkDown PPT 라이브러리 - MarkDown 기반의 PPT 구성라이브러리 인 marpcore - Carousel 라이브러리인 tinyslider - GitHub Actions으로 자동 publish 구성 - HTML에서 marp 기반 ppt viewer로 사용 가능

project 개인 블로그

httpscrecotoday

2021-02 ~ - GitHub repo와 AWS CloudFront S3 Route53 ACM을 활용한 정적 웹 사이트 호스팅 - 각 Markdown 파일을 GitHub Actions와 연결하여 S3로 연결한 후 CloudFront + route53 + ACM으로 사용 - frontend에서 해당 data를 fetch하여 사용 - markdown을 showdown 라이브러리를 통해 DOM으로 변경 - VanillaJS 컴포넌트 구성 현재 리팩토링 중 - GitHub 의 코드 반영으로 글 작성 가능

project GitHub Actions scheduler

httpsgithubcomcreaticodingactionscheduler

2021-09 ~ - 서버 없이 GitHub Actions의 컴퓨팅 리소스로 아래 작업 - 웹사이트 모니터링 - 크롤링 후 telegram 전송

project Lambda image upload

httpsgithubcomCreatiCodinglambdaimageuploader 2021-09 - Lamnda Nodejs 구성으로 AWS JavsScript SDK의 S3 업로드 기능으로 구현 - API GATEWAY 구성하여 MAS 구축

六  개인 경험

1. 코드를 활용한 인프라

httpsgithubcomCreatiCodingnodeasawsdevops

DevOps - nodejs 를 활용한 자동 AWS CLI 스크립트 - 자동 ACM 발급 - 자동 정적 웹 호스팅 설정

2. NPM 자동 배포

httpgithubcomcreaticodingmarpslide

DevOps - GitHub Actions와 연동하여 npm으로 자동 배포되도록 수정 - ex marpslide

오픈소스 참여 marpteammarpit READMEmd 기여

httpsgithubcommarpteammarpit

- READMEmd 예제 수정

- httpsgithubcommarpteammarpitpull281 webpackkoreawebpackjsorg 번역 참여

httpsgithubcomwebpackkoreawebpackjsorgissues65 httpsgithubcomorgswebpackkoreapeople

- WebPack 한글화 번역 참여 현재 진행 중

- WebPack 은 계속 학습 중 koinfo 번역 프로젝트 참여

httpsgithubcomjavascripttutorialkojavascriptinfo

- javascriptinfo 한글 번역 타 참여자의 기여 PR의 Review

- httpsgithubcomjavascripttutorialkojavascriptinfopull217

- httpsgithubcomjavascripttutorialkojavascriptinfopull166 vueiamport 오류 수정

httpsgithubcomluiseokvueiamport

- 해당 플러그인의 오류 수정

- httpsgithubcomluiseokvueiamportpull1 vuebarcodereader 데모 추가

httpsgithubcomolerenkovuebarcodereader

- READMEmd에 Demo 추가

- httpsgithubcomolerenkovuebarcodereaderpull8 sequelizeauto help 문구 수정

httpsgithubcomsequelizesequelizeauto

- It is not for sqlite 설명 추가

- httpsgithubcomsequelizesequelizeautopull220

 Skill Set Lv 1 ~ Lv 5)

4 HTML 4 CSS(SCSS) 4 JavaScript(ES6) 4 Vue.js 4 Git / GitHub 4 Nginx 4 AWS EC2 4 AWS AMI 4 AWS ACM 4 AWS S3 4 AWS CloudFront 3 Axios / / Fetch 3 React.js 3 Next.js 3 PM2 3 WebPack / 3 Node.js 3 MySQL 3 Docker 3 Docker Compose 3 AWS IAM 3 AWS CodeDeploy 2 Cypress / Jest 2 AWS Lambda 2 AWS API GateWay 2 AWS SNS 1 TypeScript  Contact

Resume httpscrecotodayabout

WebSite httpscrecotoday

GitHub httpsgithubcomCreatiCoding

Twitter httpstwittercomcreaticoding

Email nodejsdeveloper@kakaocom

Mobile 010-5189-7852

 학력사항

광운대학교 - 컴퓨터공학과 ( 3.36 / 4.50 ) - 졸업 2012-03 ~ 2019-02

배문고등학교 - 졸업 2009-03 ~ 2012-02

 자격사항

OCJP - 2014-04-14 취득

정보처리기사 - 2018-05-28 취득 Last Updated

06/27/21 18:56:33

감사합니다