JM's Portfolio
background
profile

안녕하세요! 더 편리한 웹 서비스를 만들기 위해 고민하는 개발자 이정민입니다. 사용자 경험을 개선하고, 꾸준히 성장하는 개발자가 되고자 합니다.

ABOUT ME

이름
이정민
생년월일
1990.10.03
연락처
010-4998-8965
이메일
whljm1003@gmail.com
깃허브
https://github.com/whljm1003
블로그
https://velog.io/@whljm1003

SKILLS

Language
JavaScript
TypeScript
Frontend
Next.js (React)
Zustand
React-Query
React-Hook-Form
styled-component
Emotion
Tailwind CSS
Backend
NodeJS
NestJS
Prisma ORM
Database
MySQL
PostgreSQL

CAREER

stevelabs-logo

(주)스티브랩스

2022.09 ~ 2024.11 (2년 2개월)

개발팀 / 프론트엔드 개발자

  • Next.js 기반 커머스, 의료, 금융, 역경매 등 총 8개 프로젝트의 개발 참여
  • 소셜 로그인, 본인인증, 전자계약, 결제 시스템 등 외부 API 연동 경험
  • 쇼핑몰 관리자용 NestJS + Prisma ORM 기반 API 개발 - 외부 고객사
  • 커뮤니케이션 및 사내 개발 프로젝트 일정 관리

</> 온라인 편집샵 플랫폼

# 2024.06 ~ 2024.10

구현기능/역할

  • Emotion + Ant Design 기반으로 전반적인 관리자 페이지 UI 구현
  • React Hook Form, Zustand, Zod 상태 관리 적용
  • React Query를 활용한 데이터 통신 구조 최적화
  • NestJS + Prisma ORM 활용해 필요한 API 구현
  • 장바구니 → 결제 완료까지 전체 반응형 페이지 구현
  • 이니시스 결제 API 연동 (카드·휴대폰·무통장)

기술 스택

  • TypeScript
  • React
  • Next.js
  • Zustand
  • React-Query
  • Emotion

관련 링크

</> Flying Doctors

# 2024.09 ~ 2024.10

구현기능/역할

  • 관리자 웹페이지 전반적인 고도화 작업 담당
  • Socket.IO를 활용하여 관리자 간 실시간 채팅 기능 구현

기술 스택

  • TypeScript
  • React
  • Next.js
  • React-Query
  • Socket.IO
  • styled-component

관련 링크

</> 골드러시

# 2024.05 ~ 2024.06

구현기능/역할

  • 금 시세 수집, 가격 제약 조건, 관리자 기능 정의
  • Tailwind CSS 기반 모바일 친화적 UI 구성
  • 네이티브 앱(WebView) 브릿지 작업 (소셜 로그인,로그인 유지, 암호 인증, 카메라 접근, 파일 다운로드)
  • 무통장 입금(팝빌) API 연동
  • 드림시큐리티 본인 인증 API 연동

기술 스택

  • TypeScript
  • React
  • Next.js
  • React-Query
  • Zustand
  • Tailwind CSS

관련 링크

</> 미술로 생각하기

# 2024.01 ~ 2024.04

구현기능/역할

  • JWT 토큰 로그인 및 Interceptor를 활용한 자동 재인증, 본사/가맹점 권한 제어
  • 나이스페이먼츠 API연동 (카드 및 가상계좌)
  • 회원 수업·결제·활동 내역 조회 및 수정 기능 / 신규 회원 등록 기능 개발
  • Chart.js 기반 심리검사 결과 Radar 시각화 리포트 페이지 구현
  • 쇼핑몰 장바구니 → 결제 → 환불 프로세스 및 본사 상품 등록

기술 스택

  • TypeScript
  • React
  • Next.js
  • Zustand
  • React-Query
  • Emotion

관련 링크

</> 일로 (illo)

# 2023.11 ~ 2023.12

구현기능/역할

  • Figma 디자인 기준 UI 토큰 정리
  • React Query(useInfiniteQuery) + Intersection Observer로 무한 스크롤 구현
  • 카카오 소셜 로그인, PortOne 본인 인증 구현 및 커스텀 훅 분리
  • 캘린더 기반 예약 페이지 구현
  • Toss Payments API 연동

기술 스택

  • TypeScript
  • React
  • Next.js
  • React-Query
  • Emotion

관련 링크

</> 유전자 검사 보고서 생성 플랫폼

# 2023.09 ~ 2023.10

구현기능/역할

  • react-pdf/renderer 활용하여 결과 보고서를 PDF로 생성 및 다운로드 기능 구현
  • 관리자 페이지 개발 (회원가입, 로그인, 병원·회원 관리, 검사 요청, 약관 관리)

기술 스택

  • TypeScript
  • React
  • Next.js
  • React-Query
  • Emotion
  • AWS
  • react-pdf
  • react-pdf/renderer
  • react-signature-canvas

관련 링크

