🤓 Introduction

안녕하세요😃

사용자 경험을 중심으로 product를 개선하는 일을 좋아합니다.

활발한 코드리뷰와 피드백 반영을 통해 코드를 개선하는 일에 관심이 많습니다.

영어를 좋아하며, 원문 레퍼런스를 통해 새로운 지식을 부담없이 흡수할 수 있습니다.

Contact & Channel

• Github | **https://github.com/DomMorello**
• Blog | **https://velog.io/@dom_hxrdy**
• Email | [email protected]

[Team Project] 회고덕

프로젝트 소개

개요

기간

참여 인력

프론트엔드 기술스택

회고덕은 함께 회고하고, 회고를 공유하는 회고 전용 플랫폼입니다.

• 테크코스에서 진행하는 회고 기록이 분산되어 있고 제대로 공유되지 않는 문제에 착안해 시작한 프로젝트입니다.
• Github 계정을 통해 로그인 할 수 있으며 회고 질문지 생성, 회고 작성, 회고 템플릿 공유 등을 통해 다른 사람들과 회고를 공유하고 기록할 수 있습니다.
• GitHub | **https://github.com/woowacourse-teams/2022-review-duck**
• 서비스 | https://ducks.kr

2022.07 - 2022.11

프론트엔드 2명 / 백엔드 4명

HTML/CSS, Typescript

React, React-query, Recoil, Axios

Sass, CSS module

Nginx, Webpack

Cypress, MSW, Storybook

기능 구현

1. 사용자 체감 로딩 속도 최소화를 위한 PageSuspense 컴포넌트 구현

[문제 상황]

• 페이지 이동간 Suspense fallback 컴포넌트를 지정해주지 않아 로딩시간 동안 흰 화면을 보게 되어 사용자 경험이 좋지 않은 문제가 있었습니다.

[해결 과정]

• 타 서비스를 참고하여 현재 페이지가 전체적으로 흐리게 렌더되면서 헤더 상단에 프로그레스바가 로딩 상태를 보여주는 뷰를 보여주려고 했습니다.
• 이를 위해 현재 페이지 컴포넌트를 ref에 담아 저장하고 context API 를 활용하여 다음 페이지를 로드하는 과정에서 Suspense의 fallback 컴포넌트로 주입하여 해결했습니다.
• 이 역할을 하는 PageSuspense라는 컴포넌트를 구현해 페이지 레이아웃 레이어에서 모든 페이지에 대해 공통적으로 Suspense를 적용했습니다.

[구현 UI]