육기준
사람들의 불편함을 해결하기 위해 노력하는 FE 엔지니어입니다.
사용자의 불편함을 해결하는 것을 핵심 가치로 두고 있습니다.
더 나은 경험을 제공하기 위해 끊임없이 고민하고 개선합니다.
새로운 기술과 피드백을 열린 자세로 받아들이며, 지속적인 학습을 통해 시야를 넓힙니다.
또한 다른 사람들과 함께 지식을 공유하고 받아들이는 것을 선호합니다.
이러한 노력과 꾸준함이 저와 동료들의 성장에 도움이 될 수 있다고 믿습니다.
프로젝트
개요
대덕소프트마이스터고등학교 학생을 위한 이력서 관리 플랫폼입니다.
학생들을 위한 간단한 이력서 작성 기능, 선생님들을 위한 피드백 및 자동 변환 기능을 제공하며, 변환된 레주메북은 온라인 뷰어를 통해 기업들에게 제공됩니다.
작성 기간동안 120+명의 학생들의 이력서를 관리하였습니다.
기술 스택
- React - 컴포넌트 아키텍처로 유지보수성과 재사용성을 높이기 위해 선택
- Yarn Workspace - 설정 파일 및 디자인 시스템의 손쉬운 관리를 위해 선택
- React Hook Form - 입력 렌더링 최적화 및 유지보수의 용이성을 위해 선택
- Tanstack-Query & Axios - 낙관적 업 데이트, 콜백 관리 등을 위해 선택
- React-PDF & jsPDF - 간편한 PDF 렌더링 및 다운로드 기능을 위해 선택
기여
- 작성, 미리보기를 포함한 학생 서비스 개발
- React-hook-form 라이브러리 도입
- useState 기반으로 Props Drilling이 발생하던 입력 코드 리팩토링 실제 코드 →
- Yarn Workspaces 기반 모노레포 설계 및 구현
- Yarn Berry 기반의 중앙 node_modules 폴더 생성
- Tanstack-Query 라이브러리 도입
- QueryClient 기반의 낙관적 업데이트를 통해 사용자 경험 향상
트러블슈팅
미리보기 PDF 다운로드시 Javascript 동작 멈춤
- 원인: base64 형태의 이미지를 PDF에 추가하는 jsPDF 라이브러리의 코드가 메인 스레드의 호출 스택을 오래 점유하여 변환하는 동안 쌓인 함수들의 실행이 지연되는 문제 발생
- 해결 방법: jsPDF의 PDF 변환 코드를 스레드에서 동작하는 Web Worker로 옮기고, 메시지를 통해 blob 형태로 변환된 PDF 파일을 받는 식으로 수정하여 해결.
- 배운 점: Web Worker의 개념과 동작 방식, Blob 개념, 메인 스레드가 실제로 오래 점유될 경우에 어떤 일이 발생하는지에 대해 배울 수 있었음.
특정 운영체제에서의 PDF 화질 저하
- 원인: 현재 사용중인 React-PDF의 DPI 값은 72 고정인데, Windows와 Linux에서는 기본 96 DPI를 사용하기 때문에 운영체제의 DPI에 맞추기 위해 PDF가 뭉개져서 표시되는 문제 발생.
- 해결 방법: PDF Canvas의 Scale 값을 3으로 고정한 상황에서, CSS의 Transform Scale 옵션을 통해 크기를 원래대로 돌리면서 내부 픽셀을 압축하여 DPI를 강제로 올리는 방식으로 해결.
- 배운 점: 운영체제의 화면 표시 방식에 따라 페이지의 내용물이 다를 수 있다는 점과, 픽셀 압축에 대해서 배울 수 있었음.
개요
통계 기능이 부실한 Velog를 위한 게시물 통계 대시보드 서비스입니다.
간편 통계 조회 기능을 제공하고 있으며, 추후 통계 리더보드와 비교, 타 블로그 서비스와의 연동을 준비할 계획입니다.
현재 200+명의 유저들이 서비스를 사용하고 있으며, 20000+개의 게시물의 통계를 관리하고 있습니다.
또한, 프로젝트 초기부터 배포까지의 회고록을 매주 작성하였습니다.
기술 스택
- NextJS - SEO 설정의 용이성, SSR을 통한 사용성 강화 등을 위해 선택
- Google Analytics & Sentry - 서비스 사용량 모니터링 및 버그의 빠른 탐지를 위해 선택
- Jest - 터미널 내부에서 돌아가는 테스트이며, NodeJS 백엔드와의 통합 테스트를 위해 선택
- MSW - 반복된 Fetch 모킹을 줄이고, 재활용하기 용이한 모킹 API를 만들기 위해 선택
- Tanstack-Query & Fetch - Axios보다 커스텀이 쉬우며, NextJS과의 연동을 위해 선택
- React-ChartJS-2 - 오래된 만큼 거대한 커뮤니티와 안정성의 보장을 위해 선택
기여
- React 기반 확장 프로그램 개발
- 채널톡 도입
- 사용자의 제보를 통한 빠른 버그, 배포 주기 문제 수집
- 다른 사용자가 경험하기 전 문제 해결 가능
- Sentry 및 Google Analytics 도입
- 사용자의 제보를 통한 빠른 버그, 배포 주기 문제 수집
- 다른 사용자가 경험하기 전 문제 해결 가능
트러블슈팅
계정 변경 시, 새로고침하면 사라지는 이전 계정의 데이터 표시
- 원인: NextJS의 Full-Route Cache 외에도 클라이언트에서 동작하는 RSC Router Cache가 있는데, 해당 캐시를 제거하지 않아 새로고침시 사라지는 이전 데이터가 표시됨
- 해결 방법: NextJS의 서버 액션을 통해 revalidatePath 실행 후, redirect를 통해 로그인페이지로 이동시켜 해결
- 배운 점: NextJS의 캐시 구조에 대해 배울 수 있었으며, 공식 문서를 더 세세하게 읽어보는 계기가 되었음
활동 및 자격
TOEIC 785점
외국인과 일상 수준의 대화가 가능하며, 영어 문서를 적절히 이해합니다.
정보처리기능사
기본적인 컴퓨터 지식을 이해하고 있으며, 병역특례시 활용할 수 있습니다.
마이스터고 교내 해커톤
정치에 무관심하거나, 정보가 부족한 사람들을 위한 정치 SNS 플랫폼인 YEOYA(여야) 서비스를 제작하였습니다.
디자인과 프론트엔드 개발에 일부 참여하였으며, 우수상(3위) 를 수상했습니다.
꾸준함을 만들기 위해, 매일 코딩 테스트 연습 문제들을 풀고 있습니다.
1월부터 꾸준히 진행하고 있으며, 새로운 자료구조나 알고리즘을 학습하면 TIL에 정리하였습니다.
기술 스택
🟦 Typescript
- Tanstack-Query에서 Typescript를 통한 Type-Safe 서버 데이터 관리 경험이 있습니다.
- Mapped Type, Utility Type, Generic과 같은 특수 타입을 이해하고 있으며, 응용할 수 있습니다.
- Generic Type을 사용하여 코드의 확장성을 높인 경험이 있습니다.
- Utility Type을 이용하여 인터페이스의 재활용성을 높인 경험이 있습니다.
🖥️ ReactJS
- Zustand와 Context API를 통한 전역 상태관리를 사용할 수 있습니다.
- Axios, Tanstack-Query를 통해 Rest 규칙을 준수하며 API를 사용한 경험이 있습니다.
- React-Hook-Form, Zod를 통해 안정적인 유효성 검증 시스템을 구현한 경험이 있습니다.
💻 NextJS
- Hydration 및 Tanstack-query를 통해 Prefetch를 제공하는 SSR 환경을 구축한 경험이 있습니다.
- Middleware, Page/App router 등 NextJS 고유의 기능들을 이해하고 있습니다.
- 리디렉션 CORS 문제 해결을 위해 커스텀 서버를 제작한 경험이 있습니다.
🐙 Git & GitHub
🍿 Other Stacks
- MonoRepo
- 모노레포와 멀티레포의 차이점을 이해하고 있습니다.
- Yarn Workspaces 기반 모노레포 환경에서의 개발 경험이 있습니다.