인터넷 카페 혹은 블로그 등을 방문해보면, 게시물을 작성하든 혹은 열람하든지 항상 고정되어 있는 레이아웃이 존재한다.
이번에는 게시판 프로젝트에 레이아웃 구조를 적용해봤다.
과정은 아래와 같다.
-
먼저 고정할 레이아웃의 영역을 나눈다.
Header, Banner, Navigation -
각 컴포넌트를 생성 후 니즈에 맞게 코드를 작성한다.
-
각 레이아웃 요소가 합쳐진 컴포넌트를 생성한다.
-
_app.tsx에 해당 컴포넌트를 import해서 사용한다.
폴더 구조
컴포넌트 구조
_app.tsx
캐러셀(Carousel) 활용
캐러셀(Carousel)이란?
한 영역에서 슬라이드 형태로 하나 이상의 이미지를 볼 수 있는 콘텐츠 또는 페이지를 말합니다.
이미지가 전환되는 움직임이 마치 '회전목마(Carousel)'를 닮았다고 해서 붙은 이름입니다.
캐러셀을 사용할 수 있는 다양한 방법들이 있지만
react-slick 라이브러리를 사용했다.
최종 작업물
문제 발생 및 해결 ✔️
~은 JSX 구성요소로 사용할 수 없습니다.
이 문제를 해결하는 데에 3~4시간을 할애했다..
문제는 내 리액트 버전과 react-slick 라이브러리의 리액트 버전이 달라서 일어난 일이였다.
react-slick 라이브러리를 만든 사람도 react를 기반으로 만들었기 때문에, 최신 버전이다.
그러나, 나는 17.0.2버전을 사용하고 있었기 때문에 호환되지 않아서 오류가 발생했다.
또한, 타입스크립트를 이용하고 있기 때문에 @types/react-slick을 추가 설치해줘야 한다.
이 모든 것을 재설정 해주기 위해 아래와 같이 CLI를 입력한 후 문제를 해결했다.
yarn add @types/react@17.0.2추가할 부분
지금까지는 레이아웃 UI만 만든 상태이기에,
각 버튼(태그)들을 클릭했을 때 해당하는 페이지로 이동할 수 있도록 구현해야한다.
또한, 네비게이션 바에 보고 있는 페이지 태그에 진한 검정 글씨로 바뀌도록 구현해줘야한다.
