Contract
Introduce
Next.js, React를 주로 사용하는 프론트엔드 개발자입니다.
현재 업무는 프로젝트 초기의 구조 설계 및 공용 컴포넌트 개발, 디자이너와 협업하여 컴포넌트 설계 및 페이지 개발, 필요에 따른 간단한 api작성 등 프론트엔드 전반을 담당 하고있습니다.
이전 회사에서는 vue를 이용한 프론트엔드 프레임워크 설계를 주도하였으며 공통 모듈 등의 설계및 개발을 진행해왔으며, 구축 후 추가적으로 들어오는 요구사항을 받아 설계/구현 후 개발자의 보다 빠른 프레임워크 개발을 위한 모든 예시페이지, 도큐먼트를 작성을 수행하였습니다.
개인적인 개발로는 불편함을 해결하는 것을 주로 개발에 녹여내고 있습니다. 매일 확인하는 환율, 즐겨보는 웹툰 사이트의 없는 기능, 각 사이트의 특가정보를 모아보는 사이트, 재난정보 알림을 푸시알람으로 작성하는 등 직접 손으로 구현 및 배포 및 사용 중입니다.
프론트에 국한하지 않고 백엔드도 같이 즐기고 있습니다. 최근에는 Honojs를 이용한 백엔드 서버를 구축하고 있으며, 이를 이용한 재난경보를 푸시 알람으로 전송시켜주는BeAlertpwa앱을 작성하는 등 재미있게 개발을 이어나가고 있습니다.
Experiences
Nextjs
TypeScript
Tailwindcss
Radix-UI
React-Query
HyperDX
Tiptap
Framer-Motion
- 공통 레이아웃 작성 및 페이지 제작
- 재사용을 위해 모달, 버튼, 아코디언 등 공통 컴포넌트 설계 및 작성
- 유지보수 속도 향상을 위해 프로젝트 아키텍쳐 변환(FSD) 및 Storybook 도입
- 서버사이드의 에러 추적을 위한 HyperDX 도입
- 대규모 라이브를 위한 Z사 화상 회의 서비스 연동
- 어드민페이지 사용자 요청에 의해 Tiptap 플러그인을 제작하여 notion-like 에디터 구현 및 적용
B2B그룹 사용자를 위한
홈페이지 개발 및 유지보수
2024. 11 ~ 2024. 12Reactjs
vite
TypeScript
Radix-UI
React-Query
Tailwindcss
- 동시성 및 효율적인 트래픽 관리를 위하여 react-query도입
- Radix-UI를 통한 공통 컴포넌트 설계 및 구현
- 관리를 위한 어드민 페이지 / 운영자 페이지 작성
Reactjs
vite
TypeScript
Tailwindcss
SWR
CodeMirror
- MVP단계의 코드 알고리즘 테스트 사이트 구현
- 효율적인 캐싱을 위하여 시범적으로 SWR도입 및 사용
- 웹 IDE 구현을 위하여 code mirror도입
- 코드 관리를 위하여 어드민 페이지 작성 및 구현
Nextjs
TypeScript
Tailwindcss
Prisma
Sqlite
shadcn/ui
- 프로젝트 구조, 공통 레이아웃 설계 및 작성
- 지원서 페이지를위한 어드민 페이지 설계 및 작성
- Prisma + Sqlite를 이용한 api 설계 및 작성
Nextjs
TypeScript
Tailwindcss
shadcn/ui
ReactPlayer
Tanstack-Table/Query
Storybook
- 한정적 시간에 따라 빠른 개발을 위한 shadcn도입
- 프로젝트 구조, 공통 레이아웃 설계 및 작성
- ReactPlayer를 이용한 플레이어 설계 및 작성
- Tanstack table을 이용하여 범용 테이블 컴포넌트 설계 및 작성
- 일부 컴포넌트 예시를 위한 Storybook 작성
- 공통 Fetching API함수 설계 및 작성
Vue3
Typescript
Spring Boot
Fabric.js
Vitepress
chart.js
express
vite
Node mailer
MyBatis
Ant Design
- 공통 함수 로직 최적화 및 로드시간 단축(약 2배)을 위한 프레임워크단 함수 리펙터링
- 날짜, 드롭박스, 세부검색 모달 등이 포함된 검색조건 동적 생성 모듈 리펙터링
- 웹소켓을 이용한 전역 모듈 구현 및 쪽지, 알람 구현
- 폼, 그리드, 차트, 웹소켓, 메일링 등 개발자가 바로 사용가능한 샘플 작성
- PDF to Image 모듈 작성, CMS형 게시판 설계 및 구현
- fabric.js를 이용한 이미지 수정/저장 기능 모듈 설계 및 도면관리 모듈 구현
- express + vue를 활용하여 모듈 난독화 + 데모 파일 배포 페이지 설계/구현
- vitepress를 이용한 공통함수 분류 및 각 함수별 설명, 사용법 도큐먼트 작성
자사 프레임워크 구축 및
넥사크로 vue3 전환 작업
2023.04 ~ 2023.09Vue3
Typescript
Spring Boot
Vite
Ant Design
MyBatis
- Vue3/Typescript/Spring boot를 사용하여 이하의 모듈 설계 및 구현
- 화면 탭 구현
- 사용자 관련 기능 ( 로그인, 즐겨찾기, 메뉴 검색 )
- 검색조건 동적 생성
- 사용 중인 그리드의 함수 사용 간소화
- 서버사이드 라우팅, 서버사이드 i18n
- 엑셀 파일 관련 기능(읽기/업로드 등) 등
MyBatis
Oracle
MariaDB
Spring Boot
- 기존 오라클 기준 문법으로 작성된 Mapper를 ANSI 표준 SQL문으로 변환
쿠팡 운영관리/세일즈
솔루션 유지보수
2023.02 ~ 2024.01Vue2
Spring Boot
MyBatis
Ant Design
- Vue2 + Spring boot로 작성된 프로젝트의 유지보수 및 기능 추가
- 브레이브리 디폴트 II(스위치/스팀), XLOG(CMS)
- 니어 리[인]카네이션, FFBE WOTV
- 디지몬 리얼라이즈, 소드아트 온라인 엘리시제이션
- 악마성 그리모어오브 소울즈 등
- FFBE
- FFBE WOTV
Side Projects
- 개인 블로그
- 개인 블로그 사이트
Nextjs
TypeScript
Drizzle
AWS Cognito
- 재난경보 Push Notification 앱
- BeAlert 사이트
Nextjs
FastAPI
TypeScript
PWA
- 네이버 웹툰 페이지 북마크 앱
- 네이버 웹툭 북마커 크롬스토어 페이지
React
TypeScript
Bun
- 크롤링을 통한 환율 모니터 앱
- https://github.com/B-HS/Burrency
Electron
React
Honojs
Vite
TypeScript
- 핫딜 종합 크롤링 사이트
- BCrawler 사이트
Nextjs
Prisma
TypeScript
- 자주 쓰이는 기술들을 모아둔 템플릿 사이트
- 템플릿 사이트
Nextjs
TypeScript
- 뱃지 아이콘 이미지 생성 사이트
- BIcon 사이트
Nextjs
TypeScript
- B2B에서 자주 쓰이는 템플릿 작성
- https://github.com/B-HS/B_CMS
vue3
Spring Boot
TypeScript
Skills
- 거쳐온 기술들 및 숙련도 순으로 나열됩니다Frontend
Typescript | Javascript
Nextjs
Vuejs
SvelteKit
Reactjs
Bun
Electron
Backend
Typescript
Java
Hono
Express
Spring Boot
Nestjs
Drizzle
Prisma
MyBatis
JPA
TypeORM
Database
MariaDB
MySQL
SQLite
Oracle
DevOps
AWS Lightsail
Cloudflare R2 / Page
RHEL9 (Rocky Linux 9)
Ubuntu
Nginx
Docker
Wireguard
Github Actions
AWS Cognito
Education / etc.
- 마산대학교 관광일본어
- 夢乃井 인턴쉽
- 6th 동아시아 농업유산 학회 현장견학 KR - JP 통역
- 부산 동성 직업 전문학교 풀스택 과정