React 숙련 주차 개인 과제 (1)

TIL 23. 11. 14

오늘 한 일

• React 개인 과제 진행 - (1)

React 숙련 주차 개인 과제

### (1) 프로젝트 셋업

CRA boilerplate로 프로젝트 생성

yarn create react-app fanpage

(2) 디렉토리 구조 설정

📦fanpage
 ┣ 📂public
 ┣ 📂src
 ┃ ┣ 📂assets
 ┃ ┣ 📂components
 ┃ ┣ 📂constants
 ┃ ┣ 📂pages
 // ...

• public:
• src/assets:
• src/components:
• src/constants:
• src/pages:

(3) 절대경로 설정

// jsconfig.js

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

(4) 라이브러리 설치

$ yarn add -D eslint prettier eslint-config-prettier

$ yarn add styled-components react-router-dom

(5) Router 설정

import App from './App';
import Home from 'pages/Home';
import Detail from 'pages/Detail';
import NotFound from 'pages/NotFound';
import { createBrowserRouter } from 'react-router-dom';

export const router = createBrowserRouter(
  [
    {
      path: '/',
      element: <App />,
      errorElement: <NotFound />,
      children: [
        {
          index: true,
          element: <Home />,
        },
        {
          path: 'detail/:id',
          element: <Detail />,
        },
      ],
    },
  ],
  { basename: '/' },
);

(6) 전역스타일링

import { createGlobalStyle } from 'styled-components';

const GlobalStyles = 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;
    font-family: 'Noto Sans KR', sans-serif;
	background: linear-gradient(185deg, rgba(0,150,199,1) 0%, rgba(0,180,216,1) 25%, rgba(72,202,228,1) 51%, rgba(144,224,239,1) 76%, rgba(173,232,244,1) 100%);
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}
ol, ul, li {
	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;
}
a {
    text-decoration: none;
    color: inherit;
}  
input, button {
    border: none;
    background: inherit;
    font-family: 'Noto Sans KR', sans-serif;
} 
* { 
    box-sizing: border-box;
}
body::-webkit-scrollbar {
  display: none;
}
`;

export default GlobalStyles;

(7) 헤더 UI 구현

이미지 동적 import