미리보기

투자/VC(벤처캐피탈) 웹 ERP KIIPS 프로젝트 개발 및 유지보수

• ERP 인사/총무 메뉴 메인 개발자로 front, back 90% 이상 개발

• 팀 내 전체 기능 개선 완료 건수 278개 중 20.14%에 해당하는 56개를 단독으로 완료

• 출시 후 5개월 동안 총 144개의 오류를 식별 및 우선 순위를 지정하여 보고하고 팀 내에서 최다 오류 처리 기록

• 모든 오류는 한 번의 수정으로 재 피드백 없이 해결, 높은 정확도와 문제 해결 능력 입증 → 사용자가 이해할 수 있도록 오류 해결 사항을 자세히 설명하는 피드백을 꾸준히 제공

• 필요에 따라 사내 디자인팀과 협업하여 디자인 시스템 유지보수

• 사용자가 기입한 데이터를 가공하여 외부 연계 프로그램의 데이터를 생성하는 작업 담당

• 기존 전자 결재 기능에서 추가된 로직을 포함하여 문서화했으며, 모든 개발팀이 공유할 수 있도록 문서 배포

• Backend : Java, Oracle, Spring boot

• Frontend : JavaScript, jQuery

설정한 난이도의 목표를 완료하면 경험치로 환산되어 다른 유저들과 경쟁할 수 있는 todo 서비스. 프로그래머스 데브코스에서 만난 BE 2명, FE 3명이 진행한 프로젝트.

Links

• Github https://github.com/ingame-app/ingame

• Figma https://www.figma.com/design/sYNvitKbz4D0sKRVtRARAo/4inGame?node-id=250-20&t=zOE0ELpkVjMsAZw9-1

Skills

React Typescript Javascript Tanstack-Query Redux-toolkit Styled-Components antd Msw React-router-dom React-hook-form Figma

Front-End

• UI/UX 구현 및 개발

  • 기존의 CSS-in-CSS 방식의 index.css 파일을 CSS-in-JS 방식의 Styled-components Globalstyle 로 통합하여 초기 렌더링 속도를 150ms 개선.

  • 시맨틱 태그로 웹 페이지 구조를 개선하여 코드 가독성과 접근성을 향상. Lighthouse 접근성 점수가 72에서 81로 증가했고, 페이지 평균 점수가 80 이상을 유지.

    🔗 : https://github.com/ingame-app/ingame/pull/197#issue-2368812976

• 사용자 상태관리 구현

  • 로그인 여부를 전역으로 관리하기 위해 Redux-toolkit를 사용해 토큰 및 로그인 상태 저장.

  • 새로고침 시 상태 초기화 문제 해결을 위해 Redux-persist 를 추가하여 session storage에 상태를 저장.

  • login-provider를 구현하여 라우팅 설정에 추가하고 각 페이지가 렌더링 될때마다 로그인 상태를 확인, 로그인하지 않은 사용자는 자동으로 로그인 페이지로 리다이렉트되도록 함. 단, useLocation 훅을 사용하여 현재 경로를 확인하고 회원가입 페이지는 예외적으로 접근을 허용하여 인가된 사용자만 서비스에 접근할 수 있도록 함.

• 재사용성을 고려한 컴포넌트 및 함수 구현

  • 기존 퀘스트 생성 버튼의 공통 기능과 차이점을 파악하여 기존 코드베이스에서 두 개의 개별 버튼을 새로운 통합 퀘스트 생성 컴포넌트로 대체.

    🔗 : https://velog.io/@yun6160/InGame-퀘스트-추가-생성-버튼-합치기

  • 주 단위 객체 생성 함수를 기존 커스텀 Hook에서 Javascript 유틸리티 함수로 리팩토링하여 불필요한 리액트 종속성을 제거하고 리액트 외부에서도 재사용 가능하게 함.