짧은코딩

이번에 진행하는 프로젝트는 webpack, npm이 아닌 vite와 yarn berry를 사용하는 과제를 받았다. 이 글에서 설명하는 초기 세팅은 react, ts, vite, yarn berry, tailwind css + twin.macro(emotion js), recoil, react query, jest, cypress를 설치하는 과정이다!(뭔가 엄청 많다..) 먼저 짧은 후기를 적어보자면 vite에 대한 정보가 너무 없어서 좀 힘겨웠다..! Vite + React + yarn berry 적용 yarn create vite 먼저 이 명령어를 입력하고 react, typescript를 각각 선택해줬다. yarn berry 전환 yarn set version berry pnp 모드 적용 먼저 .ya..

React FunctionComponent interface P { name: string, title: string, } // ReactElement는 굳이 안해도 된다. const WordRelay: FunctionComponent = (): ReactElement => { } FC가 FunctionComponet의 줄임말이다. 리액트 17버전에서는 VFC도 있었는데 18버전에서는 사라졌다. VFC와 FC의 차이는 VFC는 children이 없고 FC는 childrend이 있다. 따라서 FC children를 사용하고 싶다면 interface P { name: string, title: string, children?: ReactNode | undefined; } const WordRelay: FC ..