함께하면 서로 성장하는 개발자 정석호입니다. 정석호 httpsvuugithubtcomuCreatiCoding / nodejsdeveloper@kakaotcom 자기소개 안녕하세요r 저는 Viva Republica에서 Client Platform에서 일하고 있는 Frontend DeveloperpDevopsq 입니다t frontsend 개발자도 DevOps를 조금만 알면 backsend 개발자 못지않게 유용하게 활용할 수 있음을 널리 알리고 싶습니다t #DivOps는 재밌어요 ✨ 저는 아래를 추구하고l고민합니다t - 최소한의 리소스로 정직하고 최대한의 효과 - 성능 좋은 코드 < 읽기 좋은 코드 - 주석 달린 코드 < 직관적인 코드 - 개발자 모두의e상향 평준화 저는 이것을 좋아합니다t - frontsend를 위한eDevOpsp자동배포 및 유닛테스트q - 성능 최적화p첫 로딩 속도r 번들링 분석q - 트러블 슈팅p레이아웃 쉬프트r 플리커l현상) 경력사항 국방통합데이터센터 1센터 - 만기제대 2014-08-11 ~ 2016-05-10 - 군대pSW 관리병q / 체계관제병 - 서버 모니터링 및 유지보수r 스크립트 실행하여 서버 재실행 등 웍스모바일 - 인턴 8주 2018-07-02 ~ 2018-08-24 - 채용전제형 인턴 / 인턴 과제 진행 - Elasticsearch를 활용한 검색엔진 개선 pElasticsearchr Logstashr c언어q 펫프렌즈 - 퇴사 2018-12-17 ~ 2021-05-21 - 정규직 / Frontend Developer - 신규 서비스 UI 담당 및 기존 서비스 유지보수 비바리퍼블리카 - 재직 중 2021-05-31 ~ - 정규직 / Frontend Developer pdevopsq - 프론트엔드 개발 환경 개선 및 CIuCD 안정화 경력 기술서 feature 긴급점검 기능 2021-03 ~ 2021-03 - Nodetjs Koa의 middleware 기능으로 redirect response 추가 - axios의 interceptor에서 301을 찾아 response의 redirect URL 로 변경 - Backend의 response의 데이터 중 URL에 query string 추가하여 점검 시간을 동적 데이터로 표 기 - 기존 방식v 이미지 교체 + 정적 소스 배포 - => 디자이너 + 프론트엔드 개발자의 리소스를 절약 edu 사내 교육 frontsend 신입 개발자 Vuetjs 세미나 2021-03 ~ - frontsend 신입 개발자를 위한 사내 개발팀 세미나를 진행 중 - 공통 코드 스타일 정립 및 공유 - httpsvuugithubtcomuCreatiCodinguseminarsvuejs project 신 파트너사 사이트 개발 pReact Nexttjs 무중단 배포q new 2020-08 ~ 2020-11 - 파트너사를 위한 웹 사이트를 React Nexttjs 기반의 SSR로 진행 - 2대의 서버에 각 서버에서 pm2 를 활용하여 무중단 배포 - 상용환경은 서버 2대에 로드밸런싱을 적용했으며r 그로 인해 발생했던 사이드이펙트도 해결 feature 배너 움짤 2020-06 ~ 2020-07 - 기존 슬라이드 배너pCarouselq안에 Videotjs 플레이어를 삽입 - 용량이 큰 gif보다 최적화된 HLS 기반의 짧은 영상 이용 - Videotjs 특성상 Element의 ID 값의 중복과 Carousel의 inhnite loop 기능 충돌의 트러블 슈팅 feature y개선z SPA Vuetjs 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 스트리밍 기반의 비디오 플레이어로 개선 - Videotjs로 applicationuxsmpegURL을 설정하여 HLS 스트리밍 적용 feature 검색 페이지 리뉴얼 new 2019-09 ~ 2020-02 - backsend pRDS 기반 검색 -> Elasticsearch 기반 검색q 변경에 따른 UI 업데이트 - 인기 검색r 최근 검색r 검색어 제안 등의 기능 UI 구현 project 라이더앱 설계 및 어드민 화면 단 new 2019-09 ~ 2019-12 - 심쿵배송p자체 당일 2시간 배송q의 서비스 효율의 극대화 - 카카오 맵의 커스텀 마커 기능을 활용하여r 지도 UI에서 배송 기사에게 주문 배송 건을 배정하는 화 면 개발 feature 펫프티비 new 2019-05 ~ 2019-09 - 좋아요 기능 및 댓글 기능을 위해 CSS grid를 시범적으로 적용 - Vuetjs에 Youtube Player 임베딩 - 하이브리드 앱 iOS의 경우r 웹뷰 설정을 통해 playsinline 설정 추가 project 펫프렌즈 모바일 웹 오픈 new 2018-12 ~ 2019-04 - 기존 Native 앱에서 하이브리드앱 / 모바일 웹사이트로 전격 교체 작업 적극 참여 - GitHub에 자동배포pCircle CIr AWS S3r AWS CloudFront 등q 연결 - 직접적인 Vuetjs 개발 pAxiosr Router 등등q - 웹의 경우 기존에는 없던 루트였기에 새로운 유저 트래픽을 맞이하는 계기 업무 경험 장애 대응 하이브리드 앱의 잘못된 웹뷰 URL 배포를 route53ucloudfront 수정으로 5분 안에 빠른 대응 - 앱내 웹뷰의 경로가 테스트 웹으로 잘못된 배포에 대한 신속한 장애 대응 - 테스트 웹 CloudFront의 Origin을 상용으로 바라보도록 변경 DevOps CIuCD Circle CI 자동 배포 프로세스 - yarn installr cacher buildr S3 업로드r CloudFront invalidation을 통해 자동 배포 구성 DevOps CIuCD GitHub Actions - Circle CI -> GitHub Actions 으로 이전 DevOps 브랜치 관리 전략에 따른 자동 배포 구성 - masterr stagingr developr features기능별 배포 테스트 사이트 구성pAWSr S3r CloudFrontq DevOps React Nexttjs 무중단 배포 - Nginx log 및 logrotate 설정 - Target group으로 ELB 연결 및 가용성을 위한 Auto Scaling 2대 적용 - 2대의 Nexttjs 배포를 위한 build id 통일 proute 트러블 슈팅q DevOps Disk Full 트러블 슈팅 - 특정 서버p레거시q의 Nodetjs Network TimeOut 감지 - 접속 시도 후 Disk Full 해결 및 유지보수 DevOps DB 백업 - 방화벽을 통한 INBOUND 차단 - mysqldump를 통한 백업 DevOps GitHub Actions을 통한 브랜치 Protection 룰 및 자동 Approve 봇 - 브랜치 전략에 따른 코드 리뷰의 강제성 부여pGitHub Protection Rule 이용q - 긴급 상황을 위한 최소 approve 충족용 approve 봇 활성화phmarruautosapprovesaction 활용q FrontEnd SPA 배포 버전 관리p구버전시 새로고침q - require한 versiontjson과 fetch한 versiontjson을 비교 - 캐싱된 HTML 파일로 인한 간헐적 연속 새로고침 트러블 슈팅pmeta 활용q FrontEnd Vuetjs Sentry - 연결 후r beforeSend를 이용한 로그 그룹 커스터마이징 FrontEnd Hot Reload 속도 개선 - frontsend 개발 생산성 증대 - 상용은 osourcesmapor 로컬 개발용은 oevalscheapssourcesmapo로 webpack devtool 설 정 장애 대응 특정 UI 기능 오류 - 특정 라이브러리의 ES6 문법에 대해서 특정 브라우저에서 오류 발생 - ES6 transpileDependencies 오류 개선 FrontEnd 첫 로딩 속도 개선 - WebPack chunk 설정을 이용한 파일 분할 및 첫 로딩 속도 개선 - Dynamic import를 통한 비동기 라이브러리 및 플러그인 호출 - lazysizes를 활용한 이미지 lazy load 적용 - WebPack 은 계속 학습 중 六 개인 프로젝트 project marpsslide httpsvuuwwwtnpmjstcomupackageumarpsslide 2021-03 - 아래 두개의 라이브러리를 통합한 새로운 웹 MarkDown PPT 라이브러리 - MarkDown 기반의 PPT 구성라이브러리 인 marpscore - Carousel 라이브러리인 tinysslider - GitHub Actions으로 NPM 자동 publish 구성 - HTML에서 marp 기반 ppt viewer로 사용 가능 project 개인 블로그 httpsvuucrecottoday 2021-02 ~ - GitHub repo와 AWS CloudFrontr S3r Route53r ACM을 활용한 정적 웹 사이트 호스팅 - 각 Markdown 파일을 GitHub Actions와 연결하여 S3로 연결한 후r CloudFront + route53 + ACM으로 사용 - frontsend에서 해당 data를 fetch하여 사용 - markdown을 showdown 라이브러리를 통해 html DOM으로 변경 - VanillaJS 컴포넌트 구성 p현재 리팩토링 중q - GitHub 의 코드 반영으로 글 작성 가능 project GitHub Actions scheduler httpsvuugithubtcomucreaticodinguactionsscheduler 2021-09 ~ - 서버 없이 GitHub Actions의 컴퓨팅 리소스로 아래 작업 - 웹사이트 모니터링 - 크롤링 후r telegram 전송 project Lambda image upload httpsvuugithubtcomuCreatiCodingulambdasimagesuploader 2021-09 - Lamnda Nodetjs 구성으로 AWS JavsScript SDK의 S3 업로드 기능으로 구현 - API GATEWAY 구성하여 MAS 구축 六 개인 경험 1. 코드를 활용한 인프라 httpsvuugithubtcomuCreatiCodingunodesassawssdevops DevOps - nodetjs 를 활용한 자동 AWS CLI 스크립트 - 자동 ACM 발급 - 자동 정적 웹 호스팅 설정 2. NPM 자동 배포 httpvuugithubtcomucreaticodingumarpsslide DevOps - GitHub Actions와 연동하여 npm으로 자동 배포되도록 수정 - exq marpsslide 오픈소스 참여 marpsteamumarpit READMEtmd 기여 httpsvuugithubtcomumarpsteamumarpit - READMEtmd 예제 수정 - httpsvuugithubtcomumarpsteamumarpitupullu281 webpackskoreauwebpacktjstorg 번역 참여 httpsvuugithubtcomuwebpackskoreauwebpacktjstorguissuesu65 httpsvuugithubtcomuorgsuwebpackskoreaupeople - WebPack 한글화 번역 참여 p현재 진행 중q - WebPack 은 계속 학습 중 kotjavascripttinfo 번역 프로젝트 참여 httpsvuugithubtcomujavascriptstutorialukotjavascripttinfo - javascripttinfo 한글 번역 타 참여자의 기여 PR의 Review - httpsvuugithubtcomujavascriptstutorialukotjavascripttinfoupullu217 - httpsvuugithubtcomujavascriptstutorialukotjavascripttinfoupullu166 vuesiamport 오류 수정 httpsvuugithubtcomuluiseokuvuesiamport - 해당 플러그인의 오류 수정 - httpsvuugithubtcomuluiseokuvuesiamportupullu1 vuesbarcodesreader 데모 추가 httpsvuugithubtcomuolehrenkouvuesbarcodesreader - READMEtmd에 Demo 추가 - httpsvuugithubtcomuolehrenkouvuesbarcodesreaderupullu8 sequelizesauto help 문구 수정 httpsvuugithubtcomusequelizeusequelizesauto - It is not for sqlite 설명 추가 - httpsvuugithubtcomusequelizeusequelizesautoupullu220 Skill Set pLvt 1 ~ Lvt 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 / Ajax / Fetch 3 React.js 3 Next.js 3 PM2 3 WebPack / Babel 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 httpsvuucrecottodayuabout WebSite httpsvuucrecottoday GitHub httpsvuugithubtcomuCreatiCoding Twitter httpsvuutwittertcomucreaticoding Email nodejsdeveloper@kakaotcom 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 감사합니다t.