feat: Next / TypeScript / React Query / Zustand / Vanilla Extract를 사용하여 Real World 1차 기능 구현을 완료합니다.

[hyeon9782]

📌 이슈 링크

• close #

📖 작업 배경

• Next.js / TypeScript / React Query / Zustand / Vnilla Extract를 사용하여 Real World를 구현했습니다.

🛠️ 구현 내용

• useArticles 커스텀 훅을 통해 Article 조회 기능 구현 (Global / Feed / Tags / My / Favorited), 좋아요, 좋아요 취소 기능 구현
• Article 등록, 수정, 삭제 기능 구현
• 댓글 조회, 등록, 삭제 기능 구현
• useProfile 커스텀 훅을 통해 Follow , UnFollow 기능 구현
• useAuth 커스텀 훅을 통해 계정 관련 기능 구현 (Login, Logout, Signup)
• 회원 정보 수정 기능 구

💡 참고사항

• cookies를 httpOnly로 사용하라고 하셔서 route handler를 통해 구현했는 데 더 좋은 방법이 있을까요?
• Error 처리는 어떤식으로 하는 것이 효율적으로 하는 것인지 모르겠습니다. 현재 생각나는 방식은 http 모듈에서 error 또는 status 값이 error 코드가 넘어오면 Error를 throw 하여 React Query의 onError 또는 error를 통해 처리하는 것입니다.
• axios 대신 fetch를 사용하고 있습니다. Client Side에서 호출하는 것과 Server Side에서 호출할 때 BASE_URL이 달라지는 데 하나의 http 모듈을 사용하는 것이 맞는지? 현재는 Server Side에서 fetch를 사용할 때만 사용하고 있습니다.
• 아 그리고.. Next.js를 사용할 때 속도가 심각하게 느린 거 같은데 혹시 이거 저만 그런건가요..? React에서는 이런 속도가 아니였는 데 제가 설정을 잘못 건드린 건가 싶지만 딱히 뭘 한 게 없어서 왜 이런지 모르겠네요.
• 원래는 리팩토링을 해서 깔끔하게 PR을 올리고 싶었지만 아직 너무 부족해서 제가 하고 있는 것들이 맞는 방향인지 판단을 못하겠네요.. 인성님 말씀대로 일단 올려봅니다.
• 해당 프로젝트에 사용했던 모든 기술 스택은 다 처음 사용해보는 것이기 때문에 제가 구현하는 방식이 맞는 방식인지 모르겠습니다. 진짜 사소한 것부터 구조적인 부분까지 더 개선할 부분이 있다면 말씀해주시면 열심히 고쳐보겠습니다. 감사합니다.

아래는 스터디가 끝나고 개인적으로 진행하고 싶은 부분입니다.

• cookies 넣는 부분 util 함수로 빼기
• route handler Response 일관성 있게 통일하기
• Error Message에 따라 알맞은 에러 처리
• 사용하지 않는 함수들 제거하기
• 좋아요 & 팔로우 버튼
  • Optimistic Updates를 활용한 사용자 경험 향상
  • 일관된 UI를 위해 button 크기 고정 (좋아요 수가 99개가 넘어갈 경우 99+로 표시)
• ArticlePreview
  • 제목 크기 고정 및 크기를 넘어가면 ... 처리
  • 한 번 봤던 게시글 표시하기 (체크 표시 또는 배경색을 다르게)
• alert을 사용하지 않고 Dialog 컴포넌트 구현
• 페이지 별 스켈레톤 UI 적용
• Vanilla Extract 기능을 활용하여 CSS 정리 (급하게 하느라 너무 막 짠 거 같습니다..)
• 테스트 코드 추가

🖼️ 스크린샷