2024.01.29 TIL

 

절대경로 설정하기

1. root 경로에 jsconfig.json 파일 생성

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

 

2. vscode 재시작

3. baseUrl을 기준으로 작성하면 됨

ex 1) src/assets/melting_chiikawa 이미지 import 하기

import meltingChiikawa from "assets/melting_chiikawa.png"

 

ex 2) src/components/Main/LetterSummaryView 컴포넌트 import 하기

import LetterSummaryView from "components/Main/LetterSummaryView";

---

children props로 공통레이아웃 사용하기

function Layout({ children }) {
    return (
        <div>
            <Header></Header>
            {children}
        </div>
    )
}

function Home() {
    return <Layout >
        {/* 감싸진 내용이 Layout의 children props로 들어간다. */}
        <LetterSendingBox></LetterSendingBox>
        <LetterBoxSelector></LetterBoxSelector>
        <LetterSummaryView></LetterSummaryView>
        <EmptyLetterBoxMessage></EmptyLetterBoxMessage>
    </Layout>

}

---

React 프로젝트에 reset.css 적용하기

1. reset style 컴포넌트 생성

2. import { createGlobalStyle } from "styled-components";

3. reset css 컴포넌트로 작성 후 export

4. 컴포넌트 최상위에 <ResetCompoent /> 작성

주의. reset css 컴포넌트는 children을 가질 수 없다.