지수의 블로그

2 분 소요

TIL

React 환경 세팅

환경 설정

최근 회사에서 신규 프로젝트를 시작해야한다.
그래서 환경 세팅을 알아보고, 빌드해야한다.

처음 환경 세팅을 해야 한다고 했을 때, 도대체 뭐 부터 해야하는지 조차 몰랐다.

언어? 번들러? 패키지 매니저? … 대충은 어떤 걸 세팅하고 엄청 어렵다는 것 밖에는 몰랐다.

그래서 선배의 도움을 받아 React 환경의 세팅을 알아보았다.

무엇을 어떻게 정해야 하나?

기본적으로 언어와 라이브러리/프레임워크를 정하면 그 뒤에 보통 사용하는 조합들 혹은 프레임워크를 선택할 수 있다.

언어 및 라이브러리

우리는 React 기반으로 하기로 했기 때문에 React + ts 조합으로 환경 세팅을 리서치했다!

그런데! 여기서 부터가 고민이 시작되었다!!

  1. 단순히 React + ts 조합을 사용할 것인가.
  2. SSR을 제공하는 Next.JS 프레임워크를 사용할 것인가.
  3. 차세대 프레임워크 및 빌드 툴인 vite를 사용할 것인가.

이렇게 고민하게 되었다.

패키지 매니저

패키지 매니저는 이번 디자인 시스템을 만들 때부터 yarn berry를 도입하는 것으로 했기 때문에
yarn berry로 웬만하면 사용하는 것이 좋을 것 같다고 판단했다.

yarn berry
간단하게 node_modules의 엄청난 크기를 줄이고 이 모듈들의 버전 자체를 코드로 관리할 수도 있도록 하는 yarn의 2세대 패키지 매니저이다.

자세한 내용은 yarn berry 관련 아티클 (나도 정독 필요..)

빌드 툴

  • CRA를 사용하게 되면 webpack이 기본.
  • Next.js CNA 또한 webpack.
  • CRA 없이 React에서 커스텀으로 빌드한다고 하면 여러 빌드 도구를 사용할 수 있다.
    • webpack
    • rollup
    • snowpack
    • ESbuild
  • vite.JS를 사용한다면 기본적으로 ESbuild 툴을 사용하게 된다.

따라서 빌드 툴은 어떤 라이브러리/프레임워크를 사용할 것인지에 따라 달라진다.

지금까지의 판단으로는 둘 중 하나를 사용하게 될 것 같다.

  • webpack: 자료나 라이브러리 즉, 생태계가 넓다.
  • ESbuild: 빠른 빌드 속도를 보여준다. 아직 자료가 많이 없다.

Plain React를 사용한다면 webpack 혹은 ESbuild를,
vite를 사용한다면 ESbuild를 사용하게 될 것 같다!

사실 위의 빌드 툴/번들러를 사용해본적이 없기 때문에..
얼른 공부해서 빌드 연습을 해야겠다. (취준 때는 항상 CRA… ㅠㅠ / 부딪히고 깨질 시간이 없었다. React도 제대로 못하는데.)

CSS

사실 CSS는 거의 styled-components를 사용하게 될 것 같다.
React에 사용하기 매우 편하고, 빠르게 디자인할 수 있기 때문이다.
(css-in-js의 장점을 다 다루진 않겠다.)

그러나 다른 의견으로는 css-in-js 자체의 느린 문제를 이유로 css-in-css를 사용하자라는 얘기가 있었다.

vanilla CSS는 기능적으로 약하기 때문에 sass 정도를 사용하면 어떨까 하지만,
sass도 변환작업을 하므로 굳이?라는 생각이 조금 든다.

Test 툴

사실 Test 툴이 가장 문제이다.

아예 문외한?이기 때문에 어떤 것을 알아봐야하는지 모르겠다..
Jest를 설정해야한다는 것 밖에는…

문서화 툴

사실 디자인 시스템을 만들 것은 아니기 때문에 storybook은 따로 설정하지 않아도 될 것 같다.

디자인 패턴

현재 Vue로 이루어진 기존 프로젝트의 디자인 패턴/폴더 구조는 엉망이다.

그래서 이번 React로 프로젝트를 시작할 때에는 Presenter - Container 구조를 사용하거나
atomic 기반으로 조금씩 변형해서 사용하지 않을까 한다.

vite js

빌드

yarn create vite {폴더명 입력} --template react-ts

템플릿 없이 cli에서 선택도 가능하다.

그럼 끝!

yarn2 migration

yarn을 yarn berry로 마이그레이션 하고자 했다.

참고 블로그

berry version

yarn set version berry

.yarnrc.yml 파일과 .yarn/release 폴더가 생성됨

yml 파일 변경

.yarnrc.yml 파일에 nodeLink: pnp 추가

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

yarn install

yarn

혹은 yarn install

이후 .yarn 폴더에 cache 및 여러 폴더 생성
pnp.cjs 파일 생성

vscode sdks

yarn dlx @yarnpkg/sdks vscode

typescript 를 포함한 프로젝트이므로 버전을 허용해야 한다.

모두 설치가 된 후에

이미지 출처

위와 같은 알림창이 뜨는데 이때 Allow를 눌러야 한다!!!

아니면 빨간색 에러줄 (cannot find modules…)이 계속 뜨게 될 것이다. (그러나 프로젝트는 정상동작)

만약 모르고 X를 눌렀다면!?

setting에서 command palette (단축키 ctrl + shift + p)로 들어가서 typescript를 검색.

select typescript version 선택

use Workspace version 선택

typescript plugin 설치

yarn plugin import typescript

회고 (TIL)

2022.04.28 Daily 회고

✏오늘 한 일

  • Vue 업무
  • 환경 세팅 리서치

⁉느낀 점

vue 은근 익숙해지려고 한다!?

환경 세팅… 멀고도 험하다.

할 거는 많은데 안한다.
하기 싫은건가? 정신 없어서인가!

썩어빠진 정신을 다시 차리기 위해 스터디를 구해야겠다.

🎃현재 나의 상태

다시 게으른 완벽주의자가 될 셈인가ㅠㅠ

📚 내일 할 것

  • Vue 업무 마무리 (데이터 변경 확인)
  • Vue 추가 업무 슬쩍 해보기
  • vite 혹은 react 환경설정

댓글남기기

참고