프로젝트 과정2

전에도 느낀 거지만… 기기마다 레이아웃이 다를 때 간단한 구조면 괜찮지만 하단을 div로 묶어버렸는데 다른 기기에선 둘이 완전 다른 방향으로 가버리면 너무 난감하다. 그래서 전에는 html 작성하기 전에 모든 기기 디자인을 파악하고 작성했는데 이번에는 react 자체가 처음이라 막 작성한 내 불찰이었다… 바보같음… 그래서 일 두번 할 예정이다…ㅋㅋ 뭐 괜찮다. 앞으로 생각 하고 하면 되제…

궁금한게 한 페이지 모바일로 작성 후 다른 기기 레이아웃을 조절하는게 좀 더 효율적인 것 같기도 하고… 다음엔 이 순서로 해봐야겠다.

전부다 다시 검토하는 김에 firebase로 연결해야겠다.

전에는 만들기 전에 구조 기획부터 했는데 조급함이 날 망쳤다. 이제부터라도 천천히 해보자.

Suggestions Page

header 부분

board + category + roadmap

• mobile
  • board + menu icon (가로)
  • sideboard -> category + roadmap (세로)
• tablet (가로) -> flex
  • board
  • category
  • roadmap
• desktop (세로) -> flex
  • board
  • category
  • roadmap

mobile -> tablet 할 때 아예 다른 구조로 넘겨주는 게 좋을듯.

폴더 구조

📂 component
└── 📂 sideBoard
    ├── 📄 Board
    ├── 📄 SideBar (menu icon + modal + bg)
    ├── 📂 Category
    |   ├── 📄 CategoryItem
    |   └── 📄 CategoryList
    └── 📂 Roadmap
        ├── 📄 RoadmapContainer
        ├── 📄 RoadmapItem
        └── 📄 RoadmapList

확실히 기획하고 정리하니 좀 더 접근하기 편해졌고 코드도 깔끔해진 것 같다… 기분탓인가? ㅋㅋㅋㅋㅋ 그래도 이렇게 시작하는 것이 좀 더 두 번 일 안하게 하고 효율적인 것 같다.

main 부분

main bar + content

• mobile -> grid
  • main bar : sort + btn
  • content : [ circle + text ] + h3 + p + category + (upvote + comment)
• tablet
  • main bar : suggestions + sort + btn
  • content : upvote + (h3 + p + category) + comment
• desktop
  • main bar : suggestions + sort + btn
  • content : upvote + (h3 + p + category) + comment

tablet과 desktop의 구조는 같다. h3 + p + category 묶어도 될 것 같다. 그리고 mobile에는 suggestions 수 세는 곳이 없다. 그리고 roadmap page에서 디자인 똑같이 사용하지만 tablet, desktop 관계 없이 mobile로 모양이 같다.

📂 component
└── 📂 suggestions
    ├── 📄 MainBar
    ├── 📄 EmptyContent
    ├── 📄 SuggestionsList
    └── 📄 SuggestionsItem

문제 및 해결방안

1. 정렬을 해야 하는데, loaded data를 sort 버튼 클릭하거나 카테고리 버튼 클릭할 때마다 정렬 방식이 바뀌어야 하는데 바뀌긴 하는데 이전에 누른 값으로 정렬이 되는 문제가 생겼다. tag가 바뀌면 전체 데이터가 바뀌어야 하는 건 맞고 sort는 리스트에서 해줄까? 그리고 comment 개수도 가져와야 해서 함수를 따로 만들어야겠다.

-> 시도 : filter는 data를 불러올 때마다 진행하도록 했다. 그리고 sortby는 컴포넌트에 보내줄 때 다른 페이지에 switch 구문을 함수로 작성해서 hook을 불러오도록 했다. 깔끔하고 좋은 것 같다. 아마 위의 문제는 useEffect의 우선순위 문제 같다. 그래서 그냥 sort는 loading이 끝난 후 작동하도록 했다.

---

(22/12/20)
-> 위처럼 하니 tag를 변경할 때마다 재호출 하는 문제가 있었으나 sort 함수에 tag 처리 코드도 같이 넣었다. upvote 버튼이 바뀌지 않는 문제가 발생… -> data를 불러올 때 useEffect 의존성 배열에 upvote id를 넣어줬다. 좀 많이 느리기도 하고… 비효율적인 것 같은데 현재까진 여기까지밖에 모르겠다.

1. PATCH 요청으로 db 일부 수정을 했으나 수정할 때 렌더가 안되는 문제가 발생함

-> 시도 : get할 때 useEffect에 의존성에 loadedData를 추가 해주면 끝! 근데 좀 반응이 느린거 같긴함…!

---

(22/12/20)
-> 위처럼 하면 계속해서 리로드되는 문제가 있었다. 그래서 컴포넌트를 계속해서 불렀는데 업데이트의 경우 detail page 처럼 interval로 해결하면 호출 횟수를 줄일 수 있다.

기억 안났던 것들

grid나 flex의 자식 하나만 고유의 정렬 방식을 가지고 있던 속성이 있었는데 기억이 안났다. align-self로 사용할 수 있다. justify도 가능!