미리보기

사내 어드민 서비스 개발

• TypeScript, React를 사용해 자사 어드민 페이지의 신규 기능 개발 및 유지보수를 담당했습니다.
• Styled-Components로 스타일링 하였으며, MUI를 활용했습니다.
  
  

프로젝트 마이그레이션

1. 고객용 앱 마이그레이션 (기여도 100%)

• 기존 고객용 앱을 RN -> Next를 사용한 웹앱으로 마이그레이션을 진행했습니다.
• 변동성이 잦은 초기 앱 서버스의 빌드 에러 및 앱심사 과정 단순화하여 DX 향상에 기여했습니다.
• 앱 업데이트를 번거롭게 여기는 서비스 페르소나의 UX 향상에 기여했습니다.
  
  

2. 사내 직원용 앱 마이그레이션 (기여도 100%)

• 기존 사내 직원용 웹앱을 EJS -> Next, PWA를 활용해 마이그레이션을 진행했습니다.
• 레거시 코드의 개편과 리팩토링을 통해 프로젝트 유지보수 용이성이 증가했습니다.
• PWA를 적용하여 웹 사용자에게 별도의 앱 설치없이 네이티브와 유사한 환경 제공하였습니다.
  
  

신기술 도입

• 비개발자 및 다른 개발자들과 원활한 소통을 고려하여 스토리북을 도입했습니다.
• 자동 문서화를 통한 컴포넌트의 UI 관리 및 테스트 유지보수 용이성 증가에 기여했습니다.

최근 오픈소스 라이브러리에 관심을 가지고 작은 이슈들을 해결하여 생태계에 기여하고 있습니다.

• supabase : Add docs Supabase project initialization step PR
• twenty : Change Color in dark mode PR
• simple-icons : Add Cal.com icon PR
• invoke-ai : Update min and max values for LoRACard weight input PR

매일같이 메뉴를 고민하는 주부, 자취생 등 다양한 연령층의 사용자가 모여 자신만의 레시피를 공유하는 플랫폼


배포 : https://www.matissue.com/
깃허브 : https://github.com/H0onnn/MatIssue


<사용 기술>
TypeScript, Next, Recoil, Styled-Components

<개발 내 경험>

• 사용자 접근성을 고려하여 반응형 웹 페이지를 적용
• 효율적인 Data Fetching을 위해 페이지네이션과 무한스크롤을 적용하여 자연스러운 탐색 경험을 제공
• 카카오 API와 라이브리러를 사용하여 다양한 소셜 공유 기능 구현
• 라이트모드와 다크모드를 제공함으로써, 사용자의 선호도에 맞는 UI/UX 제공
• 서비스 내에 MBTI 테스트 페이지를 넣어 사용자의 취향에 적합한 레시피 정보를 제공하고, 재미적인 요소를 더해 서비스 체류시간 증가에 기여
• 레시피 필터링 및 정렬 기능 구현
• 이미지 최적화를 통해 평균 20% ~ 최대 93%의 이미지 크기 감소로 페이지 로딩 속도 2배 개선
• 스켈레톤 UI를 활용해 레이아웃 시프트 방지
• 화면에 먼저 노출되는 부분에 부분적 SSR 적용
• 코드 스플리팅을 적용하여 첫 로딩 시간 4배 이상 단축

대학교 편입학 혹은 전과를 희망하는 학생들이 서로의 학과에 대한 정보를 공유하고 소통하는 서비스
(현재 서비스가 중단 되었습니다.)


배포 : https://dev-fe-between.vercel.app/
깃허브 : https://github.com/H0onnn/HI-D


<사용 기술>
TypeScript, React, Zustand, tanstack-query, Socket,PWA


<개발 내 경험>

• eslint, prettier, husky를 사용해 팀 내 컨벤션을 제안하고 개발 규칙을 적용하여 confilct를 방지
• PWA를 적용하여 모바일 사용자의 접근 및 사용성을 개선
• Funnel 방식을 활용해 복잡한 절차의 회원가입 페이지의 효율적인 라우팅 구현
• 낙관적 업데이트를 활용, 즉각적인 UI 업데이트로 유저 경험 향상에 기여
• tanstack-query를 도입하여 중복된 API 호출을 최소화 (유저 데이터 호출 빈도를 4회 -> 1회로 단축)
• Sockjs를 이용해 실시간 채팅 및 알림기능 구현
• 리액트 쿼리의 데이터 리패치 문제 해결하기
• 웹 페이지 내에서 새로고침시 Socket 해제되는 이슈 해결
• 사용자의 인증 상태에 따른 보안 라우터 처리 및 동적 라우팅

서울의 각 지역을 탐방하고 리뷰를 남겨 지도를 밝혀나가는 서비스


<사용 기술>
TypeScript, React, Emotion-css, Context-API


배포 (웹) : https://www.yubinhome.com/auth
배포 (앱) : https://m.onestore.co.kr/mobilepoc/apps/appsDetail.omp?prodId=0000772388&scYn=Y
깃허브 : https://github.com/H0onnn/fog-of-seoul


<개발 내 경험>

• 구글맵 API를 활용해 메인 페이지의 서울 지도 구현 (폴리곤 기능과 geojson 데이터 활용)
• react-cropper를 사용해 이미지 편집 기능을 구현하고 페이지간 url 공유를 위해 Context-API 사용
• 구글맵 관련 복잡한 로직의 커스텀 훅을 작성하여 가동성 및 유지보수 향상에 기여
• 마이페이지, 랭킹 및 뱃지, 게시글 및 댓글 CRUD 기능 구현
• 확장자 변환 기능을 통해 이미지 확장자에 따른 브라우저 호환성 문제 해결
• 좌표 데이터의 전역 상태관리를 통한 구글맵 API의 리렌더링 이슈 해결