채용공고 올리기

한동룡님을 응원해보세요!

이직/구직 중이에요

미리보기

기본 정보

이름
한동룡
직업
프론트엔드 개발자
간단 소개

- 작업에 대해서 투명하게 공유하는 것을 좋아하고 문서화를 통해 기록하는 것을 중요시합니다 - 사용자의 경험을 중요시 하며 UI/UX와 DX에 대해서 이야기하고 개선해 나가는 것을 좋아합니다 - 문제에 대해서 함께 이야기하고 해결해나가는 과정을 좋아합니다 - 배운내용을 공유하여 함께 성장하는 것을 좋아해서 블로그를 운영하고있습니다

기술 스택

기술 스택

JavaScript, HTML/CSS, React, TypeScript, Next.js, Gatsby, zustand, react-query

경력

회사명

피에로컴퍼니

직급 | 부서 | 근무 유형

Frontend Developer | 프로덕트 | 재직 중

근무 기간

2023.10. ~ 재직 중 (1년 3개월)

담당 업무

폰고는 리퍼비시 기기들을 렌탈하는 서비스를 제공하고 있습니다
장고 기반에서 프론트엔드와 백엔드 분리를 주도로 개발하고 있습니다.

시작 단계에서 부터 참여하여 기획/디자인에 참여하여 의견을 제시하여 유저에 좋은 경험을 줄 수 있도록 기여하였습니다.

전반적인 프론트작업 뿐만이 아니라 백엔드, 이슈 문서화, 슬랙 알림 봇등을 만들어 팀원들에게 도움이 되고 함께 성장하고 협업 가능한 환경을 만들기 위해 노력했습니다.

프로젝트

프로젝트명

프론트엔드 리빌딩

소속/기관명

피에로컴퍼니

프로젝트 기간

2023.11. ~ 진행 중

프로젝트 내용

장고로 되어있는 서비스를 리액트를 기반으로 마이그레이션 작업을 진행합니다.

프론트는 혼자서 주도적으로 모든 환경을 구축하였습니다.

프론트, 백엔드, 데브옵스 모두 작업을 진행하고 주력으로는 프론트엔드를 개발하였습니다.

사용 기술
TypeScript React Nextjs styled-components zustand Pandacss Tanstack-query jest react-testing-library Django Python EKS argoCD helm

프론트 로드맵 수립

  • 단기전략

    • 장고 템플릿 기반 서비스를 리액트로 전환하는 단계적 전환 주도

      • 미납 관리,마이 페이지를 시작으로 핵심 페이지 마이그레이션 완료

    • 부분적으로 빠르게 적용하여 유지보수성,성능, 즉각적인 UX 개선

  • 장기전략

    • 새로운 프로젝트로 NextJS로 전환하여 장고 환경 분리와 서비스 개선

    • 어드민 시스템 개선

    • 모노레포를 통해 통합적으로 서비스/패키지 관리

서버 문제 개선

  • API 설계 주도로 불필요한 API 30% 감소, 프론트 로직 간소화

  • 기존 API 문제점 발견하여 문서화 후 해결 방안 PR과 작업내용 공유

  • 팀원들이 겪고있는 문제에 대한 현재의 문제점, 해결방안, 앞으로 방향 문서화 공유

  • 신용인증 시 필요한 정보를 계속해서 API마다 프론트에서 보내고 있던 부분을 보안 향상을 위해 1개의 API로 통합하여 작업할 수 있도록 개선 제안

  • 장고에서 리액트 파일을 서빙하기 위해 CI/CD 작업 중 Docker Image에서 빌드된 리액트 정적 파일을 S3에 업로드 될 수 있도록 자동화

디자인 시스템 개발

  • aria태그와 키보드 지원하여 접근성 향상

  • overlay되는 요소들의 위계 정의하여 시각적 및 사용성 향상

  • PR에 코멘트를 트리거하여 원하는 시점에만 스토리북 s3에 배포

  • Slot를 이용하여 컴포넌트의 기능과 디자인을 다른 컴포넌트로 삽입하여 재사용성 극대화

  • Tab 컴포넌트 value, onValueChange를 통해 외부에서 컨트롤 할 수 있도록 기능 확장

  • 기존 컴포넌트를 직접 개발 부담을 줄이기 위해 headless 기반 UI를 바탕으로 마이그레이션 재구성 예정

