미리보기

프로젝트 소개

• 2024년도 대덕소프트웨어마이스터고등학교 신입생 입학 전형 시스템

• 2023년 10월 17일 ~ 11월 3일의 기간동안 138개의 원서 제출을 관리

Github
Entry-LTS(홈페이지) → Admission-LTS(원서접수페이지) →
Admission-Admin-LTS(원서접수관리 어드민) EntryDesignSystem(디자인 시스템)

기술스택

React, Typescript, Storybook, React-Query, Zustand, Emotion

담당기능

• 디자인 시스템 개발 및 유지보수

• 홈페이지 퍼블리싱

  • 반응형 훅을 통한 반응형 홈페이지 개발

  • 유저, 어드민 권한에 따른 페이지 처리

• 원서 접수 서비스 제작

트러블 슈팅

• 잘못된 state 관리 - PR 링크

  • 원인: 입력한 유저의 모든 정보를 zustand를 사용하여 전역변수로 관리, 하지만 결과적으로 코드의 가독성이 낮아지고 난잡화 됨
    해결 방법: 컴포넌트 분리 및 zustand 대신 각각의 페이지마다 사용하는 정보를 useState를 사용하여 리팩토링

• PDF에 수정된 내용이 적용되지 않는 현상

  • 원인: 이전 페이지로 값을 수정한 뒤 원서PDF 재조회시 react query의 cache time으로 인해 이전 Pdf가 출력 되는 현상
    해결방법: 원서PDF 조회 페이지로 이동할 때마다 React Query의invalidateQuery로 쿼리 무효화를 통한 PDF 업데이트

• UT 결과, 실패 확률 50%

  • 원인: 입력부분에서 사용자가 인지하지 못하는 부분이 존재하였고 원인 미상의 에러가 뜨면서 원서접수에 실패함
    해결방법: UI를 통일하게 변경하고 에러 원인에 따른 메시지를 띄어줌으로서 UX를 개편, 실제 원서접수 기간동안 이슈없이 138개의 원서접수 완료

• 과도한 api 호출

  • 원인: 중학교 검색 타이핑을 할때마다 api호출을 하여 검색 한번에 평균 10번 이상의 api 호출
    해결방법: 디바운싱을 이용하여 api 호출을 5번 이하로 줄여 UX와 서버 부하 해결

회고

• 디자인시스템을 개발 할때 자잘한 오류들을 수정할 때가 많았습니다. 그래서 디자인시스템을 구축할 때, 설계가 중요한 것을 느꼈습니다.

• QA와 실제로 서비스를 운영하면서 UX와 에러핸들링 및 디테일한 부분에서 많은 피드백을 받았습니다. 그래서 사용자들을 위해 자기가 만든 웹을 충분히 테스트 해야하고 에러핸들링을 열심히 해야겠다고 느꼈습니다.

프로젝트 소개

• 대덕SW마이스터고등학교만을 위한 통합 서비스

  • 기숙사, 동아리 관리 서비스 등 따로 관리하는 서비스 통합

Github

깃허브 레포지토리(xquare-frontend)

기술스택

yarn workspace, Next.js, Typescript, React-Query, Emotion

내가 기여한일

• 프로젝트 관리 및 유지보수

  • 피드 삭제 및 신고 기능 개발 - PR링크

  • 급식 웹페이지 개발 - PR링크

  • 신청 시간 시간대별 분기 처리 - PR링크

트러블 슈팅

• success 브릿지 추가

  • 원인: 잔류 신청을 할 때 api요청이 성공해도 별다른 상호작용이 없어 요청이 정상적으로 완료됐는지 확인 할 수 없음

    
    해결방법: Native 앱과 웹뷰를 연결하는 성공 모달을 브릿지를 추가로 제작하여 요청 성공시 모달 표시

• 이미지 업로드 최적화

  • 원인: 다량의 사진들을 서버에 업로드하면서 이미지 업로드 시간이 느려짐

    
    해결방법: AWS에서 지원하는 Presigned URL을 이용하여 이미지를 업로드를 클라이언트에서 직접 S3를 이용하여하도록 변경하여 업로드 속도 개선

회고

• monorepo, Next.js, 웹뷰등 처음 보는 기능, 기술스택등이 있어서 코드를 이해하기 힘들었습니다. 하지만 프로젝트를 하며 무엇을 공부해야하는지 배울점을 찾았고 다른 사람의 코드를 보고 배우는 능력이 늘어났습니다.

• 프로젝트를 하며 여러 직군들과 협업을 해야할 일이 많았습니다. 다른 분야의 진행도를 파악하고 질문을 하며, 자신의 요구사항을 말하고 피드백을 수용하는 경험을 하였습니다.

프로젝트 소개

• 웹사이트 상의 존재하는 광고 혹은 거슬리는 것들을 제거해주는 확장 프로그램

Github

깃허브 레포지토리(ad-blocker)

기술스택

chrome extension api, vanilla js

내가 기여한일

• 프로젝트 기획 및 개발

  • 요소 삭제 로직 개발

  • 로그 추가 개발

트러블 슈팅

• local storage 리팩토링

  • 원인: chrome extesion의 팝업창에서는 web api인 local storage의 접근이 불가능 함

    
    해결방법: chrome extension의 storage api를 사용하여 로그를 영구적으로 저장

• 삭제한 뒤 빈 화면 처리

  • 원인: 타겟 요소를 지운 뒤에 해당되는 공간의 빈공간이 이질적임

    
    해결방법: 해당되는 웹사이트에 영향이 미칠정도가 안될 만큼 parentNode를 찾은 뒤 삭제

회고

• 확장프로그램은 일반적인 웹페이지와 다른 환경이므로 제한된 기능들과 생소한 프로젝트다 보니 참고할 레퍼런스가 많지 않았습니다. 하지만 지원하는 기능들이 많았기 때문에 공식문서를 보며 작업하였습니다.

• 라이브러리에 의존하지 않고 vanilla js를 사용해보니 평소에 사용하지 않았던 기능들을 사용했습니다. 기초적인 JS도 중요하단 사실을 깨달았습니다.