이번에는 프로젝트 세팅에 대해서 정리를 할 것이다.
정리를 하는 이유는 나중에 내가 까먹었을 때 보기 위함이다.

• yarn과 vite를 사용한 프로젝트 세팅이다.
• 개인 프로젝트시 사용

프로젝트 세팅

1. 레포를 클론하든 새폴더를 만들든 해서 폴더를 만들어준다.
2. CLI창에서 yarn init을 해준다.
3. yarn create vite .으로 vite로 프로젝트를 만들어준다.
   • 점은 현재 폴더에 바로 만들게 해준다.
4. 템플릿을 React로 골라준다.
5. yarn dev를 쳐서 확인
6. 끝

패키지 설치

yarn add 패키지-이름
yarn add -D 패키지-이름

위와 같은 형태로 패키지를 설치할 수 있다.

기본적으로 깔아야 될 패키지

yarn add styled-components
yarn add -D @types/styled-components
yarn add styled-reset
yarn add recoil

나중에 tsconfig에서 아래와 같이 절대경로 설정을 하게 된다면

"baseUrl": ".",
"paths": {
  "@fonts/*": ["src/fonts/*"]
}

compilerOptions에 넣게되면 이걸 vite.config.ts에도 넣어줘야 하는데,
쉽게 하기 위해 아래 패키지를

yarn add -D vite-tsconfig-paths

깔아주고,

typescript
export default defineConfig({
  plugins: [react(), tsconfigPaths()],
	// ...
});

이런식으로 vite.config.ts에 tsconfigPaths()를 넣어주면 된다.

글로벌 스타일 세팅

styles라는 폴더를 생성해주고, GlobalStyle.ts라는 파일을 만들고 아래 코드를 입력해 기본 CSS를 넣어준다.

import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";
  
const GlobalStyle = createGlobalStyle`
  ${reset}
  * {
    box-sizing: border-box;
  }
  html {
    // 1rem = 10px
    font-size:62.5%;
  }
  body{
    background-color: #ffffff;
  }

  a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }
  input, button {
    background-color: transparent;
    border: none;
    outline: none;
  }
  h1, h2, h3, h4, h5, h6{
  }
  ol, ul, li{
    list-style: none;
  }
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
`;
  
export default GlobalStyle;

복사해서 파일에 붙여넣어주고, index.tsx( main.tsx )에 넣어준다.

import GlobalStyle from "./styles/GlobalStyle.ts";
  
ReactDOM.createRoot(document.getElementById("root")!).render(
  <>
    <GlobalStyle />
    <App />
  </>,
);

이러면 기본적인 세팅은 끝이 난다!

협업시 세팅해야 하는거 나중에 협업을 하게 되었을 때 추가하겠다.