금일 한 일
✔️ 메인페이지 디자인 70%
어떻게든 형태는 갖춰보자는 마인드로 열심히 달렸다...
메인 페이지는 vw, vh가 각각 100인
4개의 페이지로 구성이 되어있다.
큼직 큼직한 느낌이 페이지의 뽀인트다.
(1. 캐러셀 오토 플레이, 가운데 음식 카테고리 추천 버튼이 있음.)
(2. 1에서 눌러진 버튼에 따라 데이터가 다르게 보여짐)
(3. 즐겨찾기가 가장 높은 음식점 순서대로 정렬)
(4. 누적 리뷰를 가로스크롤로 볼 수 있음. 횡한 윗 부분에는 뭐로 채워야할까..)
-
Swiper 라이브러리 사용
👉🏻 캐러셀, 가로스크롤 구현 -
AOS 라이브러리 사용
👉🏻 이미지 날라오는 효과 넣음 -
StyledComponent 재활용
👉🏻 2번째 페이지의 컴포넌트를 3번째 페이지에서 재활용 했다.
// 스타일드 컴포넌트 생성
export const Compo = styled.section`
display : flex;
...
`;
// 불러와서 재활용하기
import {Compo} from '..';
const NewCompo = styled(Compo)`
align-items : end;
...
`; 아직은 효율적이게 활용하지 못하고 있는 것 같다.
숙련도만 높아진다면, 아주 편하고 재미있게 사용할 수 있을 것 같다.
❗️ Json-server 데이터 불러와서 사용하기
이 부분이 좀 문제다...
이 부분이 좀 많이 문제다...
이 부분이 아주 많이 문제다...
서버에서 데이터를 가져와서 가공하는 것이 미숙하다.
const [isData, setIsData] = useState([]);
useEffect(()=>{
axios.get(서버주소).then(res=>setIsData(res.data));
}, [])다음과 같이 데이터를 받아오고 직후에는 괜찮지만,
필터를 돌리거나 리렌더를 계속 하면 에러가 발생한다.
해서, 목표는 얼른 디자인을 마무리하고
데이터를 가공해서 잘 활용하는 것에 집중하려고 한다.
조건에 따라 다른 데이터를 보여줘야하는 기능을
많이 구현해야 하기 때문에,
관련해서 공부를 집중적으로 해야 한다.
내일 할 일
폴더/파일 컴포넌트 정리
👉🏻 데이터를 넣어서 테스트 해볼 수 있게, 독립적으로/깔끔하게 잘 나눠놓기.
현재는 2번째 3번째 페이지가 연결되어 있어서, 분리해야한다.
useEffect 등 데이터 학습
👉🏻 데이터 관련 에러가 계속 발생하여, 관련하여 학습을 진행하려 한다.
- 데이터를 서버와 주고 받는 개념
- response, request 개념
- 학습 진행 후, 데이터 잘 넣어보기.
