[x] Router 설정
[x] 각 컴포넌트, 폴더 구성(IA)
[x] CSS 설정
[x] 웹폰트
[x] api 설정
[x] Header, Footer, Loading, 404
[x] 각 페이지 ui + 반응형 작업
[ ] Helmet
[ ] Page Scroll Event
[ ] Deploy
componets에서 Section 별로 관리하면 좋다.
Home에서 Section 별 작업 후 분리작업
try catch finally 문법
상수 사용시 대문자 변수 처리 => 이미지경로, 배열경로
API 호출 완료 체크하여 React Spinners 로딩 애니메이션처리
잘못된 페이지 이동시 404 디자인 검색 후 페이지 처리
TMDB에서 이미지의 두가지 형태 확인 및 사이즈 확인
샘 : https://refindr.site 관련사이트 URL 저정후 코멘트 작성가능
Swiper 사용해서 메인화면 슬라이더 이용 및 반응형 소스 작업 필요
리엑트 사용예)
// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';
// Import Swiper styles
import 'swiper/css';
export default () => {
return (
<Swiper
spaceBetween={50}
slidesPerView={3}
onSlideChange={() => console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)}
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
...
</Swiper>
);
};
[x] 각 컴포넌트, 폴더 구성(IA)
[x] CSS 설정
[x] 웹폰트
[x] api 설정
[x] Header, Footer, Loading, 404
[x] 각 페이지 ui + 반응형 작업
[ ] Helmet
[ ] Page Scroll Event
[ ] Deploy
componets에서 Section 별로 관리하면 좋다.
Home에서 Section 별 작업 후 분리작업
try catch finally 문법
상수 사용시 대문자 변수 처리 => 이미지경로, 배열경로
API 호출 완료 체크하여 React Spinners 로딩 애니메이션처리
잘못된 페이지 이동시 404 디자인 검색 후 페이지 처리
TMDB에서 이미지의 두가지 형태 확인 및 사이즈 확인
샘 : https://refindr.site 관련사이트 URL 저정후 코멘트 작성가능
Swiper 사용해서 메인화면 슬라이더 이용 및 반응형 소스 작업 필요
리엑트 사용예)
// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';
// Import Swiper styles
import 'swiper/css';
export default () => {
return (
<Swiper
spaceBetween={50}
slidesPerView={3}
onSlideChange={() => console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)}
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
...
</Swiper>
);
};
#리엑트 작업순서 5