</> 자재바다

# 2023.03 ~ 2023.05

구현기능/역할

  • Vanilla JavaScript를 활용한 DOM 조작으로 장바구니 및 결제 페이지의 UI 구현
  • 장바구니 내 배송비 및 할인 로직을 모듈화하여 정확성을 높이고 코드 유지보수성 향상

기술 스택

  • JavaScript
  • PHP

관련 링크

</> 엔티즌

# 2022.09 ~ 2023.02

구현기능/역할

  • 네이티브 앱과 웹 간 데이터 연동을 위한 브릿지 로직 설계 및 적용 (카메라/파일 기능, 로그인 유지)
  • 네이버, 구글, 카카오 소셜 로그인 및 NICE 본인 인증 기능 구현
  • 모두싸인 API 연동을 통한 전자 계약 자동화 및 계약 체결 기능 구축
  • Redux Toolkit를 활용해 데이터 상태 관리 최적화 및 사용자 경험 개선
  • React-Query를 활용한 데이터 페칭 최적화로 페이지 전환 및 렌더링 성능 향상
  • Intersection Observer API를 활용한 무한 스크롤 기능 구현

기술 스택

  • React
  • Next.js
  • TypeScript
  • Styled-Components
  • Material-UI
  • Redux Toolkit
  • React-Query

관련 링크

wanted-logo

프리온보딩 프론트엔드 코스

2022.02 ~ 2022.04

다양한 기술 스택을 사용하여 8개의 프로젝트를 진행하였습니다.

</> 리뷰 조회, 등록 모바일 반응형 웹페이지

# 개인 프로젝트

구현기능/역할

  • 무한스크롤: Intersection Observer
  • 정렬, 리뷰 목록I(그리드 리스트)
  • 댓글, 좋아요, 링크 기능
  • 이미지 업로드/미리보기

기술 스택

  • react, redux-toolkit
  • React-router, react-slick, react-loading
  • CSS: styled-component
  • 배포: netlify

관련 링크

</> 간병인 신청하기 모바일 웹페이지

# 팀 프로젝트 7명

구현기능/역할

  • 돌봄 신청하기 페이지 구현
  • 주소 검색 모달창 구현
  • API를 활용해 주소 검색창 데이터 받아오기

기술 스택

  • react, react-router
  • redux
  • CSS: styled-component
  • 배포: vercel

관련 링크

</> 쇼핑몰 의류 검색, 조회 웹페이지

# 팀 프로젝트 6명

구현기능/역할

  • 뷰어 페이지 UI 작업
  • 검색결과 로딩처리

기술 스택

  • react, react-router
  • localStorage
  • CSS: styled-component
  • 배포: vercel

관련 링크

</> 게임 전적 웹페이지

# 팀 프로젝트 6명

구현기능/역할

  • 랭크 페이지 UI 작업
  • 랭크 페이지 - 가이드 모달창 만들기
  • 랭크 페이지 - 개인전/팀전 탭기능, MORE 버튼 구현

기술 스택

  • react, react-router
  • axios, firebase
  • CSS: styled-component
  • 배포: vercel

관련 링크

</> 진단 검사 결과 페이지

# 팀 프로젝트 6명

구현기능/역할

  • 하단 bar chart 의 레이아웃 구현

기술 스택

  • vue, vue-chart.js
  • CSS: styled-component
  • 배포: vercel

관련 링크

</> 병명 검색 추천 페이지

# 팀 프로젝트 2명

구현기능/역할

  • search UI 및 반응형 구현
  • 키보드 DropDown 기능 구현

기술 스택

  • react
  • redux-tookit, redux-RTK
  • CSS: styled-component
  • 배포: vercel

관련 링크

</> 휴양림 조회/저장 웹페이지

# 팀 프로젝트 6명

구현기능/역할

  • 휴앙림 저장 폼(모달창)을 구현
  • 모달 저장,수정,삭제 기능

기술 스택

  • react, react-router
  • redux-tookit
  • CSS: styled-component
  • 배포: netlify

관련 링크

</> todoList 듀얼 셀렉터

# 팀 프로젝트 6명

구현기능/역할

  • Drag and drop 기능 구현

기술 스택

  • react, recoil
  • CSS: styled-component
  • 배포: github

관련 링크

EDUCATION

wanted

코드스테이츠 프론트엔드 코스

2020.06 ~ 2021.06

코드스테이츠 프론트엔드 코스

학습 내용

  • HTML, CSS, JavaScript를 활용한 웹 개발 기초 학습
  • React를 사용한 프론트엔드 개발 및 UI 구현
  • Node.js와 데이터베이스를 활용한 백엔드 개발 경험
  • Git을 활용한 버전 관리 및 협업 역량 강화
  • 팀 프로젝트를 통해 실무 중심의 개발 경험 습득
  • 디버깅 및 문제 해결 능력 향상
  • 자기주도적 학습을 통한 개발 역량 강화