#01 리액트를 사용한 팬레터 웹사이트 개발 : 라우터 설정 및 전역스타일링 설정

개인프로젝트 (리액트 팬레터 홈페이지 만들기 ) 과제 해설

1. 프로젝트 셋업
2. 깃허브 브랜치 생성
3. Router.jsx 설정
4. 전역스타일링 ( GlobalStyle.jsx ) 설정

---

(1) 프로젝트 셋업

• CRA boilerplate 로 프로젝트 생성 : yarn create react-app practice
  React 안 쓰는 파일 삭제 : logo.svg / reportWeb / Setuptest / App.test.js / App.css
  [변경] App.jsx & index.jsx: React.StrictMood & reportWebvitals() 삭제
• pages/ , components/ , shared/ , assets/ 폴더 작성 및 필요 컴포넌트 사전 작성
• styled-components, react-router-dom 설치 : yarn add react-router-dom styled-components
• title 변경: public > index.html
• 절대경로 설정 : yarn.lock 클릭 + 파일생성 : jsconfig.json
  
  {

      "compilerOptions": {

          "baseUrl": "src"

      },

      "include": ["src"]

  }

(2) 깃허브 브랜치 생성

(3) Router.jsx 생성

- path에 따라 화면 나타나게 하기 위함 (rfc로 구현)

- [★포인트] : <Navigate replace to ="/" > 사용하기

import Detail from 'pages/Detail';

import Home from 'pages/Home';

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';

export default function Router() {

    return (

        <BrowserRouter>

            <Routes>

                <Route path="/" element={<Home />}></Route>

                <Route path="/detail/:id" element={<Detail />}></Route>

                <Route path="*" element={<Navigate replace to="/" />}></Route>

            </Routes>

        </BrowserRouter>

    );

}

▶ 설정한 (<Route path="/">  ||  <Route path="/detail"> ) 이외의 경로는 path = "*"  여기로!

▶ <Navigate replace to="/" /> : replace 사용 이유=> 뒤로가기 가능 & 없으면 무한루프에 빠짐

(예시: detail 화면 > /abc (없는 경로) : abc를 없애고 '/'로 재할당하여 Home화면 이동

> 뒤로가기 > detail 화면으로 이동)

▶ replace 미사용(비추천): Home으로만 이동하고 뒤로가기 안됨 (대체 되는 것이 아니라 새로운 url 히스토리 생성)

 

▶ 상세페이지 이동 (:id) => path variable =(path parameter :react) 사용 

(확인 ▼ : Detail.jsx 파일에서 useParam()으로 id값 확인 가능)

import React from 'react';

import { useParams } from 'react-router-dom';

function Detail() {

    //path parameter 확인가능

    const params = useParams();

    console.log(params);

    //구조분해할당으로 id값 출력

    const { id } = useParams();

    //UI에 바로 연결도 가능!

    return <div>Detail{id}</div>;

}

export default Detail;

 

 

[App.jsx]

const { default: Router } = require('shared/Router');

function App() {

    return <Router />;

}

export default App;

 

(4) GlobalStyle.jsx (전역스타일링 적용)

[ GlobalStyle.jsx]

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`

  html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: 0;

    font-size: 100%;

    font: inherit;

    vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

    display: block;

}

body {

    line-height: 1;

}

ol, ul {

    list-style: none;

}

blockquote, q {

    quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

    content: '';

    content: none;

}

table {

    border-collapse: collapse;

    border-spacing: 0;

}

*{

    box-sizing: border-box;

}

 

body {

  margin: 0;

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',

    sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

export default GlobalStyle;

▶ 전역 스타일링 안에

(1) 'reset.css' 파일 첨부 (https://meyerweb.com/eric/tools/css/reset/)

(2) box-sizing: border-box;  기본값은 content-box임 ( 모든 elements에 border-box 해주기)

(3) 기존 index.css의 body부분만 가져와서 넣고 기존 index.css 삭제

 

[index.jsx]

import React from 'react';

import ReactDOM from 'react-dom/client';

import App from './App';

import GlobalStyle from 'GlobalStyle';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

    <>

        <App />

        <GlobalStyle />

    </>

);

▶ <GlobalStyle.jsx>를 <App/> 아래 작성

 

 

끝.

 

---

▼ #02 리액트를 사용한 팬레터 웹사이트 개발
: 홈 화면 UI 구현 및 조건부 스타일링 (styled-component)  ▼

 

#02 리액트를 사용한 팬레터 웹사이트 개발 : 홈 화면 UI 구현 및 조건부 스타일링 (styled-component)

---