Yarn berry + Vite + React + Typescript + Recoil 환경 설정

Vite + Yarn berry + React + TypeScript 적용

1. vite 설치

yarn create vite

2. 템플릿 생성

yarn create vite dfesta --template react-ts

3. 폴더로 이동해서 yarn-berry로 버전 변경

yarn set version berry
yarn install

4. .yarnrc.yml 파일에 nodeLinker 추가

yarnPath: .yarn/releases/yarn-3.6.1.cjs
nodeLinker: pnp

5. yarn install

yarn install

6. gitignore 추가

# Zero-Install을 사용

.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

7. ZipFS VSCode 확장 프로그램 설치(Zip 파일을 이용하여 의존성 관리를 진행하기 때문)

8. sdk의 설정을 생성

yarn dlx @yarnpkg/sdks vscode는 Yarn을 사용하여 @yarnpkg/sdks라는 패키지를 다운로드하고, 해당 패키지에 포함된 vscode라는 스크립트를 실행하는 것을 의미한다. 이것은 VSCode 관련 도구를 사용하기 위해 필요한 도구를 가져와서 실행하는 것이다.

yarn dlx @yarnpkg/sdks vscode

9. cacheDir 경로 지정

dev server 실행 시, node_modules가 생성되는 것을 원치 않는다면 vite.config.ts에 아래와 같이 cacheDir을 설정해준다.

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  cacheDir: './.vite',
})

.gitignore

...
.vite

SCSS 사용

sass를 설치해서 사용하면 된다.

yarn add sass -D

CSS 모듈처럼 사용하려면 파일 확장자에 .module만 붙여주면 된다.

Loading.module.scss

경로 별칭

1. vite.config.ts 설정

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
	...
  resolve: {
    alias: {
      '@': '/src',
    },
  },
})

2. tsconfig.json 설정

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

Recoil 설정

1. recoil 설치

yarn add recoil -D

2. RecoilProvider 추가

import React from 'react';
import ReactDOM from 'react-dom';
import { RecoilRoot } from 'recoil';
import App from './App';

ReactDOM.render(
  <RecoilRoot>
    <App />
  </RecoilRoot>,
  document.getElementById('root')
);

3. Recoil 상태 정의

import { atom } from 'recoil';

export const testState = atom({
  key: 'testState',
  default: 'test',
});

4. recoil 사용

import React from 'react';
import classNames from 'classnames/bind';
import styles from './Home.module.scss';
import { useRecoilValue } from 'recoil'
import { testState } from '@/recoil/test';

const cx = classNames.bind(styles);

const Home: React.FC = () => {
  const test = useRecoilValue(testState)

  console.log(test)

  return (
    <div className={cx('home')}>
      Home
    </div>
  )
}

export default Home;