본문 바로가기

프로젝트 개발일지/프로젝트 세팅

yarn berry + vite + react + typescript + react-query + emotion + prettier + eslint + husky + lint-staged + storybook 프로젝트 세팅을 해보자 이전에 yarn berry와 vite에 대한 글을 쓴 적이 있다. 그때는 yarn berry와 vite가 무엇인지 정도만 알아봤었는데, 이번에는 직접 프로젝트 세팅을 해보자. yarn berry, vite, react, typescript, react-query, emotion, prettier, eslint, husky, storybook 이렇게 세팅을 해보려고 한다. vite + react + typscript 프로젝트 생성 가장 먼저, vite 프로젝트를 먼저 생성해 보자. 이때, react와 typescript를 사용하도록 생성해 주면 된다. 아래 명령어를 통해서 생성해 주었다. yarn create vite {project name} --template react-ts 추가적으로 vite에서는 .. 더보기
Vite에 대해서 알아보자 Vite Vite는 네이티브 Javascript 모듈인 ES Module을 기반으로 한 데브 서버이다. 기존 프론트엔드 개발 생태계는 웹팩을 중심으로 개발 환경과 배포 시스템이 구축되어 있는데도 불구하고, 현재는 CRA를 통한 React 앱을 구축하는 것보다 Vite를 사용해서 React 앱을 구축하는 방향으로 많이 사용한다고 한다. 이제부터 왜 Vite를 사용하는지에 대해서 알아보자. 번들링 Vite에 대해서 이해하기 전에 알아야 할 사전 지식들이 몇 개 있다. 그 중 하나가 번들링이다. 웹 개발에서 번들링은 빌드라고 이해하면 될 것 같다. 번들링은 말 그대로 웹 애플리케이션을 제공하기 위해서 여러 코드와 프로그램들을 묶는 행위 정도이다. 개발자가 번들링된 웹 애플리케이션을 만들고, 사용자는 번들링한 .. 더보기
yarn berry에 대해서 알아보자 yarn berry yarn berry는 다들 한 번씩은 들어봤을 거 같다. 쉽게 말하자면 새로운 패키지 관리 시스템이다. 왜 요즘 npm을 사용하지 않고 yarn berry를 사용하려 하는가?에 대해서 알아보자. npm 다음은 npm의 단점들이다. 파일 시스템을 이용해서 의존성을 관리하는 npm은 node_modules 폴더를 이용한다. 처음 패키지를 import하는 경우, npm은 패키지를 찾기 위해서 계속 상위 디렉토리의 node_modules 폴더를 탐색하게 된다. 패키지를 찾지 못하면 계속해서 느린 I/O 작업이 일어나게 되고, 실패하기도 한다. 또, 각 패키지의 상위 디렉토리의 환경에 따라서 해당 의존성을 찾을 수 있는지가 달라진다. 따라서 일관성 있게 패키지를 불러올 수 없는 것이다. 하지만.. 더보기
깃허브 이슈 템플릿과 PR 템플릿을 생성해보자 이전에 깃허브 이슈 관련 글을 올린 적이 있다. 해당 글은 아래 링크로 접속하면 볼 수 있다. https://gugu76.tistory.com/110 그때 꼭 깃허브 이슈 템플릿과 PR 템플릿을 직접 생성해 보겠다고 했었는데, 이번 기회에 생성도 해보고 글도 남겨보려고 한다. 템플릿을 만들어두면, 일관적으로 이슈 및 PR을 생성할 수 있고, 매번 새롭게 작성하지 않아도 된다. 만약 템플릿을 만들어두지 않는다면, 다음과 같은 과정을 매번 겪어야 한다. 그래서 프로젝트를 진행한다면, 편리함과 일관성을 유지할 수 있도록 템플릿을 만들어보려고 한다. 이슈 템플릿을 생성해보자 먼저, 이슈 템플릿부터 만들어보자. 이슈를 생성하고 싶은 레포지토리에 들어가서 Settings 부분을 보면 아래와 같이 이슈 템플릿을 만들.. 더보기

티스토리툴바