미리보기

코딩 전문 교육기관에서 담임 매니저로서 100명이 넘는 수강생들의 코딩 교육을 보조하고 무사히 수료시킴.

약 6개월 간의 교육과정 동안 매일 수강생들의 헬스 체크, 코딩 학습(JS, React) 지원, 고민/고충 상담 업무를 하였습니다. 거의 매주 있는 프로젝트의 완성 기한을 엄수시켰으며 대다수의 수강생들을 무사히 수료시켰습니다.

수강생 평가 5점 만점에 4.9 점의 압도적인 긍정 평가.

수강생 대상으로 이루어진 담임 매니저 평가에서 5점 만점에 4.9 점이라는 높은 점수를 받았습니다.

프로젝트 설명

교통 약자들이 편하게 접근할 수 있는 시설에 대한 정보를 공유하는 웹 서비스 입니다. 배리어 프리(barrier-free) 개념에 중점을 두고 휠체어 접근성, 점자 가이드, 장애인용 화장실 등의 기준으로 장소를 검색 할 수 있으며, 장소에 대한 간단한 리뷰를 남길 수 있습니다. 프론트엔드 개발자 5명과 UX/UI 디자이너 한명이 팀을 이뤄 개발하였습니다.

트러블슈팅

• 메인 페이지 LCP 개선 - 5.4s → 3.2s(40.7% 단축)

  • [문제]

    
    User Test 중 메인 페이지 로딩이 느리다는 불만 발생.

  • [해결]

    
    기존 SSR 방식에서 getStaticProps를 이용한 ISR 로 변경.

  • [결과]

    
    약 2초 가량 단축.

• 서버 통신 최적화 - 서버 요청 횟수를 1/5로 감소

  • [문제]

    
    특정 컴포넌트에 표시해야 하는 정보를 받아오기 위해 각각 다른 table 에서 여러번 서버 요청을 보내는 상황 발생.

  • [해결]

    
    reviews, users, places, comments, likes 5개 테이블에 대해 각각 서버 요청을 수행하던 로직에서 RPC(Remote Procedure Call) 을 활용하여 단 한번 요청하는 로직으로 변경.

  • [결과]

    
    자주 반복되는 컴포넌트에서 보내는 서버 요청을 1/5로 줄임으로 서버 부하 감소.

• 대용량 이미지 업로드 문제 해결 - 이미지 압축 라이브러리 도입

  • [문제]

    
    사진 업로드 크기 제한(1Mb)이 있는 상황에서 다수의 사진이 1Mb를 초과하여 업로드가 이루어지지 않는 문제 발생.

    - 크기 제한을 2~3Mb 로 완화할 경우 서버 storage 부족이 염려되는 상황.

  • [해결]
    사진 업로드 크기 제한을 해제하고 대용량 이미지 파일의 경우 browser-image-compression 라이브러리를 이용하여 브라우저에서 압축 후 서버에 저장 하도록 함.

  • [결과]

    
    크기 제한 없이 원하는 사진 업로드 가능함과 동시에 storage 압박에서도 벗어남.

• 에디터 내 이미지 삽입 문제 해결 - base64 에서 jpg로

  • [문제]

    
    프로젝트에서 사용중인 Quill 에디터가 이미지를 base64 로 저장하는 문제 발생.

    - CPU 오버헤드 발생 및 SEO 에 악영향 우려.

  • [해결]
    imageHandler 함수를 작성하여 이미지를 jpg로 서버 storage에 저장하도록 로직 작성.

  • [결과]

    
    기존 문제점 해결 및 속도 향상.

프로젝트 설명

프론트엔드 개발자 2명, 백엔드 개발자 2명이 모여 대규모 수강생을 대상으로 교육 서비스를 제공하는 기관에서 사용할 수 있는 인사 관리 웹 어플리케이션을 만들었습니다.

BaaS를 사용했던 방식에서 벗어나, 실제 백엔드 개발자들과 기획부터 개발, 배포, 커스텀 도메인 설정까지 전 과정을 경험해 볼 수 있었습니다.

트러블슈팅

• 컴포넌트 재사용성 개선 - 모듈화

  • [문제]

    
    비슷한 형태의 UI들이 반복 사용 되어야 하는 상황 발생.

  • [해결]

    
    컴포넌트 모듈화를 통해 재사용성을 높임.

    - 모듈화한 컴포넌트를 범용적으로 사용하기 위한 커스텀 모달 컴포넌트 제작.

    - 필요한 data의 경우 전역상태로 저장하여 UI 연속성 향상.

  • [결과]

    
    재사용성 및 가독성 향상.

• Organization repo 배포 문제 - Github Action 활용하여 mirror repo 자동 배포

  • [문제]

    
    Vercel 에서 Organization repo 를 배포하려면 요금이 발생함.

  • [해결]

    
    Github Action 을 활용, 프로젝트의 main branch 에 변화가 있을 때마다 개인 계정에 이 변화가 그대로 반영되도록 설정함.

    - Vercel 에서는 상술한 개인 repo 를 자동으로 배포하도록 하여 비용이 발생하지 않음.

  • [결과]

    
    추가비용 없이 무사히 배포하였음.