미리보기

프로젝트 소개

한신대학교 재학생 누구나 학업 성적 확인서 PDF 업로드를 통해 본인의 졸업요건 결과를 확인할 수 있는 서비스

• 졸업요건 조회 결과를 제공하여 간편하게 학우들이 졸업요건을 만족했는지 확인할 수 있고, 인기 교양 추천 서비스를 통해 본인에게 부족한 과목을 채울 수 있는 서비스를 사용자에게 제공

[테스트 계정] 아이디 : bae1374 비밀번호 : test1234

개발 및 기여 내용

• 성능 개선을 위한 코드 분할
  • 프로젝트 라우터 수준에서 React.lazy를 도입하여 성능 최적화
    • 기존 프로젝트 초기 로딩 시에 모든 컴포넌트가 번들에 포함되어 있었습니다. 이는 코드의 양이 많아지게 되면 번들의 크기가 커져 긴 로딩 시간이 생길 수 있었습니다.
    • 라우터 수준에서 React.lazy를 도입해 페이지별로 코드 분할을 적용했고, Suspense를 활용하여 로딩되는 시간 동안 로딩 컴포넌트를 추가해 사용자 이탈을 방지하도록 만들었습니다.
    • 이러한 변경으로 필요한 컴포넌트를 동적으로 로드되도록 만들고, 초기 번들 크기를 줄여 사용자들에게 더 빠른 초기 로딩 속도를 제공하여 사용자 경험을 개선했습니다.
• 검색 시 불필요한 API 호출을 방지하기 위해 Debounce 기능 적용
  • 검색 기능 사용 시, 데이터가 입력될 때마다 불필요하게 API를 호출하는 부분을 인식했습니다.
  • 이를 해결하기 위해서 Debounce를 적용하여 일정 시간 이상으로 입력이 들어오지 않아야 API를 호출하도록 했습니다.
  • 이러한 변경으로 불필요한 API 호출을 개선할 수 있었습니다.
• 서버와 Restful API 통신 기능 구현
  • Create, Read, Update, Delete 및 페이지네이션, 검색 기능 구현 ****
  • 졸업 요건 확인 서비스 내 PDF 데이터 송수신 기능 구현
  • 서버와 API 통신 시 CORS 에러가 발생하여 동일 출처 정책(SOP)을 위반하지 않기 위해 프록시 서버 설정하여 해결한 뒤, 팀원에게 이슈를 공유하여 서버 단에서 Access-Control-Allow-Origin 헤더를 설정하도록 했습니다.
  • 비동기 처리를 하는 방법 중 코드 가독성과 유지보수의 이점을 생각하여 async/await 을 사용하여 구현했습니다.
• Media query를 적용한 반응형 디자인으로 다양한 기기에서 동일한 사용자 경험을 제공

프로젝트 소개

나만 알고 있는 우리 동네 미지의 공간을 특별한 큐레이팅을 통해 소개하는 서비스

• 거리 미관 사진들이 나오고 지도에서 주소 및 위치를 알 수 있어 실제로 구경할 수 있는 서비스 제공 및 댓글을 통해 미관에 대한 의견을 공유하는 서비스 제공

개발 및 기여내용

• Intersection Observer를 사용하여 메인 페이지 내 무한 스크롤을 구현하여 사용성 개선
  • useRef와 threshold를 활용하여 감지된 요소의 일정 퍼센트가 넘어갈 시 6개 단위로 데이터를 가져올 수 있도록 구현 [해당 코드]
• Interval을 사용하여 메인 페이지 내 캐러셀 기능 구현
  • useRef로 컴포넌트가 새로 렌더링이 되어도 최신 값을 받아서 사용할 수 있도록 구현 [해당 코드]
• 게시글 이미지 등록 시 Image Cropper기능으로 사용자가 원하는 이미지로 크롭할 수 있도록 구현
• 중복 로직을 커스텀 훅으로 분리하여 재사용성 개선