안녕하세요 개인 테크 블로그 코드리뷰 부탁드립니다 !!!

코드 좀 봐주세요 코드종
#1

안녕하세요 코드종님 우연히 페이스북 그룹에서 뵙게 되어 글 남깁니다!
개인 테크 블로그를 토이 프로젝트로 진행중인데요,
평소에 리코일만 주로 쓰다가 리덕스를 실제로 프로젝트에서는 적용해본 적이 없어서
이번 프로젝트에 리덕스를 한번 써보자! 해서 리덕스를 이용해 프로젝트를 진행중입니다.
다만 아직 리덕스에 대한 이해도가 부족한 상태에서 코드를 짜다 보니 제가 정확히 잘 하고 있는지 잘 모르겠습니다.
코드는 다음 링크에 있습니다.!

추가 질문 드리겠습니다!

  1. 파이어베이스를 사용하고 있는데, 파이어베이스에서 데이터를 불러올 때 최근 날짜 순으로 정렬하고 싶은데,
    이번에 파이어베이스가 버전 업데이트를 하면서 좀 많이 헷갈리더라고요. 아마 파이어베이스 내장 메서드 중 최근 시간 순으로 정렬하는 기능이 있을 듯 한데… 아직 잘 확인이 안되서 임의적으로 배열.reverse()를 사용하고 있습니다.
    이러한 기능을 구현할 시 더 좋은 코드 구현 방법은 어떻게 될까요?

  2. 포스트 디테일에 이전글, 다음글 버튼을 만들고 싶은데, 이 버튼을 클릭하면 바로 이전 혹은 다음 글로 이동이 되게끔 구현하고 싶습니다. 또한 이전 글이 더이상 없거나 다음 글이 더이상 없을시에는 버튼이 비활성화되거나 보이지 않게 구현을 하고 싶습니다. 이러한 버튼을 구현하기에 베스트 프렉티스가 무엇인지 궁금합니다

  3. 코드를 보시면 아시겠지만 redux-thunk를 사용하고 있습니다. useSelector만을 사용하다가 reselect라는 라이브러리를 알게 되어서 reselect를 이용한 createSelector를 현재 적용시켜놓았는데요, 아무런 필터없이 그냥 기존의 데이터만 받아올 시에는 굳이 사용하는 것과 안사용하는 것의 차이가 없는 듯 한데… 현재 redux-thunk를 사용하여 api를 받아오는 코드가 어떠한 지 리뷰해주시면 감사하겠습니다 …!!

  4. 간단한 질문인데, 현재 제 폴더 구조에 대해서 어떻게 생각하시는지, 폴더 구조의 베스트 프렉티스는 무엇일지 간략하게 얘기해주신다면… 많은 도움이 될 것 같습니다

감사합니다 :smiley:

좋아요 1
#2

안녕하세요 반갑습니다. 메리 크리스 마스 :santa:
:wink: 이렇게 코드와 질문 남겨주셔서 감사해요!

일단 소스를 받아서 실행해보니 다음과 같은 에러가 났고 살펴보니 파일명 대소문자가 잘못 들어가있었습니다…

./src/components/SideBar/index.tsx
Cannot find file: 'SideBar.tsx' does not match the corresponding name on disk: './src/components/SideBar/Sidebar.tsx'.

질문하신 내용에 하나씩 답변해봅니다.

  1. 제가 파이어베이스를 제품 만들 때 직접 사용해보진 않았습니다. 그래서 데이터를 불러올 때 정렬은 반드시 반드시 있을 겁니다. 개수가 적고 고정이라면 클라이언트에서 정렬해서 사용해도 큰 문제가 되지 않겠지만 게시글 처럼 계속 개수가 늘어날거라면 이런 임시 방편은 금방 문제가 되겠죠? 그러니 정렬 방법을 찾아보시고 정렬된 상태로 서버에서 받아서 사용해보세요.
  2. 포스트 디테일이 완전히 독립된 페이지라면 해당 페이지의 컴포넌트에서 이전글 다음글이 있는지 API를 통해 확인해서 표시해줄 수 밖에 없습니다. 화면안에 목록과 디테일이 함께 보여지는 구조라면 화면의 목록 데이터를 활용해서 detail을 뿌려주는 component에 이전 글과 다음 글에 id정도를 함께 prop으로 넘겨주는 방식으로 만들 수 있겠습니다.
  3. 예전에는 redux를 사용하다가 리덕스를 사용하지 않은지 오래되었습니다. 답변 드리지 않는 점 양해바랍니다. 저는 서버에서 가져온 데이터를 관리할 목적이라면 react-query나 graphql 일 경우 relay를 이용한 상태관리를 추천합니다. 그외에 앱 내부에서 여러군데서 사용되는 상태를 관리해야하는 경우라면 react에서 제공하는 Context 혹은 recoil등올 사용해서 custom hook을 만들어서 사용합니다. 상태를 다루는 로직이 존재하는 경우 각 컴포넌트에서는 Context나 recoil 코드를 직접 작성하기 보다는 custom hook으로 만들어서 사용합니다.
  4. 저는 폴더 구조에서 index.tsx 같은 파일을 잘 쓰지 않습니다. 요즘 에디터들이 import를 자동으로 잘해주니 한단계를 더 만들필요가 없어 보입니다. 아주 복잡한 컴포넌트의 경우에는 그럴 수 있지만 시작부터 모든 컴포넌트에 대해서 별도의 풀더를 만들고 그 안에 index.tsx 를 만들고 원래 코드를 index.tsx에서 임포트 하는 건 불필요하게 손만 더 번거로운 일이라고 생각합니다. 만드신 ProjectItem.tsx 파일 처럼 componets 폴더 안에 파일로 먼저 만들다가 해당 컴포넌트의 덩치가 커져서 그 내부에서 새용되는 별도의 파일들이 많아질 경우 그 때가서 폴더로 변경하는 방법을 사용합니다.

혹시 부족한 답변일지 모르지만 도움이 되길 바랍니다. 제 답변에서 잘못된 내용이 있거나 다른 의견 있으신 분들은 언제든지 답글로 알려주세요. 언제나 환영이고 감사할 뿐입니다. ㅎㅎ

그럼 오늘도 즐거운 코딩하세요~ :slight_smile: