hediar / koriniproject Goto Github PK

발표 피드백

1. 라이브러리 사용 이유를 잘 정리하셨습니다. 실제 회사에서도 본인이 사용하는 기술의 이유를 명확히 해야합니다. 생각없이 라이브러리를 사용한다면 다른 개발자들에게 해당 기술의 필요성에 대한 질문을 받게 될 겁니다. 기술의 사용으로 다른 개발자들이 학습해야할 것들이 늘어나거나, 용량 문제가 생길 수도 있기 때문입니다.
2. 전체적으로 기본적인 CRUD 기능을 잘 구현하셨습니다.
3. 페이지네이션 및 무한 스크롤 등 다양한 페이지네이션 기능을 잘 구현하셨습니다.
4. 트러블 슈팅을 잘 정리하셨습니다. token 문제가 있으셨던 것 같은데요. 아마 로그인이 자꾸 풀리는 이유는 refresh token을 활용하지 못한 것이 아닐까라는 생각이 듭니다.

코드 피드백

1. main 폴더에 Siginin, Signup 파일이 있는데, 폴더명과 파일명의 상관관계가 없어 혼란을 일으킬 것 같습니다.
2. Chatbot.tsx에서도 react query 쓰면 편하게 할 수 있는데 굳이 loading state를 만들 이유가 있을까요? react-query를 사용한다면 해당 기능을 활용하여 코드를 간결하게 하는 것이 좋을 것 같습니다. 코드의 통일성도 유지하구요.
   

   KoriniProject/src/components/chatbot/ChatBot.tsx

   Line 14 in 9c84f73

   const [loading, setLoading] = useState(false);

3. react-query의 useQuery 쿼리키에 [’post’]로 쓰면 좋지 않습니다. query key로 똑같은 데이터를 요청하는지 확인하는데요. 쿼리키가 똑같으면 그냥 캐싱되어 있는 애를 가져오기 때문에 의도치 않은 버그를 유발할 수 있습니다. 상세 페이지에 들어가면 매번 아이디가 다를텐데 id도 다음과 같이 넣어주면 좋을 것 같습니다. [’post’, id]
   https://github.com/Hediar/KoriniProject/blob/9c84f739eae9c7a8be8b62191bcc0fff62007043/src/components/detail/Post.tsx#L35C100-L35C100

헤더에 버튼 생성하기
데이터별 무한 스크롤 구현하기

게시판1에서 쓴 댓글은 게시판1에서만 보이게

로그인을 하고 url을 이동하거나 새로고침되면 로그인 세션이 유지되지 않고 로그인이 풀리는 이슈가 있습니다!

같이 작업하면서 Auth.tsx 컴포넌트에 있던 내용을 SignIn, SignUp 컴포넌트로 분리해서 작업해서 Auth.tsx 컴포넌트가 불필요해진 것 같아용
나중에 코드 정리할 때 까먹을까봐 이슈에 남겨둡니당

console.log 경고메시지

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `Mainposts`. See https://reactjs.org/link/warning-keys for more information.
    at Mainposts (http://localhost:3000/static/js/bundle.js:1583:81)
    at div
    at Main
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:61447:5)
    at Routes (http://localhost:3000/static/js/bundle.js:62079:5)
    at Router (http://localhost:3000/static/js/bundle.js:62017:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:60120:5)
    at Router (http://localhost:3000/static/js/bundle.js:4172:61)
    at QueryClientProvider (http://localhost:3000/static/js/bundle.js:79015:3)
    at App (http://localhost:3000/static/js/bundle.js:44:76)
    at Provider (http://localhost:3000/static/js/bundle.js:57559:3)

import { Outlet, Navigate } from 'react-router-dom';
import { useAppSelector } from '../hooks';
import { RootState } from '../redux/config/configStore';

const PrivateRoute = () => {
  const { user } = useAppSelector((state: RootState) => state.user);
  return user ? <Outlet /> : <Navigate to="/" />
};

export default PrivateRoute;

private route 관련 이슈

• 로그인 된 유저가 있을 때에도 주소창에 직접 /write나 /mypage를 입력하여 접근하려고 하면, main('/')으로 튕겨져 나오는 현상
  • 원인 : private route 여부를 판단하는 user 상태를 rtk store에서 받아오기 때문에, url에 직접 입력하면 페이지가 새로고침되어 store에서 user를 바로 받아오지 못하고 user가 없는 것으로 인식하고 메인 페이지로 튕겨져나옴
  • 해결방안 모색 : localstorage에 auth-token값을 getItem해서 auth-token값의 유무로 판단하려고 하였으나, supabase의 경우 auth-token의 key값이 주기적으로 바뀌기 때문에, 이 바뀌는 토큰값을 어떻게 가져와야할지 해결 방안을 찾지 못해서 최종적으로는 이 문제를 해결하지 못함

로그인 모달에서 -> 회원가입 버튼 클릭 후 회원가입 모달창 닫고 다시 로그인 버튼 누르면,
로그인 모달이 보이는게 아니고 회원가입 모달이 렌더링됩니다!