[Modu-house] 미니 프로젝트 트러블 슈팅

📌 폰트 적용 방법

1. 폰트 다운로드 받아서 적용

- assets 안에 fonts 폴더 oft 폰트 파일 넣기

- font.css 파일에 @font-face{} 넣기

*여기서 font-family 이름을 쓰기 쉽게 바꿔도 됨

2. 웹 폰트 적용

- index.html 안에 link href rel 쓰기

- GlobalStyle.js 의 body 안에 fontfamily 쓰기

import reset from 'styled-reset';
import { createGlobalStyle } from 'styled-components';

const Globalstyle = createGlobalStyle`
${reset}
*{
    box-sizing: border-box;
}

body{
    font-family: 'Nanum Gothic', sans-serif;
}

a{
    color: inherit;
    text-decoration: inherit;
}
`;

export default Globalstyle;

- main.jsx 안에 GlobalStyle 을 import 해서 render() 안에 component 넣어주기

-> 여러 개의 폰트를 적용해도 쓸 때는 font-family 로 불러오면 됨.

📌 이미지 파일 넣을 때

로고 이미지는 svg 파일로 assets 폴더에 넣기(svg 파일은 확대해도 깨지지 않음 - vector 파일이기 때문)

*SVG : Scalable Vector Graphics

📌 eslint & prettier 설정

*.prettierrc

{
  "singleQuote": true,
  "trailingComma": "all",
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "arrowParens": "always",
  "bracketSpacing": true
}

*.eslintrc.cjs

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:import/recommended',
    'plugin:prettier/recommended',
    'eslint:recommended',
    'airbnb',
    'airbnb/hooks',
    'prettier',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react', 'import'],
  rules: {
    'no-unused-vars': ['off'], // 사용하지 않는 변수가 있을때 빌드에러가 나던 규칙 해제
    'no-console': ['off'], // 콘솔을 쓰면 에러가 나던 규칙 해제
    'react/function-component-definition': [
      2,
      { namedcomponents: 'arrow-function' },
    ],
    'react-hooks/exhaustive-deps': ['warn'], // hooks의 의존성배열이 충분하지 않을때 강제로 의존성을 추가하는 규칙을 완화
    'react/jsx-props-no-spreading': [1, { custom: 'ignore' }], // props spreading을 허용하지 않는 규칙 해제
    'react/prop-types': 0, // prop-types를 선언해주어야하는 규칙 해제
    'no-param-reassign': 0, // 파라미터 변경을 허용하지 않는 규칙 해제
    'no-alert': 0, // alert 제한 규칙 해제
  },
};

📌 디테일 페이지에 id 없이 접근하면 리다이렉트

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

function Router() {

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/details/" element={<Navigate to="/" replace />} />
        <Route path="/details/:id" element={<Details />} />
      </Routes>
    </BrowserRouter>
  );
}

Navigate to="경로"를 쓰고 replace 적어주기

https://synuns.tistory.com/59

[TIL] 준비 땅

📌 theme 설정

https://wonit.tistory.com/366

[styled-components] ThemeProvider로 공통 스타일 속성 관리하기.