🍽 기획의도

✨ 데모 사이트

https://mukdaejang-3b8e6.web.app/

📆 프로젝트 기간

2022.03.08 ~ 2022.03.31

👨‍💻 팀원

김민성 김효식 원종빈 조용우

📚 기술스택

😥 개선 전

• tab focusing 불가능
• 프로필 이미지 상태값 새로고침 시 초기화되어 깜빡거림
• 프로필 아이콘 클릭 시 드롭다운 닫기 버튼 없음 , 개별 삭제 불가능
• 부적절한 로그아웃의 위치
• semantic tag 미사용

🤩 개선 후

• 키보드로 tab focusing 가능
• 새로고침 시 프로필 이미지 깜빡거리지 않음
• 프로필 아이콘 클릭 시 드롭다운 닫기 버튼 추가 , 개별 삭제 가능
• 로그아웃 위치 변경
• semantic tag를 사용한 semantic markup
• SEO 향상

프로필 사진 깜빡임 문제

👎 기존 망고플레이트	👍 먹대장

드롭다운 닫기 버튼 ❌ & 개별 삭제 불가능 & 로그아웃 버튼

👎 기존 망고플레이트	👍 먹대장

스켈레톤 UI 적용

👎 기존 망고플레이트	👍 먹대장

|

Tabable 접근성 문제 개선

👎 기존 망고플레이트	👍 먹대장

리팩토링

불필요한 렌더링 방지(React.memo)

👎 이전 먹대장	👍 현재 먹대장

렌더링 성능 개선(Lazy Loading(code Spliting), useCallback)

👎 이전 먹대장	👍 현재 먹대장