미리보기

JOBIS는 교내 취업 관리시스템입니다.
학교로 채용 의뢰를 하는 기업용 웹페이지를 제작하였습니다.
현재 기업용 웹페이지는 테스트를 통한 안정화 작업 중이며 5월 실사용 예정입니다.
Github →
스킬
NextJS, Zustand, Typescript, react-hook-form, React-Query, Storybook, Nx, esbuild, vanilla-extract, yarn berry
담당 기능

• 모집의뢰서 및 기업 등록 페이지 개발
• storybook을 이용한 디자인 시스템 문서화
• react-hook-form 라이브러리 도입
  • 모집의뢰서, 기업 데이터 관리 및 렌더링 최적화
  • validate와 pattern 속성을 활용한 에러 처리
• nx를 이용한 모노레포 구조 설계 및 마이그레이션
  • 공통 패키지 분리
  • vercel을 이용한 배포 자동화 환경 구축

트러블 슈팅

• 이미지 업로드 속도 90% 단축
  원인: 다량의 사진들이 서버에서 업로드하면서 이미지 업로드 시간이 느려짐
  해결방법: AWS에서 지원하는 Presigned URL을 이용하여 클라이언트에서 직접 S3에 이미지를 업로드 하도록 변경하여 업로드 속도를 약 90% 개선(5s -> 0.3s)
• 디자인 시스템 호환성 문제
  원인: 기존의 디자인 시스템이 어드민 웹에만 적용되어 다른 웹에서 일관된 UI를 유지할 수 없어 생산성이 저하되는 현상 발생
  해결방법: 디자인 시스템을 새로 개편하는 작업을 주도하여 UI 컴포넌트 통일
• 배포 시간 50% 단축
  원인: 변경사항이 적더라도 반복적으로 동일한 작업을 수행하여 빌드 시간이 일정하게 소요됨
  해결방법: vercel과 nx에서 지원하는 remote caching을 활용하여 배포시간 최대 50% 단축(1m 50s -> 55s)

관련 글

• Nx와 모노레포 도입 배경
• Vercel로 Nx 모노레포 배포하기

2024년도 대덕소프트웨어마이스터고등학교 신입생 입학 전형 시스템입니다.
원서 접수 페이지, 원서접수 어드민, 홈페이지 개발에 참여하였습니다.
2023년 10월 17일 ~ 11월 3일의 기간동안 138개의 원서 제출을 관리하였습니다.
Github
Entry-LTS(홈페이지) → Admission-LTS(원서접수페이지) →
Admission-Admin-LTS(원서접수관리 어드민) → EntryDesignSystem(디자인 시스템) →
스킬
React, Typescript, Webpack, React-Query, Zustand, Storybook, Emotion, jsPDF

담당 기능

• 반응형 훅 제작을 통한 반응형 홈페이지 제작
• 디자인 시스템 관리 및 유지보수
• 원서 접수 서비스 제작
  • 인적 사항, 성적 산출 페이지 개발
  • 학생, 학부모 권한에 따른 분기 처리
• 입학 관리 어드민 서비스 제작
  • 접수 현황 페이지 개발
  • 지원자 관리 페이지 개발
• s3와 cloudFront를 이용한 배포 자동화 시스템 구축

트러블 슈팅

• 요청 중첩으로 인한 오류
  원인: mutate 비동기 현상으로 인해 순차적으로 발송되어야 하는 api 통신이 순서 없이 발송되는 현상 발생
  해결방법: React Query의 mutateAsync를 이용한 커스텀 훅을 제작하여 여러 mutate 요청에 대한 순차적 요청 대응
• UT 결과 실패 확률 50%
  원인: UX 적으로 사용자가 인지하지 못하는 부분이 존재하였고 원인 모를 에러가 뜨면서 사용자가 당황하게 됨
  해결방법: 에러 원인에 대한 메세지 대응 및 사용자가 좀 더 편하게 사용할 수 있도록 UX를 개편하며 실 원서접수 기간동안 138개의 원서를 문제 없이 접수
