유튜브블로그Top 10
내 프로필

데브허브 안내
소개업데이트 소식

데브허브 커뮤니티

[FE] 리액트 - 48강: 프로젝트 디테일 및 완성도 높이기

구디사는 개발자 9Diin

2025. 10. 9.

0

#frontend
#db
  • div 태그로 구성된 헤더 메뉴를 Link 컴포넌트로 변경하고, 메인 페이지 라우팅을 설정하여 사용자 경험을 개선했습니다. 🔗
  • 새로운 Portfolio 페이지를 생성하고 라우팅 설정을 완료하여 웹 서비스의 콘텐츠 영역을 확장했습니다. 📂
  • NewTopicCard 컴포넌트에 마우스 오버 시 포인터 변경 효과를 추가하여 사용자 상호작용을 직관적으로 만들었습니다. 👆
  • 상세 페이지 스크롤 시 헤더와 뒤로 가기 버튼이 겹치는 문제를 헤더의 z-index 값을 높여 해결하여 UI 가시성을 확보했습니다. 🧱
  • 하드코딩된 작성자 이름을 실제 사용자 이메일로 대체하기 위해 user 테이블에 email 컬럼을 추가하고, authorId를 기반으로 사용자 이메일을 조회하는 비동기 함수를 구현했습니다. 📧
  • user 테이블 조회 시 발생했던 빈 배열 문제를 Supabase의 RLS(Row Level Security) 정책을 설정하여 해결하고, 데이터 접근 권한을 명확히 했습니다. 🛡️
  • 조회된 이메일 주소에서 '@' 기호 앞부분만 추출하여 표시하고, 필요에 따라 "님"과 같은 접미사를 추가하는 등 사용자 친화적인 형식으로 가공했습니다. ✂️
  • 배포 전 디테일한 UI/UX 개선과 데이터 연동 로직 보완을 통해 웹 서비스의 전반적인 완성도와 사용자 경험을 높였습니다. ✨

Recommanded Videos