미리보기
기본 정보
효율적이고 창의적인 문제 해결에 강점이 있는 프론트엔드 개발자, 공형규입니다.
기술 스택
React, TypeScript, express.js, Next.js, MySQL, HTML/CSS, storybook, Python, Git
경력
pxd
사원 | XE Group | 재직 중
2022.03. ~ 재직 중 (2년 8개월)
역할: 풀스택 개발자 (프론트엔드 70%, 백엔드 30%)
주요 성과
WEMIX Championship: SEO 가이드 및 meta tag parser 개발. Front-End PL로 백엔드, 기획, 디자인 팀과 협업. Lighthouse를 활용하여 페이지 로드 속도 20% 개선.
약관 Parser 개발: 다국어 JSON 파일 파싱 및 마크업 자동화로 기존 4~8시간 걸리던 작업을 1시간 내로 단축.
사내 통합 로그인 시스템: SSO 개발로 로그인 중복 개발 방지.
차트 개발:
amCharts를 활용한 다양한 차트 개발.사내 개발 프로세스 개선: 코드 컨벤션과 코드 리뷰 문화 구축 주도.
교육
한국방송통신대학교
대학교(학사) | 컴퓨터과학
2022.09. ~ 현재 | 재학 중
SSAFY
사설 교육 | 개발
2021.01. ~ 2021.12. | 졸업
가톨릭대학교
대학교(학사) | 신학
2013.03. ~ 2020.02. | 졸업
프로젝트
사내 인트라 구축
pxd
2024.03. ~ 진행 중
프로젝트 내용: 사내 주간보고 및 휴가 신청, 유저 관리 등의 인트라 구축
구성 인원: 백엔드 3명, 프론트엔드 7명
기여도: 백엔드 30%
기술 스택: Nest.js, MySQL, Prisma, Next.js, Lerna
주요 작업
전자 결재 api
어드민 유저 관리 api
사내 통합 로그인 시스템
pxd
2023.10. ~ 2024.06.
프로젝트 내용: 다양한 사내 서비스에 이용될 SSO 개발
구성 인원: 풀스택 1명
기여도: 100%
기술 스택: Node.js, express.js, mySql, Redis, Docker, React, React-Query, styled-components
개발 동기: 사내에 회의실 예약, 블록체인 월렛, 업무 보고 시스템 등의 내부 서비스가 여럿 생기면서 계정 관련 중앙 관리 및 중복 개발을 피하기 위해 SSO(Single Sign On)을 개발
주요 작업
회원 생성 및, 정보 수정, 로그인 등을 위한 api
rollup을 활용한 로그인 시스템 공통 모듈 npm 라이브러리
로그인 전용 도메인을 위한 로그인 사이트
사내 칭찬 서비스 개발
pxd
2024.01. ~ 2024.05.
프로젝트 내용: 블록체인 기술을 활용한 사내 칭찬 서비스 개발
구성 인원: 풀스택 1명, 프론트엔드 1명
기여도: 백엔드(firebase) 100%, 스마트 컨트랙트 100%, 프론트엔드 30%
기술 스택: React, Solidity, Hardhat, Firebase
주요 작업
ERC-20 표준을 준수하는 사내 칭찬 토큰
Firebase 활용을 위한 함수 전반
칭찬 전송에 따른 실시간 알림
사내 칭찬 시스템 클라이언트
manifest를 활용한 PWA
NILE
pxd
2022.10. ~ 2024.03.
프로젝트 내용: 위OOO 사의 NFT 판매 서비스 구축 및 운영
구성 인원: UI 개발 9명
기여도: UI 개발 20%
기술 스택: Next.js, Typescript, amCharts5, Sass, swiper.js, Classnames, Ant Design
서비스 링크: https://www.nile.io/
주요 작업
NFTFI: 스왑 현황 차트를 공식을 활용하여 svg를 반환하는 재사용 가능 함수로 구현
Tokens 페이지: 스택 차트, 간소화 등락 차트, 페이지 UI 전반
Tokens Detail 페이지: 가격/유동량/거래량 차트, 페이지 UI 전반
DAO: 모집 전 시간 flip clock UI
WEMIX Championship
pxd
2023.03. ~ 2024.02.
프로젝트 내용: 위OOO 사의 WEMIX Championship 골프 대회 운영 사이트
구성 인원: 프론트엔드 3명
기여도: 프론트엔드 60%, 이후 운영 100%
기술 스택: Next.js, React Query, Storybook, Sass, Classnames
주요 작업
사내 SEO 가이드 및 meta tag parser 개발
이전에 회사에서는 외주 개발 위주로 업무가 진행되었지만, 현재는 1년 넘게 위메이드의 위믹스 관련 프로젝트를 진행하고 있습니다. 이처럼 인하우스 개발로 전환과정에서 SEO에 대한 관리가 요구되었고 이에 대하여 SEO를 처음 접하는 사람들도 이해할 수 있게끔 설명 문서를 작성하였으며 노션 템플릿을 활용하여 각 프로젝트에 적용할 수 있는 체크 리스트를 만들었습니다.
또한 각종
meta태그를 쉽게<head>에 삽입할 수 있도록 유틸리티 함수 및 컴포넌트를 작성하였습니다. 함수는 객체를 전달받아 키(title, description, og 관련)를 기준으로 meta를 작성하여 반환해 줍니다.서비스 PL 경험
서비스 초기 개발 이후 Front-End PL을 맡게 되었습니다. 이를 통해 Back-End, 기획, 디자인 팀과 직접 소통하며 서비스 개발에 대해 논의 할 수 있었습니다. 또한 엔드 포인트를 경험하며 책임감을 기를 수 있었습니다.
또한 당시 3개의 프로젝트에 동시 소속되어 있었습니다. 동시다발적으로 각 슬랙 채널에서 태그되어 날아오는 메세지에 처음에는 정신이 없었습니다. 하지만 점차 각 요청에 대해 우선순위를 고려하여 예상 완료 시점을 전달하는 법을 배웠습니다. 이를 통해 업무 스케줄링 능력을 성장시킬 수 있었습니다.
WEMIX 브랜드 사이트
pxd
2022.06. ~ 2023.04.
프로젝트 내용: 위OOO 사의 WEMIX 서비스 브랜드 사이트
구성 인원: UI 개발 3명
기여도: UI 개발 30%, 이후 운영 90%
기술 스택: Next.js, Classnames, Sass
주요 작업 - 약관 parser 개발
문제 상황
1년간 위믹스 서비스의 약관을 담당하며 마크업 구조에 익숙해졌습니다. 하지만 한 약관에 수정이 있을 때마다 날짜에 따라 변경된 부분을 분기 처리하거나 새로운 약관이 있으면 동일한 스타일의 마크업을 다시 진행해야 하는 번거로움이 있었습니다. 또한
i18n으로 다국어 처리를 하며 국문과 영문 서로 다른 부분에도 분기 처리를 해놓아야 했습니다. 날짜가 계속 추가됨에 따라 유지보수는 어려워졌고 코드는 난잡해져 갔습니다. 또한 약관 자체의 볼륨이 커, 단순 마크업임에도 불필요하게 많은 공수가 들어갔습니다.해결 방안
이에 대해 저는 다국어 JSON 파일의 키값의 형식을 맞춰 파싱하는 방법을 떠올렸습니다. 이를 위해 우선 약관에는 일련의 규칙성이 있음을 파악하였습니다. 점 스타일의 리스트, 숫자 리스트, 글자 리스트 등과 제목이 있는 텍스트 문단, 표 영역에 대해 알맞은 키값을 배정하고 이를 읽어 마크업을 만들 수 있도록 구현하였습니다.
또한 마크업의 안정성, 중첩된 각 약관의 요소에 대한 들여쓰기나 헤딩 태그 사용에 대한 확장성을 위해 DFS를 활용하였습니다. 알고리즘이 실개발에 좋은 영향을 끼친다고 믿었던 저에게는 뜻깊은 경험이었습니다. 이를 통해 JSON 작성자는 보다 직관적으로 약관 문서를 생성할 수 있게 되었습니다.
이러한 작업을 통해 기존 신규 약관 작업에 4~8시간 소요되던 작업을 1시간 내로 끝낼 수 있도록 효율화시켰습니다.
OO 저축 은행 리뉴얼
pxd
2022.03. ~ 2022.06.
프로젝트 내용: OO 저축 은행 리뉴얼 퍼블리싱
구성 인원: 퍼블리싱 6명
기여도: 퍼블리싱 20%
기술 스택: HTML5, CSS3, gulp.js, swiper.js
서비스 링크: https://www.hanasavings.com/
느낀점
개발자로서 처음으로 현업을 경험한 프로젝트였습니다. 현업의 워크 플로우를 볼 수 있었던 경험이었습니다. 같은 퍼블리싱 그룹 내에서 같은 코드 베이스 안에서 작업하며 소통하는 법, 기획/디자인 팀과 소통하는 법 등을 배울 수 있는 시간이었습니다.
무엇보다도 웹 표준과 웹 접근성에 대해 많이 배울 수 있었습니다. 이전에는, 그리고 프로젝트 투입 초반까지 보이는 대로 만드는 데에 급급했습니다. 처음 올린 풀 리퀘스트에는 고쳐야 할 점이 정말 많다는 듯 무수히 많은 코멘트가 달려있었습니다. 하지만 선임분들께서 어떻게, 그리고 왜 고쳐야 하는지에 대해 친절하게 가르쳐 주셨습니다. 이러한 가르침 속에서 금방 풀 리퀘스트의 코멘트는 점점 줄어들었고 메인 페이지의 검색창과 금융상품 스와이퍼 등의 UI를 맡으며 더욱 성장할 수 있었습니다. 또한 HTML 표준을 W3C의 https://validator.w3.org/ 에서 파일 하나하나 검사하는 것보다 여러 파일을 한 번에 처리하고 싶어 electron.js로 HTML 마크업 유효성 검사기를 구현하기도 하며 즐겁게 웹 표준에 대해 알아갔습니다.
