미리보기

공통

• shadcn/ui를 이용한 공통된 디자인 개발

• mock api를 이용한 빠른 기능 개발

  • 문제 상황: 백엔드와의 기능 개발 속도차이로 인한 개발 지연이 발생함

  • 해결 방식: axios-mock-adapter를 이용하여 미리 기능개발을 완료 한 이후 테스트 진행

검색기능 최적화

• zustand를 이용한 상태관리

  • 문제 상황:

    최상위 컴포넌트에서 검색에 필요한 모든 상태를 관리하여 기능이 고도화됨에 다라 컴포넌트 depth가 깊어지고 props drilling이 발생함

  • 해결 방식: 코드의 가독성을 늘리고 props drilling을 해결하기 위해 zustand를 이용한 전역 상태관리를 도입함

  • 결과: Cyclomatic Complexity 20% 감소

• 검색 API의 불필요한 호출 제거

  • 문제 상황:

    • 동일한 검색어를 입력했을 때 중복되는 API요청이 발생함

    • 사용자의 검색어 입력 시 불필요한 API요청이 발생함

  • 해결 방식:

    • react-query를 이용하여 동일 키워드에 대한 결과를 캐싱함

    • debouncing 기법을 적용하여 사용자의 입력이 완전히 끝난 후 API요청을 보내도록 수정함

  • 결과:

    • 동일한 검색어에 대한 api요청 최대 70% 감소

    • 동일한 검색어에 대한 api요청 83%감소

관리자 페이지

• 관리자 로그인 구현

• polling 기법을 이용한 실시간 블로그 등록 요청 관리

rss등록 기능 구현

• 정규표현식을 이용한 입력 값 유효성 검사

통계페이지 구현

• polling 기법을 이용한 실시간 통계 제공

반응형 웹 구현

• 문제 상황:

  • 데스크톱에 맞춰져있는 UI로 인해 모바일 환경에서의 사용자 경험이 떨어짐

  • 모바일 환경에서 사용하는데 불편함이 있다는 사용자의 피드백이 있었음

• 해결 방식:

  • useMeidaQuery 커스텀 훅을 작성하여 현재 기기의 해상도를 추적함

  • 모바일, 데스크탑 컴포넌트를 분리하여 현재 해상도에 따라 다른 컴포넌트를 렌더링하도록 수정함

• 결과: 다양한 환경에서 일관된 사용자 경험 제공이 가능해짐

채팅 기능 구현 및 최적화

• socket.io라이브러리를 사용하여 실시간 채팅 기능 구현

• 채팅 컴포넌트의 불필요한 리렌더링 제거

  • 문제 상황: 최상단 컴포넌트에서 채팅에 관련된 모든 상태를 관리하며 새로운 채팅이 올라올때 마다 채팅 컴포넌트 전체가 리렌더링되는 문제가 발생함

  • 해결 방식: 불필요한 리렌더링을 줄이고자 zustand를 도입하여 채팅 관련 상태를 전역으로 관리함

  • 결과: 채팅 컴포넌트의 불필요한 리렌더링을 줄여 렌더링 속도 14% 향상

프로젝트 리팩토링

• 검색엔진 최적화

  • 문제 상황: SEO점수가 낮아 신규로 유입되는 사용자가 적다고 판단함

  • 해결 방식:

    • meta 태그의 description, keyword 등을 추가함

    • robots.txt 작성

  • 결과: Chrome Devtools의 Lighthouse SEO점수 100점 달성

• 웹 접근성 향상

  • 문제 상황:

    • 검색엔진 최적화 과정에서 웹 접근성 또한 SEO점수에 영향을 준다는 것을 학습함

    • 웹 접근성 표준에 대해 학습하고 적용해보고자 진행

  • 해결 방식:

    • 기존의 태그를 시멘틱 태그로 변경

    • 이미지에 대체 텍스트 삽입

    • tabIndex 속성을 이용하여 키보드 접근성을 높임

  • 결과: Chrome Devtools의 Lighthouse Accessibility점수 90점 달성

• 정적 코드 분석

  • 문제 상황: 프로젝트 리팩토링을 하던 중 불필요한 코드가 많다는 것을 확인함

  • 해결 방식: SonarQube를 통한 정적 코드 분석으로 해당 이슈를 찾아내고 코드 품질을 향상시킴

  • 결과: SonarQube의 유지보수성 이슈 75% 해결

"프롬프트엔지니어링과 LLM을 활용한 IT인프라 비용 비교 플렛폼" 논문 투고 및 수상