미리보기

프론트엔드 개발 인턴으로, 회사 협업툴 서비스의 Frontend 개발을 맡아 React, Typescript를 활용하여 유지보수 및 기능 구현을 담당하였습니다.

통합된 오류 처리 시스템 개발 및 사용자 경험 개선

• 문제 정의:

  • "문의하기" 페이지에서 입력 값이 비어있는 상태로 전송되는 경우에 대한 예외 처리가 되어 있지 않아 사용자 혼란 발생

  • 여러 페이지에서 입력 값의 오류 메시지가 중복된 코드로 관리되어 유지보수가 어려운 상황을 확인

• 주도적 해결:

  • "문의하기" 페이지에 필수 입력 값에 대한 예외 처리를 추가하여 사용자 오류를 방지하고, 전송 과정의 신뢰성을 향상

  • 입력 값과 오류 상태를 관리하고 오류 메시지를 일관되게 반환하는 커스텀 훅을 개발하여, 모든 페이지에서 통합된 오류 처리 로직을 적용

• 핵심 성과:

  • 일관된 오류 처리 시스템 구축으로, 에러 메시지 수정 시 개발 생산성 향상

  • 사용자 입력 오류 감소로 사용자 경험이 개선되고, 입력받은 데이터 관리 편의성 증가

에듀튜브는 교육 관련 영상을 카테고리별로 묶어 쉽게 시청할 수 있도록 서비스를 제공하고 커피챗을 통해 사용자들이 지식 공유를 할 수 있도록 도움을 주는 플랫폼입니다.

진행 과정

매일 아침 스크럼을 통해 Google Sheet를 활용한 작업 과정 공유, 노션을 이용하여 컨벤션과 회의록 정리, 깃허브를 활용하여 이슈 생성 및 팀원간 코드리뷰 진행

상세 역할

커피챗 게시물 CRUD, 예약 및 장바구니 기능, 후기 입력 및 전체 요약 보기 기능 개발, TailwindCSS 설정 및 전체적인 기획 및 디자인 업무 담당 (FE 3명)

초기 로딩 속도 최적화

• 문제 정의:

  • 초기 페이지 로딩 속도가 지연되어 사용자 경험이 저하됨

  • 구글 라이트하우스 점수에서 낮은 웹 성능 점수를 기록, 특히 이미지 로딩 속도에서 문제가 발견됨

• 주도적 해결:

  • 서버 사이드 렌더링(SSR) 도입: Next.js의 서버 사이드 렌더링을 적용하여, 초기 페이지 로딩 시 필요한 데이터를 서버에서 미리 불러오도록 구현. 이를 통해 클라이언트에서의 불필요한 렌더링을 최소화함

  • 지연 로딩과 무한 스크롤 구현: React Query와 Intersection Observer API를 활용하여 초기 로딩 시 화면에 필요한 데이터만 서버에서 가져오고, 이후 데이터는 사용자의 스크롤에 따라 동적으로 로드되도록 무한 스크롤 기능을 도입

  • 이미지 최적화: 구글 라이트하우스를 통해 성능 저하의 원인이 된 이미지 로딩 속도를 개선하기 위해, 배너 이미지의 확장자를 PNG에서 WEBP 형식으로 변경하여 더 빠른 로딩이 가능하도록 최적화

• 핵심 성과:

  • 초기 로딩 속도 개선: SSR 및 데이터 지연 로딩 전략을 통해 초기 로딩 시간 단축, 사용자 경험향상

  • 웹 성능 점수 10점 상승: 구글 라이트하우스 성능 점수를 10점 이상 향상시켜, 최적화된 웹페이지 제공 및 SEO 개선에 기여

Atomic 디자인 패턴 도입으로 개발 효율성 개선

• 배경:

  • 일관된 사용자 경험을 제공하고, 개발 과정의 생산성을 높이기 위해 Atomic 디자인 패턴 도입의 필요성을 인식

• 주도적 해결:

  • Atomic 디자인 패턴 조사 및 적용: 프로젝트의 규모와 요구사항에 맞춰 atom, block, view 단계로 구성된 디자인 시스템을 직접 설계하고 구현

  • 통합 디자인 및 개발: Figma를 활용하여 atom 컴포넌트를 직접 디자인하고, 이를 기반으로 재사용 가능한 컴포넌트를 구축하여 UI/UX 일관성을 강화하고 개발 효율성을 극대화

• 개발 생산성 향상: Atomic 디자인 패턴을 직접 설계하고 적용하여 코드 중복을 줄이고, 개발 시간을 단축하여 팀의 생산성 향상에 기여

링크

저장소 링크

다른 사람들이 꾸민 집을 보면서 금방 내방도 예쁘게 꾸밀 수 있다는 의미에서 서비스 이름을 금방내방이라고 지었습니다. 사용자가 자신의 인테리어 사진을 등록하거나 가구 판매 링크를 업로드할수 있는 SNS 웹 서비스입니다.

진행 과정

매일 아침 스크럼과 Google Sheet를 통한 작업 공유. 팀원의 집이나 Zoom을 활용한 협업으로 빠른 의사소통 진행

상세 역할

메인 피드 페이지와 검색 기능 페이지 개발, 프로필 이미지 미리보기 컴포넌트와 하단 NavBar 컴포넌트 생성, 전체적인 기획 및 디자인 작업 담당 (FE 4명)

트러블 슈팅

• Axios instance 생성과 API 분리를 통한 코드 중복 최소화와 가독성 향상

• 검색 값 검증 후 요청 방식 적용으로 불필요한 서버 요청 문제 해결

• base64 인코딩 방식 적용으로 프로필 이미지 미리보기 기능 향상

성과 및 기여

• Git flow를 도입하기 위해 팀원들과 함께 학습하여 프로젝트에 적용

• axios를 이용한 API 통신 방법 및 react 사용 방법 익혀 기능 구현

링크

저장소 링크

멋쟁이 사자처럼 프로그래밍 동아리에서 활동하며 스터디와 프로젝트를 진행했습니다. 리액트 스터디에 참여하여 컴포넌트 라이프사이클 메서드, 그리고 리액트 Hooks에 대한 개념과 사용 예제를 정리하여 발표했습니다. 해커톤에서는 리더로서 팀원의 역할 분담과 회의 진행을 주도하였으며, 프로젝트 기획 단계부터 개발 및 배포까지 참여했습니다. 프로젝트를 통해 협업 능력을 향상시킬 수 있었습니다.