FSD 아키텍처 적용

  • FSD아키텍처를 적용하여 모듈화와 유지보수성을 강화하고, 기능 단위로 독립적인 개발 환경 제공

  • 아키텍처를 표준화하여 가독성 향상

모노레포 환경 구성

  • pnpm-workspace를 이용한 모노레포 환경 구축

  • pnpm-filter와 jq를 이용하여 변경된 패키지를 추출하고 연관된 서비스만 추출하여 matrix로 병렬적으로 빌드 하여 배포

    • 서비스별 Dockerfile 생성하여 빌드 이후 ECR에 업로드

  • 개별적 배포와, 변경된 모든 서비스 배포 github workflow 제작

  • EKS환경에서 ArgoCD workflow를 작성하여 배포자동화

  • EKS환경에서 ArgoCD PR generator를 이용하여 PR에 달린 서비스명 태그 preview 기능 제작

SEO 최적화

  • SPA환경에서 react-helmet, prerender.io 서비스를 이용하여 임시적으로 적용하고 서비스에 크롤러 접근 시 prerender.io로 향하게 하여 동적으로 변경된 값을 얻을 수 있게 적용하였습니다.

코드 리팩토링 재사용성 향상

  • 추가 기능으로 인한 중복 코드를 제거하고, 동일한 동작을 하는 부분을 컴포넌트로 분리하여 재사용성을 높였습니다. 추가 작업은 props로 전달받아 실행하는 구조로 변경하여 확장성을 확보하였습니다.

  • 확장성을 고려한 컴포넌트 기반 아키텍처 설계 중복된 기능에 쉽게 추가할 수 있도록 컴포넌트 기반의 구조를 설계하고 개발하여 유지보수성과 확장성을 향상시켰습니다.

  • 보안을 위한 쿼리 파라미터 암호화 적용 특정 값을 쿼리 파라미터로 받아 동작하도록 변경하였으며, 쿼리 파라미터의 변경 가능성에 따른 보안 이슈를 해결하기 위해 암호화를 적용하였습니다.

문서화 작업

  • 프론트엔드 구조, 툴, 컨벤션, 이슈 내용, 백로그 등 문서화하여
    작업 내용을 쉽게 추적하고 접근할 수 있으며 서비스에 대해 파악하기 쉽도록 개선

  • 로컬에서 github workflow 테스트하는 방법 문서화 하여 공유

  • 특정 기능에 대한 시퀀스 다이어 그램 등을 작성하여 기능에 대한 전체적인 흐름을 파악할 수 있도록 노력

  • EKS 환경으로 넘어가면서 EKS를 적용하는데 같이 사용한 helm, argoCD k8s에 대해서 간단한 설명과 프론트엔드 배포/preview 환경 설명 문서 작성

스타일링 라이브러리 선정

Nextjs App router를 대응하기 위하여 기존 styled-components대체하기 위해 tailwindcss stylex vanila-extract pandacss 중 PoC를 진행하여 기존 DX를 사용할 수 있고 디자인 토큰, 확장 가능한 기능들의 장점으로 pandacss 선정 적용 후 평균 번들 크기 8% 감소

서비스 개선

  • UI/UX 개선을 위해 기존 서비스에서 불필요한 부분과 필요한 기능에 대해 의견을 피력하여 개선하였습니다

    • 페이지로만 계속해서 넘겨지는 부분들을 바텀시트나 모달을 통해서 페이지 이동없이 한 곳에서 동작할 수 있도록 변경하였습니다.

    • 너무 많은 설명과 단계로 인한 유저의 피로감을 고려하여 상세한 설명과 체크후 이동 최소화하였습니다.

    • 인터렉션이나 마우스 호버 이벤트등이 없어 유저가 느끼는 사용감이 부족할 수 있기에 반응성 추가 작업을 하였습니다.

  • AWS 최적화를 진행하였습니다

    • 기존 AWS S3 비용이 많이 청구되어 CDN 적용을 통해 비용 최적화와 로딩 속도를 높였습니다.

