맛집 뉴스피드 프로젝트 마무리 및 KPT회고

오늘은 뉴스피드 팀프로젝트의 발표날이다!

따라서 어제는 트러블 슈팅을 진행하였다. 3가지 오류를 발견하였는데 그 부분에 대해서 블로그에 담아보겠다!

 

1. 배포 시, SVG 이미지 파일이 깨지는 문제

2. 수정 완료 후 마이페이지 네비게이션 문제

3. 로그인 페이지에서 뒤로가기 버튼의 위치 문제

 

 

.

.

.

 

 

1. 배포 시, SVG 이미지 파일이 깨지는 문제

 

문제 설명: React 프로젝트를 Vercel로 배포할 때, SVG 이미지 파일이 제대로 렌더링되지 않고 깨지는 현상이 발생했다. 이는 주로 상대경로로 설정해서 문제이거나 스타일드 컴포넌트 사용시 동적 이미지 스타일링을 해서 문제점이 발생할 수 있다.

 

해결 방법: Lucide 아이콘 라이브러리 사용

 

 이 문제를 해결하기 위해 Lucide 아이콘 라이브러리를 사용했다. Lucide는 SVG 아이콘을 React 컴포넌트로 제공하여 쉽게 사용할 수 있게 해준다.

 

사용 방법:  라이브러리를 설치하고 임포트해와서 사용해주면 된다.

yarn add lucide-react

import { Camera, Heart, Coffee } from 'lucide-react'

function MyComponent() {
  return (
    <div>
      <Camera />
      <Heart color="red" />
      <Coffee size={48} />
    </div>
  )
}

 

 

 

2. 수정 완료 후 마이페이지 네비게이션 문제

문제 설명: 사용자가 정보를 수정하고 useNavigate 훅을 사용해 마이페이지로 자동으로 이동된 후, 브라우저의 뒤로 가기 버튼을 누르면 다시 수정페이지로 이동하는 문제가 있었다. 이는 사용자 경험을 해칠 수 있다.

 

해결 방법: "replace: true" 사용

 

 이 문제를 해결하기 위해 React Router의 navigate함수에 replace: true 라는 옵션을 사용했다. 이 옵션은 현재 페이지 기록을 남게하지 않는 것이다. 따라서 뒤로가기 버튼을 누르면 수정페이지의 기록이 없기 때문에 Home으로 돌아갈 수 있다.

import { useNavigate } from 'react-router-dom';

function EditProfilePage() {
  const navigate = useNavigate();

  const handleSubmit = async (e) => {
    e.preventDefault();
    // 수정 로직 처리
    // ...

    // 마이페이지로 리디렉션
    navigate('/mypage', { replace: true });
  };

  // ...
}

 

이렇게 하면 사용자가 수정을 완료한 후 마이페이지로 이동했을 때, 뒤로가기를 눌러도 수정 페이지로 돌아가지 않는다.

 

 

 

3. 로그인 페이지 back 버튼 위치 문제

 

문제 설명: 화면 비율에 따라 버튼 위치가 바뀌는 문제가 있었다. 이는 반응형 디자인을 적용하면서 발생한 의도치 않은 결과였다.

 

해결 방법: relative와 absolute 포지셔닝 사용

 

 이 문제를 해결하기 위해 CSS의 position 속성을 활용했다. 퍼센트(%) 기반의 위치 지정 대산 relative와 absolute 포지셔닝을 사용하여 버튼의 위치를 고정했다.

.login-container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.back-button {
  position: absolute;
  top: 20px;
  left: 20px;
}

 

이렇게 설정하면 back 버튼이 항상 로그인 컨테이너의 왼쪽 상단에 고정되어 화면 비율 변화에 영향을 받지 않게 된다.

 

 

 

 

.

.

.

 

 

 

 

이렇게 트러블 슈팅을 통해 세개의 오류를 해결할 수 있었다. 이것이 끝나고 다음으로는 발표 준비를 하였다. 나는 그 중에서 시연 영상 제작을 맡았다. 5~10분 정도의 시연 영상에 프로젝트 핵심 기능과 화면 구동 및 기능 동작 여부를 확인할 수 있게 영상을 만들어야한다.

 

 

 

 

# 시연 영상

내가 만든 시연 영상

 

 

 

# KPT 회고

Keep - 현재 만족하고 있는 부분

• 필수 구현 사항 모두 완료!
• 로그인 / 회원가입 및 접근 제어 시스템 구현
• 실시간 맛집 피드 및 검색 기능 구현
• 게시글 CRUD 기능 완성
• 프로필 관리 기능 (사진, 닉네임, 한줄 소개) 구현
• 기한 내 프로젝트 완료!
• 원만했던 협업 과정 !! (충돌이 진짜 안 일어남……신기할 정도….이게 왜 돼조?….😄)

Problem - 불편하게 느끼는 부분

• 디테일 댓글 기능을 구현하지 못해 사용자 상호작용 제한
• 지역 필터링이 5개로 제한되어 있어 확장성 부족
• 추가 기능 구현 사항 실행하지 못함
• login 페이지에서 새로 고침 시 라우팅 오류로 사용자에게 흰 화면 표시 되는 문제 해결하지 못 함
• 메인 페이지 로딩 시 데이터가 없는 부분이 보여짐
• 내 게시글 삭제 요청 시 Swal 이중 적용 😅

Try - Problem에 대한 해결책, 당장 실행 가능한 것

• 뉴스피드에서 댓글 기능은 중요한 것 같아 다음 프로젝트에서는 넣어야겠다고 생각함!
• 라우팅 설정 할 때 기존에 배웠던 라우팅 방식이 아닌 챌린지반에서 진행한 라우팅 방식으로 변경됨에 따라 react-router-dom의 createBrowserRouter의 공부가 필요하다고 생각함!
• 데이터 로딩 loader, defer를 활용하여 데이터를 받아오고 나서 보여주게 해준다 (챌린지 6회차 수업)
• 여러 라이브러리 활용해보기!
• 팔로우 기능 주말에 구현해볼것^^!