본문 바로가기

전체 글139

[React / Router] v6 - creatBrowserRouter basename (baseURL) 설정 방법 본문 github repository를 이용해서 배포를 해야할 때가 있다. 그럴 때는 아래와 같이 baseURL을 입력해서 root 주소를 설정해주면 된다. import React from "react"; import { createBrowserRouter } from "react-router-dom"; import Coin from "./routes/Coin"; import Coins from "./routes/Coins"; const router = createBrowserRouter( [ { path: "/", element: , }, { path: "/:coinID", element: , }, ], { basename: "/reactMasterCrypto" } // 이 부분 ); export de.. 2022. 12. 13.
[HTML / CSS] Styled-component 에서 css reset 방법 1번 방법 - 직접 쓰는 방법 import React from "react"; import ReactDOM from "react-dom/client"; import { createGlobalStyle, ThemeProvider } from "styled-components"; import { theme } from "./theme"; import router from "./router"; import { RouterProvider } from "react-router-dom"; const GlobalStyle = createGlobalStyle` @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400&displa.. 2022. 12. 12.
[React / TypeScript] interface로 타입 정의 중 발생한 이슈 (useParams, Params) - TS2344 1. 이슈 import React from "react"; import { useParams } from "react-router-dom"; interface RouteParams { coinID: string; } const Coin = () => { const { coinID } = useParams(); return Coin; }; export default Coin; 위와 같이 작성했을 때, 아래와 같이 에러가 나왔다. ERROR in src/routes/Coin.tsx:9:32 TS2344: Type 'RouteParams' does not satisfy the constraint 'string | Record'. Type 'RouteParams' is not assignable to type .. 2022. 12. 9.
[React / Router] React Router V6 Guide (Basic) - 부제 : v6 변경점 *참고로 아래 목록은 모두 Function이다. { } 로 불러오는 것 보면 알 수 있다. 0. Router는 props로 꽤 많은 기능을 포함하고 있는 것을 알 수 있다. Router 컴포넌트는 기본적으로 리액트의 context provider 기능을 포함시키고 있다. 그래서 routing 정보를 대부분의 자식 요소와 공유하게 된다. declare function Router( props: RouterProps ): React.ReactElement | null; interface RouterProps { basename?: string; children?: React.ReactNode; location: Partial | string; navigationType?: NavigationType; nav.. 2022. 12. 5.
[React / TypeScript] styled-components와 함께 사용하는 TypeScript에 대한 고찰 (feat.react) 0. 설치간 오류 JS로 만들어진 패키지, TS type이 정의된 패키지를 모두 설치해야 TS에서 인식할 수 있다. 어찌보면.. 당연. 패키지의 타입을 정의해서 가져다 줘야 해석을 하던가 말던가 하지.. 보통 이런 것들은 @types/~패키지명 으로 정의되어 있음. @types/~* 라고 정의되어 있는 경우, 모두 type 정의한 옵션 패키지 구나 정도로 생각하면 된다. 만약 @types/~패키지명을 설치 안하면 다음과 같이 display된다. Module not found: Error: Can't resolve 'styled-components' 패키지명은 예시 tip. 만약 본인이 패키지를 설치했는데 type이 없는 패키지일 경우, @types/설치한 패키지명 으로 install을 해보면 꽤 유명한 .. 2022. 11. 28.
CSS 작업 방식에 대한 고찰 (feat. Styled-Components) 여러 자료들(블로그, 클론코딩)에서 하는 말이 모두 다르다. 그래서 어떤 방식이 더 나은지 잘 모르겠다. CSS module 방식도 있고, tailwind 도 있고, styled component 도 있다. 이 것 말고도 많은데, 주로 사용하는 것은 그래도 이정도니까... 전반적으로 요즘은 styled component VS tailwind 정도로 압축되어가고 있는 것 같다. css in js VS utility-first css 방식의 차이라서, 1. 렌더링 성능을 좀더 우선시 하는 사람이면, tailwind (순수한 css로 봐야 하기 때문에 렌더링 이후에 다시 js로 적용하는 방식에 비해서 속도가 빠르다.) 2. 개발자의 유지보수를 좀 더 우선시 하는 사람이면 Styled component (emo.. 2022. 11. 22.

티스토리툴바