미리보기

• 공군 항공안전단 인터넷 홈페이지 개발 (Website)

• 공군 항공안전단 관리자 페이지 개발

Description

학교 공지글 검색 기능, 학생들이 만든 서비스 공유 기능 등 숭실대학교 학생들을 위해 유용한 기능들을 제공하는 웹 서비스 (Website, GitHub)

Experience

• Request Waterfall 문제로 저하되는 UX 개선

  • 하나의 컴포넌트에서 여러 개의 Suspense Query 호출 시 네트워크 요청이 순차적으로 이루어지는 Request Waterfall이 발생하여 UX가 저하되는 문제 발생

  • React Suspense의 동작 원리 학습 후 한 컴포넌트에서 한 Suspense Query만을 호출하도록 리팩토링하여 해결

• 일관적이지 않은 API 호출 상태 관리 방식으로 저하되는 DX 개선

  • TanStack Query 라이브러리로 API 호출 상태를 관리하지 않고 명시적으로 API 호출 상태를 관리하는 코드가 일부 존재하여 DX가 저하되는 문제 발생 (관련 이슈)

  • 모든 API 호출 상태 관리를 TanStack Query 라이브러리로 관리하도록 리팩토링하여 해결

• GitHub Projects 기능을 활용한 테스크 관리 자동화

  • 기존 노션을 이용한 테스크 관리 방식에서 실제 개발 진행 상황과의 지속적인 불일치 문제 발생

  • GitHub Projects와 Workflows 기능을 활용하여 테스크 관리 및 추적을 자동화함

Tech Stack

React, TypeScript, styled-components, TanStack Query, Recoil, React Router

Description

공군 항공안전단에서 개설하는 교육과정 신청 기능, 게시판 기능 등을 제공하는 웹 서비스 (Website)

Experience

• Axios Interceptor에서 에러가 전파되어 저하되는 UX 개선

  • HTTP 응답을 가로채어 공통적인 에러 처리를 수행하는 Axios Interceptor에서 컴포넌트까지 에러가 전파되어 UX가 저하되는 문제 발생

  • 공통적인 에러 처리 수행 후 이행되지 않는 프로미스를 반환하여 컴포넌트까지 영향을 미치지 않도록 리팩토링하여 해결

• 제한된 개발 환경으로 인해 저하되는 DX 개선

  • 군대 내 컴퓨터의 하드웨어 성능, 관리자 권한 획득 제한 등으로 개발 환경 구축에 제약사항이 많아 DX가 저하되는 문제 발생

  • 클라우드 서버에 브라우저 위에서 동작하는 VS Code 서비스를 배포하여 일관적인 개발 환경 구축

• 컴포넌트 라이브러리의 내부 동작 원리 학습

  • Vue.js 기반 컴포넌트 라이브러리 사용 중 특정 컴포넌트가 공식 문서의 설명과 다르게 동작하는 문제 발생

  • 컴포넌트 라이브러리의 내부 동작 원리 학습 후 외부 상태와 컴포넌트 내부 상태를 동기화하여 해결

Tech Stack

Vue.js, Vuetify, Vuex, Vue Router