미리보기
기본 정보
사용자와 개발자 모두의 경험에 대해 고민하고 개선하는 것을 좋아합니다. 말할 줄 아는 개발자가 되어 커뮤니티에 기여하는 것이 목표입니다.
자기소개
React를 주로 사용해서 개발하는 프론트엔드 개발자입니다.
개발 경험과 예측 가능한 UX 구현을 중요하게 생각하고, 의견에 대한 근거를 제시할 수 있도록 항상 노력하고 있습니다.
프론트엔드에 가장 큰 가치를 두고 있지만 MongoDB와 Postgre, NestJS를 사용한 프로젝트에 대한 개발 경험이 있어 다른 분야의 동료들과 더 쉬운 소통을 할 수 있는 개발자가 되고자 합니다.
기술 스택
경력
(주)휴먼스케이프
Software Engineer • MX div
개요
희귀질환 환자들을 위한 모바일 앱 레어노트의 웹 및 백오피스 기능 개발 [레어노트 웹 페이지]
사용 기술
React, Next.js, Jotai, Postgre, NestJS
상세
1시간 가량이 걸리던 배포 과정을 4분대로 단축하여 개발 및 QA 프로세스를 개선
웹을 통한 회원가입 및 로그인, 콘텐츠 열람 기능 등의 전반적인 기능 구현
이미지 및 렌더링 성능 개선을 통해 LCP 시간 50% 이상 단축
SEO를 위한 사이트 구조 개선 및 사이트맵 구성
모바일 앱 5.0 업데이트에 맞춰 새로운 기능에 대한 백오피스 및 서버 개발
Django로 되어 있던 커뮤니티 서버를 NestJS 서버로 마이그레이션 및 통합
Amplitude, 구글 검색 콘솔을 활용하여 유저 데이터 수집 및 개선 방향 도출에 기여
(10개월 | 정규직)
(주)휴먼스케이프
Software Engineer • MX div
개요
- 임상 연구 데이터를 관리하기 위한 eCRF 솔루션 레어데이터의 FE 및 어드민 기능 개발 [소개 페이지]
사용 기술
- React, Emotion, TanStack Query, Jotai, Stroybook
상세
- 연구 데이터를 보고 편집하는 스프레드시트 뷰를 리팩토링하여 렌더링 시간 80% 단축
- 사용자의 생산성 향상을 위해 Tab, Enter 등 키 입력에 대한 동작의 일관성 개선 제안 및 작업
- Storybook을 활용한 사내 디자인 시스템 구축에 기여
- Sentry를 사용한 에러 모니터링을 개선하여 오류 상황 파악 및 재현이 가능하도록 개선
(1년 4개월 | 정규직)
모바일앱개발협동조합
인턴 • 개발팀
개요
- IT 서비스의 컨설팅이나 개발 외주를 진행하는 기업에서 학점연계 인턴십을 경험
- 여행을 기획하고 공유할 수 있는 모바일 웹앱 트립플랜의 고도화 프로젝트에 참여
사용 기술
- PHP CodeIgniter, MySQL
상세
- 카카오 지도 API 위에 그려지는 여행 순서 UI 개선
- 일정 순서를 드래그 & 드롭으로 조절할 수 있도록 변경
- 비개발자인 고객사 대표에게 작업 중 제한사항이나 UX 문제를 설명하며 직접 소통하였음
(3개월 | 인턴)
프로젝트
개인
Numble OpenAI 단톡방
개요
- 단기 프로젝트 챌린지를 진행하는 넘블에서 진행한 프로젝트
- OpenAI API를 활용하여 최대 4명의 ai와 대화하는 단톡방을 구현
사용 기술
Yarn, Typescript, Storybook, Next.js, Emotion
상세
- 자주 사용되는 Input, Modal 등의 컴포넌트를 공용으로 구현 및 Storybook으로 문서화
- OpenAI에게 시스템 메시지로 상황을 인지시키고 최대 4명까지의 대화 상황을 재현
- 요청 후 응답을 받기까지의 로딩 과정을 UI로 보여주어 사용자에게 인지시킴
- 30명이 참가한 챌린지의 TOP 3 안에 선정되어 호스트에게 리뷰를 받음
링크
- GitHub Repo : https://github.com/prayinforrain/numble-talk
- 배포 URL : https://numble-talk.vercel.app/
- 넘블 : https://www.numble.it/
스터디 그룹
CDS(Cold Design System)
개요
- 디자인 시스템에 대한 학습 목적으로 직접 디자인 시스템을 구현
- 설계, 구현부터 npm 패키지 배포까지의 과정을 경험
사용 기술
Yarn, Vite, Typescript, Storybook, React, Emotion
상세
- 팀원간의 활발한 코드 리뷰를 통해 코드 일관성 유지 및 더 나은 설계를 위해 노력
- '내가 사용한다면 어떻게 사용하고 싶은지'를 생각하며 DX(개발자 경험)를 고려하였음
- 접근성을 고려한 설계로 스크린리더 등의 접근성 도구로도 쉽게 사용 가능
- RadioButton, Dropdown 컴포넌트를 직접 개발
- npm 패키지로 배포 및 릴리즈
□ 링크
- GitHub Repo : https://github.com/c-h-w-h/cds
네이버 부스트캠프 웹 · 모바일 7기
모헤윰 mo:heyum - 마크다운 SNS
개요
- 자유로운 주제와 형태로 자신의 생각을 공유하는 SNS
- 마크다운 문법을 통해 간단한 서식을 적용할 수 있음
- 글과 댓글(쓰레드) 작성, 팔로우, 멘션 등 보편적인 SNS에서 제공하는 기능들을 포함
사용 기술
Yarn Berry, TypeScript, Next.js, React, Emotion, Recoil
상세
- 외부 라이브러리 사용 없이 마크다운 에디터를 구현
- contenteditable div를 기반으로 붙여넣기 및 커서 동작을 직접 제어
- 정규표현식과 pipe 함수로 GFM(GitHub Flavored Markdown) 스펙에 맞추어 마크다운 서식을 적용
- Next.js를 이용한 렌더링 성능 개선
- next/image 컴포넌트 사용, 웹폰트 로딩 개선, 일부 페이지 SSR 적용 등
- Lighthouse 성능 점수를 93점에서 100점으로 향상
- Toast 메시지 컴포넌트를 구현
링크
- GitHub Repo : https://github.com/boostcampwm-2022/web34-moheyum
- Blog Posts : https://prayinforrain.github.io/tags/moheyum/
대외활동
스터디 그룹
부각코!(boogako!) - 차가운 스터디
- 40명 규모의 스터디 모임 운영에 참여
- 각자 공부하고 있는 것, 정보 등을 공유하여 서로가 서로의 레퍼런스가 되고 동기부여하기 위한 모임
- 공유 노션과 개더타운을 이용하여 스터디와 컨퍼런스 등의 활동을 진행
- 프론트엔드 개발자 6명이 모여 하고 싶은 주제를 컨텐츠로 공부하는
차가운 스터디
의 팀장으로 CDS 프로젝트에 참여
2023
네이버 커넥트재단
부스트캠프 웹・모바일 7기 웹 풀스택 챌린지・멤버십 과정
- JavaScript 기반으로 풀스택 프로젝트를 진행하며 학습 및 정보공유를 진행
- SPA, Canvas, React 등 여러 개념과 기술에 대한 학습
- 기술공유, 페어 프로그래밍 등의 커뮤니케이션 경험
- 학습 스프린트를 거쳐 팀을 구성하여
모헤윰
을 개발하며 협업을 경험
2022
교육
서울과학기술대학교
대학교(학사) | 컴퓨터공학과
2015.03. ~ 2022.02.
졸업
자격증
정보처리기사
취득 | 한국산업인력공단
2022.06.