프로젝트 초기 세팅 (with yarn berry, vit, react, typescript, emotion...)

 

새로운 프로젝트를 시작하면서 내가 자신이 없었던 프로젝트 초기 세팅을 드디어!! 새롭게 경험할 수 있었다.

이번에는 반드시 초기세팅에 대한 두려움을 없애버리고 자신감있게 초기 세팅을 할 수 있도록 정리를 해보았다.

 

스택

• TypeScript: 정적 타입 분석을 통한 안정적인 코드 작성을 위해 사용
• React: 컴포넌트 기반 개발 및 SPA 구축을 위해 사용
• emotion css: 컴포넌트 기반 스타일링을 위해 사용
• Redux Toolkit : 복잡한 상태 관리를 위해 사용
• PWA: 네이티브 앱과 같은 사용자 경험을 주기 위해 사용
• Axios: 간결한 http 통신 코드 작성을 위해 사용
• Framer Motion: 리액트 기반 애니메이션 라이브러리로, 서비스 내의 다양한 애니메이션 구현을 위해 사용
• yarn berry : 다양한 패키지를 쉽고 빠르게 설치 & 관리하기 위해 사용 (npm대용)
• Vite (cra 대용)
• react-router-dom

 

yarn과 vite를 통해서 React, typescript 프로젝트를 생성하였다. 

yarn create vite [프로젝트 이름] --template react-ts

 

자신이 사용하고 싶은 언어에 따라 밑에 표를 참고해서 넣으면 된다.

JavaScript	TypeScript
vanilla	vanilla-ts
vue	vue-ts
react	react-ts
preact	preact-ts
lit	lit-ts
svelte	svelte-ts
solid	solid-ts
qwik	qwik-ts

 

2. yarn set version berry

yarn 버전을 berry로 변경해주었다.

yarn set version berry

 

 

2024.02.02 - [개발] - yarn berry란

깔아야 할 것들

1. yarn create vite [프로젝트 이름] --template react-ts

2. yarn set version berry

3. yarn install

4. yarn add react-redux @emotion/react axios @reduxjs/toolkit react-router-dom

    redux와 redux toolkit 깔아주고

    emotion 깔아주고

    axios 깔아주고

    react-router-dom 깔아준다.

5. yarn add -D vite-plugin-svgr vite-plugin-pwa

    vite-plugin-svgr은 Vite 프로젝트에서 svg 파일을 리액트 컴포넌트로 변환하게 하는 플러그인이다.

     vite-plugin-pwa는 Vite 프로젝트를 Progressive Web App (PWA)로 변환하기 위한 플러그인이다.

6. yarn add framer-motion

     framer-motion는 애니메이션 라이브러리이다.

7. yarn dlx @yarnpkg/sdks vscode

    yarn berry를 통해서 yarn PnP모드를 활성화하면 vscode와 같은 smart IDE에서는 TypeScript를 위한 특별한 설정이 필요하다.

    위 명령어를 실행하면 editor SDKs가 생성되고 설정들이 세팅된다.

    cmd + shift + p => Setting TypeScript Version 입력 => 엔터 => Use Workspace Version 선택

8. vscode 익스텐션 ZipFS 설치 

    yarn PnP 모드에서는 패키지를 zip형태로 관리한다. zip형태를 보기 위해서 ZipFS 익스텐션을 설치해야지 zip저장소에 저장된 파일을     바로 읽을 수 있다.

 

내가 겪은 버그들

1. prettier랑 eslint 안됨

format on save, setting.json에서 설정을 죄다 올바르게 했는데도 불구하고 실행되지 않아서 3일 동안 고생을 하였다.

근데 버그의 원인은 vscode를 응용프로그램 폴더에 넣어놓지 않아서 자동으로 업데이트가 되지 않아 버전문제로 실행이 안되는 거였다... 

 

2. packagelocation의 위치가 팀원과 다름

다른 팀원과 packagelocation이 달랐는데 다른 팀원들만../ 가 하나 추가되어 있었다.

알고 보니 나는 desktop/프로젝트에 넣어놨고 다른 팀원들은 desktop/폴더/프로젝트에 넣어놔서 나만 ../ 이 하나가 더 적어서 통일이 안 되는 거였다.