[17NOV, 2021] TIL

TIL은 아직 블로그에 쓰는 게 편한 것 같다 힣🌝

 

---

 

✔️ react-router-dom Switch 오류

포트폴리오로 사용할 웹을 만들어 놓고 싶어서 오늘 레이아웃과 라우터를 나누고 있었는데,  Switch 가 안돼서 찾아보았더니 react-router-dom이 버전 6으로 업그레이드되면서 바뀐 것이었다. Switch는 Routes로 바뀌고 component는 element로 바뀌어서 수정해주니 되었다. 공식문서

 

import { Route, Routes } from "react-router-dom";
import Main from "components/Main";
import Project from "components/Project";

function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/project" element={<Project />} />
      </Routes>
    </>
  );
}

 

 

✔️ wireframe, layout

위에서 말했듯 포폴 웹을 만들고 있어서 오늘은 어떻게 만들지 자세히 와이어 프레임을 잡고 폴더구조 세팅과 전체 레이아웃까지 완성했다. 내일은 Main 페이지 다국어 처리 및 완성까지가 목표이다.

 

 

✔️ gsap?

gsap을 이용하면 애니메이션 처리를 쉽게할 수 있어서 사용할까 고민했다. 하지만 큰 애니메이션이 필요 없을 것 같아서 scss로 구현을 도전해보고 어려우면 도입을 다시 고민하기로 결정했다.

 

 

✔️ Absolute path in react typescript project

import 할 때 깔끔하고 더 알아보기 쉬워서 absolute path를 선호해서 이번에도 적용하였다. jsconfig.json과 동일하게 타입스크립트에서는 tsconfig.json에서 baseUrl을 설정해주면 된다. 나는 바로 되었는데 찾아보니 코드에디터에 따라 초기화되는 경우도 있다고 한다. 그럴 땐 path를 분리해주면 된다고 한다!

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