[DAY - 80] #1 React-router clone-coding

2023. 6. 27. 21:19·🔥 부트캠프-웹 개발 🔥/React

react의 router를 연습하기 좋은 웹 사이트를 클론코딩했다.

 

https://www.tamraev.com/

 

탐라는전기차

제주 여행을 준비하는 당신에게 필요한 전기차의 모든 정보와 꿀팁!

www.tamraev.com

 

 

1) 구조 설계

src	┌	assets	┌	api	┌	main.js
	│		│		└	notice.js
    	│		└	css	─	reset.css
    	├	components	┌	Header.jsx
    	│			├	Footer.jsx
    	│			└	Popup.jsx
    	├	pages	┌	Home.jsx
    	│		├	Info.jsx
    	│		├	NoticeLayout.jsx
    	│		├	NoticeList.jsx
    	│		├	NoticeDetail.jsx
    	│		├	Privacy.jsx
    	│		└	Terms.jsx
    	└	styled	─	Global.js

 

styled-components를 사용할 것이기 때문에 따로 css나 scss폴더는 만들지 않았다.

Global.js에는 공통으로 사용될 style들을 작성했다.

 

 

2) 컴포넌트 Router 작업

const App = () => {
  return (
    <>
      <div id='wrap'>
        <HashRouter >
          <Header />
          <Routes>
            <Route path='/' element={<Home />} />
            <Route path='/info' element={<Info />} />
            <Route path='/terms' element={<Terms />} />
            <Route path='/privacy' element={<Privacy />} />
            <Route path='/electronicList' element={<ElectronicList />} />

            <Route path='/noticeList' element={<NoticeLayout />}>
              <Route index element={<Noticelist/>}/>
              <Route path=':id' element={<NoticeDetail />} />
            </Route>
          </Routes>
          <Footer />
        </HashRouter>
      </div>
      <GlobalStyle />
    </>
  );
};

notice
notice

 

notice 페이지의 경우 header와 footer 외에도 JEJU 전기차 관력 소식 부분이 항상 나오기 때문에 layout, outlet을 사용했다.

 

const NoticeLayout = () => {
    return (
        <ContainerNoticeLayout>
            <div id="container">
                <div className="inner">
                    <h3>JEJU 전기차 관련 소식</h3>
                    <p className="sub_tit">제주도의 전기차 관련 정보와 다양한 관광 소식을 확인해보세요.</p>
                    <Outlet />
                </div>
            </div>
        </ContainerNoticeLayout>
    );
};

 

 

3) header

header

 

header 부분에 이미지 swiper를 추가해 주었다.

 

import { Navigation, Scrollbar, A11y, Autoplay } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

 

라이브러리를 추가하고 추가하고자 하는 기능에 대한 css도 import 했다.

 

  <Swiper
              modules={[Navigation, Scrollbar, A11y, Autoplay]}
              spaceBetween={50}
              slidesPerView={1}
              navigation
              pagination={{ clickable: true }}
              scrollbar={{ draggable: true }}
              autoplay={true}
              onSwiper={(swiper) => console.log(swiper)}
              onSlideChange={() => console.log('slide change')}
            >
              <SwiperSlide>
                <img src="./img/gnb_slider_1.jpg" alt="" />
              </SwiperSlide>
              <SwiperSlide>
                <img src="./img/gnb_slider_2.jpg" alt="" />
              </SwiperSlide>

 

추가로 확인을 해 보니 메인 페이지와 서브페이지에서 header의 class가 변경이 되고 logo파일도 변경이 되었다.

 

home
info

 

이 부분을 해결하기 위해 페이지 별로 다른 class와 파일이 설정되도록 작성했다.

 

 const location = useLocation();
  const headerClass = location.pathname === '/' ? '' : 'blue';
  const logoClass = location.pathname === '/' ? '' : '_b';
      <header className={`${headerClass} ${isOpen ? 'total_open' : ''}`}>
        <div className="inner">
          <h1>
            <Link to='/'>
              <img src={`./img/logo${logoClass}.png`} alt="탐라는 전기차" />
            </Link>
          </h1>
'🔥 부트캠프-웹 개발 🔥/React' 카테고리의 다른 글
  • [DAY - 82] #3 React-router clone-coding
  • [DAY - 81] #2 React-router clone-coding
  • [DAY - 79] router
  • [DAY - 78] #1 선수 정보 프로젝트
Yeonhub
Yeonhub
✨ https://github.com/yeonhub 📧 lsy3237@gmail.com
  • Yeonhub
    비 전공자의 Be developer
    Yeonhub
  • 전체
    오늘
    어제
    • 전체보기 (169)
      • 🔍 Tech 🔍 (19)
        • Front-End (11)
        • Back-End (4)
        • AI (1)
        • Server (1)
        • Etc (2)
      • 💡 원티드 프리온보딩 챌린지 💡 (14)
        • PRE-ONBOARDING_AI (11월) (1)
        • PRE-ONBOARDING_FE (2월) (2)
        • PRE-ONBOARDING_FE (1월) (2)
        • PRE-ONBOARDING_FE (12월) (9)
      • 🔥 부트캠프-웹 개발 🔥 (118)
        • HTML5 (7)
        • CSS3 (21)
        • JavaScript (27)
        • JavaScript_advanced (9)
        • React (24)
        • Next (1)
        • MYSql (5)
        • Node (5)
        • 오늘하날(개인프로젝트) (12)
        • 이젠제주투어(팀프로젝트) (7)
      • 💻 CS 💻 (1)
        • 알고리즘 (1)
      • ⚡ 코딩테스트 ⚡ (11)
        • JavaScript (11)
      • 📚 Books 📚 (6)
        • 클린 아키텍처 (2)
        • 인사이드 자바스크립트 (4)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

    • Github
  • 공지사항

  • 인기 글

  • 태그

    라스콘
    node cron
    expo deep linking
    bottom sheet
    expo node fcm
    expo fcm
    javascript fcm
    expo admob
    react native expo fcm
    expo google map
    react native analytics
    프론트엔드 테스트코드
    react native firebase analytics
    컴파운드 컴포넌트 패턴
    react vite
    react native admob
    rn bottom sheet
    Node
    rn admob
    expo 지도
    php node
    expo 길찾기
    node crontab
    node fcm
    라스콘4
    expo fcm push
    react native bottom sheet
    python node
    expo map
    node.js fcm
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
Yeonhub
[DAY - 80] #1 React-router clone-coding
상단으로

티스토리툴바