박건민

ahsxkc@gmail.com

안녕하세요, 박건민 입니다.

저는 Vue와 TypeScript를 주로 사용하는 프론트엔드 개발자입니다.

UI의 통일성을 유지하고 반복적인 코딩을 최소화하는 것을 중요하게 생각하며, 효율적이고 재사용 가능한 컴포넌트를 만드는 것을 즐깁니다.

제가 작성한 코드가 다른 이들에게 부끄럽지 않게, 그리고 자랑스럽게 '내가 이걸 만들었다'라고 말할 수 있는 개발자가 되기 위해 항상 노력하고 있습니다.

Job

다이아랩

2022-05 ~ 2024-01

Project

상담 관리 통합 기능 구축 프로젝트

2024-07 ~ 2024-08

이미 제작된 페이지를 CSS를 통한 단순 디자인 퍼블리싱 작업과 신규 페이지 작업인 줄 알았으나, 코드를 살펴보고 미팅 후 전체 컴포넌트 설계, 재구축으로 작업 내용 변경 및 신규 페이지 작업을 진행함

주요 작업

Veutify 기반으로 Base Component를 설계 및 구축하여 약 6-70 페이지 분량의 View 작업

사용 기술

Vue, Vite, Pinia

작업 내용

  • Base Component 약 30여종 이상 제작
  • 하나의 Compoenent가 너무 많은 기능을 가지면 안된다 생각하여 작은 기능만을 가지게 만든 후, 사용성을 높이기 위해 Base Component를 묶어주는 Wrapper Component 또한 10여종 제작하여 사용성 증대
  • 여러 작업자가 기준을 지키지 않고 작업하여 복잡하던 Node를 전부 Base Component로 리팩토링 작업하여 통일성 확보
  • 하나의 파일에 너무 많은 코드가 존재한다면 가독성이 떨어진다 생각하여 각 페이지는 크게 Header와 Contents 두가지의 컴포넌트를 분류하는 기준을 잡고 제작
  • 기존 사이트, PPT 설계도의 UI 규칙이 없어 통일성이 떨어져 담당자와 많은 미팅을 통해 신규 규칙을 만든 후 규칙에 기반하여 페이지 작업
  • 다크모드 작업

PPT PLUS PROJECT

2023-09 ~ 2024-01

DB와 연결하여 데이터가 변동되면 파워포인트에 바인딩 되어있는 데이터를 업데이트 하는 C++로 제작된 파워포인트 플러그인의 상용화 MVP 목적 프로젝트. 웹 페이지는 Web Office365처럼 PowerPoint에서 보이는 모습과 동일하게 랜더링, 데이터 세팅, DB 설정 및 결제를 담당함

주요 작업

웹 페이지 전체 레이아웃 설계, 디자인 및 전체 페이지 개발 및 JAVA로 되어있는 백엔드 코드를 NodeJS로 옮기는 작업 수행

사용 기술

Vue, Vite, Pinia, TypeScript

작업 내용

  • 전체 레이아웃 설계 및 디자인
  • Vuetify 프레임워크를 사용하여 전체적인 UI 통일
  • 전반적 커스텀 컴포넌트 제작
  • Tiptap 기반 커스텀 텍스트에디터 제작
  • 캔버스 라이브러리인 KonvaJs로 파워포인트와 최대한 동일한 도형을 웹 페이지에서 렌더링하기 위해 추상 팩토리 패턴을 사용한 컴포넌트 작업
  • Redis의 pub/sub 기능을 이용해 Web socket으로 데이터를 받아 렌더링 된 도형의 데이터 (색상, 글씨, 차트 데이터 등) 동적으로 변경 작업
  • Oauth 2.0 로그인 구현
  • Toss Payment 결제 연동 테스트
  • 다크모드 작업

메인 페이지 레이아웃 피그마 작업 샘플

Websocket을 사용하여 데이터 받아오는 샘플

현대 엘리베이터 MIRI SERVICE

2022.10 ~ 2023-06

어드민, 영업사원, 엔지니어, 건물 관리자, 입주민 5개의 레벨로 분류하여 각 레벨마다 권한을 다르게 가지고 있고, 권한과 계약에 따라 자신에 속한 엘리베이터를 필터링한 전반적인 조회 및 관리, 신고 기능 등이 포함된 현대 엘리베이터 통합 유지관리 시스템 구축 프로젝트

주요 작업

웹 전체 페이지 개발

사용 기술

Vue, Vite, Pinia

작업 내용

  • 윈도우 10, 1920 해상도 크롬 브라우저 기준으로한 웹 페이지 개발
  • Vuetify 프레임워크를 사용하여 전체적인 UI 통일
  • 전반적 커스텀 컴포넌트 제작
  • Tabulator 기반 커스텀 테이블 컴포넌트 제작
  • Jodit 기반 커스텀 텍스트에디터 컴포넌트 제작
  • 레벨과 주소를 기반으로 데이터를 개인화하여 조회
  • 카카오 지도 API로 메인 대시보드 페이지 작업
  • 위젯 페이지 작업
  • 관리자 페이지 작업
  • 각각의 주소지에 존재하는 엘리베이터 부품 수명 상세 조회를 위한 트리 컴포넌트 제작
  • 데이터를 통한 보고서 자동 생성, jsPDF를 통한 PDF 다운로드 기능
  • 테이블 기반의 조회 페이지 엑셀 import, export 기능
  • 다크모드 작업
  • I18n을 통한 현지화 작업

출처 Hyundai Elevatorㅣ당신의 엘리베이터에 스마트워치를 채우다!

출처 미리 카탈로그

OwlBlog

2023-02 ~

개인 블로그 구축 목표

주요 작업

NuxtJs를 통한 SSR 웹페이지 구축, NestJs로 백엔드 구축 및 AWS EC2로 DB서버 배포, AWS S3로 이미지 서버 구축, Vercel로 프론트와 백엔드 배포

사용 기술

NuxtJs, NestJs, Pinia, TypeScript

작업 내용

  • NuxtJs를 통한 SSR 웹페이지 구축
  • Tailwind CSS를 기반으로 UI 개발
  • NestJS의 TypeORM 사용하여 백엔드 구축
  • Maria DB 구축 및 AWS EC2를 통해 배포
  • Vercel을 통한 서버 배포
  • SEO 작업