백엔드-리액트

리액트 시작하기

강사: 한개발 · 작성자: 이종춘 · 작성일: 2026-07-16 13:22:36 · 조회수: 14

리엑트 작업순서 5
목록으로
[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>
);
};
#리엑트 작업순서 5

첨부 파일

0개
첨부된 파일이 없습니다.

댓글 / 답글

0개
댓글을 작성하려면 로그인하세요.
아직 댓글이 없습니다.