오늘의 이슈 react-router-dom v6 / 카드 정렬

😎 구현 페이지

/beans 페이지

1. 카테고리 필터링 (GET 요청)
2. 원두 검색창 (GET 요청)
3. 원두 카드 리스트업 (GET 요청)

---

🤔 오늘의 이슈

1. react router dom 버전6 새로운 문법 오류

이전 문법

  <NavBar />
  <Switch>
    <Route exact path="/">
      <Main />
    </Route>
    <Route path="/posts">
      <Posts />
    </Route>
    <Route path="/beans">
      <Beans />
    </Route>
    <Route path="/myPage">
      <MyPage />
    </Route>
  </Switch>
</>

최신 문법

      <NavBar />
  <Routes>
    <Route exact path="/" element={<Main />} />
    <Route path="/posts" element={<Posts />} />
    <Route path="/beans" element={<Beans />} />
    <Route path="/myPage" element={<MyPage />} />
  </Routes>
  

---

2. eslint prop types 오류

eslint rules 추가

{
 "extends": ["react-app",
 	     "eslint:recommended",
             "plugin:react/recommended"],
 "rules": { "react/prop-types": ["off"] }
}

eslint prop types 오류

---

3. styled-components

upStream에서 styled-component로 잘못 설정함.

잘못 설치하여 재설치 필요

---

4. beans 페이지 API 회의

bean 페이지 통신 추가

1. GET /bean/all-beans
   - response 양식 공유
   => {
   beanId: 1,
   beanName: '자바',
   origin: '인도네시아',
   fragrance: 4,
   acidity: 2,
   sweetness: 3,
   bitterness: 2,
   body: 4,
   beanImage: '/asset/beans/bean4.jpg',
   desc: '원두에 대한 설명입니다',
   like: true,
   likeCount: 20,
   }
   • cookie에 담긴 accessToken을 기반으로 user를 알아내고, 해당 유저가 좋아하는(like) 표시된 사항을 보내주어야 한다.

2. GET /bean/filter-beans
   • request 양식
     => {params : { fragrance: [2,3], acidity: [3], sweetness: [2,4], bitterness: [], body: [] }
   • resposne 양식 공유(beanAll과 동일)
   • 배열이 빈배열일 경우는 해당 구분은 모두 선택된 것과 동일하게 취급

3. GET /bean/filter-beans?bean=beanName
   위와 동일한 형식으로 응답

---

5. li태그 flex 정렬 문제점 해결

문제 : justify-contents

 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;

시도 : px 계산하여 적용

이렇게 해도 정렬은 되지만, 조금이라도 디자인이 바뀌면 다시 작성해야한다.

   & li {
    display: inline-block;
    margin: 4px;
  }

  & li:not(:nth-child(4n)) {
    margin-right: 20px;
  }

  & li {
    margin-bottom: 20px;
  } 

해결 : grid 사용

 display: grid;
 grid-template-columns: repeat(auto-fill, 250px);
 justify-content: space-between;
 grid-gap: 20px;

참고)
https://travishorn.com/some-ways-to-align-the-last-row-in-a-flexbox-grid-720f365dcb16

---

내일 할 일

1. 원두 카드 리스트 디자인 마무리
2. 원두 카드 디자인
3. 원두 카드 구현
4. like 구현
5. unlike 구현