• 빌드 시간 73% 단축
  원인: 페이스북에서 제공하는 CRA는 번들 사이즈가 과도하게 커서 빌드가 느려짐
  해결방법: HMR 방식을 지원하는 vite를 사용하여 번들 사이즈를 줄이고 빌드 시간을 73% 단축(15.73s -> 4.14s)

DMS는 교내 기숙사 관리 시스템입니다.
현재 약 200명의 교내 사용자를 가지고 있는 서비스이며 사감선생님들께서 사용하시는 어드민 웹페이지 개발 유지보수에 참여하였습니다.
Github →

스킬
React, Typescript, React-Query, Zustand, styled-components, yarn berry

담당 기능

• 학생 관리 및 상벌점 관련 기능 유지보수
  • 학생 목록 페이지 UX 개선 작업
  • 상벌점 필터 구현
• react portal을 이용한 모달 코드 리팩토링 React Portal 학습 →
• contextAPI에서 zustand로 상태관리 라이브러리 마이그레이션

트러블 슈팅

• 스타일 통합 이슈
  원인: 촉박한 개발 기간으로 인해 코드 리뷰가 제대로 진행되지 못하고 팀원 한명이 eslint 및 prettier를 삭제하는 상황 발생
  해결 방법: eslint를 다시 도입시키고 코드 리뷰가 무조건 진행된 뒤 머지 할 수 있도록 확실하게 github의 기능을 이용하여 브랜치, 머지 규칙 등을 정했으며 코드리뷰가 원할하게 이루어질 수 있도록 서비스 안정화 이후 개발 기간을 좀 더 여유롭게 잡아 해결
• React-Query를 이용한 props drilling 해결
  원인: 수정 및 삭제 동작 이후 최신 데이터를 불러오기 위해 useQuery에서 refetch를 사용하였으나 props로 넘기는 경우가 자주 발생
  해결방법: React Query에서 제공하는 쿼리를 무효화 하는 방식인 invalidateQuery를 사용하여 queryKey를 이용한 전역 통신 관리를 통해 이를 해결

2023.05.05 ~ 2023.09.14동안 총 5명으로 구성된 Javascript 기초 지식을 쌓고 면접 준비를 위한 Javascript 스터디를 진행하였습니다.
스터디 노션 ->

• Javascript 스터디장으로서 스터디 진행 방식, 일정 등을 관리하며 스터디를 이끌었습니다.
• 매주 모던 자바스크립트 튜토리얼이라는 웹사이트에서 파트를 나눈 뒤 라이트닝 토크를 통해 지식을 공유하였습니다.
• You don't know JS라는 책을 읽은 뒤 자바스크립트의 타입과 값 등에 대한 자세한 부분들을 깊게 공부할 수 있었습니다.

2023.10.11 ~ 2023.10.13 3일간 진행한 해커톤 대회에서 정보통신기획평가원장상을 수상하였습니다.

• Gamification을 활용해 음식과 제품을 주문할 수 있는 키오스크 서비스라는 주제로 음식점과 협약된 회사의 판촉을 위한 게임들을 키오스크로 플레이할 수 있는 서비스를 개발하였습니다.
• 짧은 기간 동안 처음 보는 사람들 협업하며 적극적으로 의견을 제시하고 새로운 환경 속에서도 적응할 수 있는 방법을 익힐 수 있었습니다.

코엑스에서 진행한 소프트웨이브에서 2023.11.29 ~ 2023.12.01 동안 JOBIS라는 프로젝트로 부스 운영을 진행하였습니다.

• 약 60명 이상의 기업 관계자 분들께 프로젝트를 소개하고 사용 방법에 대하여 설명 드리는 경험을 하였습니다.
• 직접 기업 관계자 분들께 피드백을 받으며 어떻게 서비스를 더 개선할 수 있을지 생각해볼 수 있었습니다.