[TIL] 엘리스 SW 엔지니어 트랙 Day 072

📖 오늘 배운 내용 - 2022.02.08

• Recharts를 이용해서 그래프 페이지 작성
• useLocation()
• 웹팩 절대 경로 설정 :: alias

 

📝 헤더 부분 다르게 수정

import React from "react";
import Refresh from "../../assets/icon/header/refresh.svg";
import Seeds from "../../assets/icon/header/seeds.svg";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { HeaderWrapper } from "./style";
import BackButton from "../../assets/icon/header/back-button.svg";

export function Header() {
  const location = useLocation();
  const navigate = useNavigate();

  return location.pathname === "/setting" || location.pathname === "/goal" ? (
    <HeaderWrapper>
      <BackButton onClick={() => navigate(-1)} />
    </HeaderWrapper>
  ) : (
    <HeaderWrapper>
      <Refresh />
      <Link to="/badge">
        <Seeds />
      </Link>
    </HeaderWrapper>
  );
}

• react-router-dom의 useLocation()을 사용해서 수정했다.
• window.location.pathname === "/setting"을 시도했었지만 동작하지 않았다. 팀원의 도움으로 useLocation 존재를 알 수 있었다. API 문서를 잘 찾아보자!

React Router | Tutorial

React Router v6 튜토리얼

[React] react-router-dom v6 업그레이드 되면서 달라진 것들

react-router-dom v6 업데이트 후 달라진 점 (ft. Prompt 창 띄우는 법)

 

📝 Recharts

npm install recharts

 

• https://recharts.org/en-US/api/Pie

 

 

📝 웹팩 단축 별명으로 절대 경로 설정하기

[Webpack] 웹팩 alias 단축 별명으로 절대 경로 설정하기

 

💡 오늘 깨달은 것

• props를 2번 넘기는 것 까지는 괜찮다.
• 재사용하지 않는 컴포넌트는 page 폴더 안에 넣어도 괜찮다. ⇒ 오직 관리 목적
  • 재사용이 많다면 컴포넌트 파일로! 재사용이 없다면 page 폴더 안에!
• 절대 경로를 설정해주면 import 할 때 편해진다.

  • // js.config.js
    {
      "compilerOptions": {
        "baseUrl": ".",
        "paths": {
          "@/*": [
            "./src/*"
          ]
        }
      }
    }

• 프론트단에서 테스트해야 할 곳은
  • input이 있고 output이 있는 곳에 대한 테스트
  • porps가 있을 때 어떻게 랜더링 하는지에 대한 테스트
  • 테스트 코드 파일 위치는 원본 파일이랑 가깝게 위치하는 것이 '개인적'으로 좋다.
• {title && <Title>{title}</Title>} 이런 식으로 코드를 작성하면 에러를 한 번 더 방어할 수 있다.
• 중첩 삼항 연산자는 좋지 않다. if문으로 수정하는 것이 가독성에 좋다.
• 상태 관리할 일을 최대한 안 만들려고 노력할 수 있다...!
  • 잠깐 저장하는 용도로 사용할 때는 react-query나 axios cache를 사용할 수 있다.
• 토글의 상태 값은 로컬 스토리지에 저장해서 유저의 사용성을 높여줄 수 있다.

 

📌 참고

• 절대경로설정