프로젝트명

마이 페이지 개선

소속/기관명

피에로컴퍼니

프로젝트 기간

2024.07. ~ 2024.08.

프로젝트 내용

기존 마이페이지를 리액트로 변경하며 제공되지 않던 기능들을 파악하고 제공될 수 있도록 수정과 유저의 사용성을 향상 시키기위한 작업입니다

사용기술

Django Python Typescript React Pandacss Vite html2pdf

마이페이지 개선

  • 결제 방식에 따라 결제 정보가 보이지 않는 경우가 있어 변경을 권장하도록 유도와 변경 시스템 구축

  • 유저가 계약서를 다운로드 할 수 있도록 기능 제공

  • 마이페이지에서 유저가 확인해야할 렌탈 정보, 미납 정보, 결제 정보 제공

계약서 템플릿

  • html2pdf 라이브러리를 이용하여 템플릿을 다운로드 할 수 있도록 하였습니다.

  • useImperativeHandle를 이용하여 서명 추출, pdf다운로드 매서드를 제공하여 계약서 서명과, 계약서 조회에서 사용할 수 있도록 기능 제공하였습니다

프로젝트명

미납 관리 프로젝트

소속/기관명

피에로컴퍼니

프로젝트 기간

2024.07. ~ 2024.07.

프로젝트 내용

미납을 하고 계시는 분들이 많아 미납의 현황을 볼 수 있으며 고객이 직접 원하는 미납금액을 납부할 수 있는 기능 제공하자고 제안하여 시작한 프로젝트입니다.

고객은 렌탈한 상품에 대한 미납금의 상태를 볼 수 있고 미납금을 분할/일시 납부할 수 있는 기능을 제공합니다.

사용 기술

Django, React, Vite, Pandacss, Axios

장고 사용

  • 미납 관리 페이지를 리액트로 빌드하고 장고에서 서빙하도록 하여 개발기간 단축

  • 미납금 수취율 0% -> 26% 증가

  • 장고에서 정적 파일 서빙을 위한 vite 설정과 장고 collectstatic 정적 파일 배포 자동화

페이플 링크 결제 확인 시스템

  • 결제 시스템 플로우 설계

  • hook으로 분리하여 결제 상태, 링크생성 매서드 제공하여 재사용성 향상

  • 팝업을 띄어 결제를 하는 방식인데 모바일 팝업 차단으로 인하여 팝업을 비동기로 실행하여 모바일 환경 대응

쿠키 에러

  • www, non-www 모두 서비스 접근이 가능하고 로그인 세션 쿠키의 도메인은 접속한 도메인에 따라 발급되어 생기는 이슈 문서화 후 해결방안 공유

  • AWS ALB 수정하여 모두 non-www 연결되도록 수정

프로젝트명

FIgma Plugin

소속/기관명

피에로컴퍼니

프로젝트 기간

2023.11. ~ 2023.11.

프로젝트 내용

React에서 아이콘을 사용하기 위해 svg 컴포넌트를 아이콘이 추가 될 때 마다 작성해주어야해서 자동화를 하기 위해 figma plugin을 만들게 되었습니다.

사용 기술
Figma API Github API

  • Figma Public Plugin 배포 현재까지 사용 인원 2700

  • 아이콘 생성 작업 시간 단축

  • 아이콘의 관리 측면과 커질수록 JSON 파일 크기 증가로 추후엔 라이브러리나 시스템 개선이 필요

포트폴리오

URL

link

github

깃허브
link

linkedin

링크드인
link

개인 기술 블로그

URL 링크

교육

소속/기관명

우아한 테크코스

종류 | 전공

사설 교육 | 프리코스

재학 기간 | 재학 상태

2022.11. ~ 2022.12. | 졸업

소속/기관명

엘리스

종류 | 전공

사설 교육 | 엘리스AI트랙

재학 기간 | 재학 상태

2022.06. ~ 2022.12. | 졸업

소속/기관명

오산대학교

종류 | 전공

대학교(전문학사) | 자동차과

재학 기간 | 재학 상태

2017.02. ~ 2020.12. | 졸업

댓글