서론
회사 내 TDD를 적용하려 리액트 테스트 라이브러리인 Jest와 RTL(React Testing Library)을 설치하려 하니??
현재 쓰는 Node 버전이 낮아서 설치가 안된다는 문구가ㅠ....
알아보니 현재 내가 사용하는 Node 버전은 16.7.0
Jest를 설치하기 위한 최소 Node 버전은 16.10.0 이라 설치가 안된다는 문구;;
그래서 운영서버와 개발서버 노드를 확인 해보니
운영 node : 16.14.0
개발 node : 16.13.0
로컬 node : 16.7.0
왜 셋 다 다른건지ㅠㅠㅠ
심지어 로컬 환경 세팅 가이드는 16.7.0으로 세팅되게 되어 있었네요...
TDD 도입하려다 노드 버전까지 바꾸게 되는 작업까지 했네요ㅠ...
서론은 여기까지 하고 이번 포스팅의 내용은 노드 버전 업데이트 후기입니다.
1. 노드 버전 다운로드
원하는 노드 버전을 다운로드 합니다.
아래의 링크에 접속해서 원하는 노드 버전 숫자를 바꾸면 쉽게 접근 가능해요!
https://nodejs.org/download/release/v16.14.0/
2. 환경변수 세팅
회사 컴퓨터는 윈도우라 따로 환경변수 설정이 필요했습니다.
다운로드 받은 경로에서
여담으로 개인 컴퓨터는 맥북인데 맥북은 brew, nvm 으로 쉽게 원하는 노드 버전을 바꿀 수 있었습니다!
세팅이 완료되면 터미널에서 아래 코드 실행 해봅시다
node -v
npm -v
이렇게 나오면 설정이 잘됐습니다!
3. node_modules, .next 폴더 삭제
기존 node_modules, .next 폴더는 이전 node 버전으로 라이브러리가 설치되어 있어 삭제 필요합니다!
프로젝트에 설치되어 있는 node_modules 폴더 삭제
.next 폴더는 Next.JS 관련 빌드, 구성 등 파일들이 포함되어 있습니다!
어차피 빌드하면 다시 생기므로 있으면 같이 삭제해줍시다!
프로젝트 폴더에서 해당 폴더 삭제해도 되고 아래의 명령어로 삭제해도 됩니다
rm -rf node_modules
rm -rf .next
4. yarn 설치
yarn이 설치되어 있는지 확인하기!
그리고 캐시 클린 후 install하고 프로젝트 run 하면 된다!
yarn -v
npm install -g yarn
yarn cache clean
yarn install
5. 우분투에서 node 버전 변경
개발 서버는 우분투에 노드가 올라가 있어서 바꾸는 방법이 달랐습니다.
많은 방법이 있었지만 저는 n으로 버전을 변경해봤습니다
// n 설치
sudo npm install -g n
// n 설치확인
n -V
// lts 버전 설치
n lts
// 최신 버전 설치
n latest
// 특정 버전 설치
n 16.14.0
n list // 설치된 노드 확인
// 노드 버전을 변경하기 전에 현재 사용 중인 버전을 사용 중지합니다
n rm <현재_버전>
// 목표로 하는 노드 버전을 사용 가능한 버전으로 설치합니다.
n use 16.14.0
터미널 껐다 켜고 버전 확인하기
결과
1. 운영, 개발, 로컬 노드 버전 통일 (node 16.14.0)
2. 로컬 개발환경 세팅 가이드 업데이트
3. 팀내 노드 버전 업데이트 가이드 작성
진짜 해보면서 다른 개발자분들 컴퓨터에서 이런저런 다양한 에러가 많이 발생해서 웬만한 에러는 다 겪어본거 같네요ㅠㅠ
혹시나 질문 있으신 분들 질문 남겨주세요!
에러
1. yarn.lock과 package-lock.json 충돌
- 패키지 매너저로 yarn을 사용한다면 package-lock.json 없어도 됨 npm install 때리면 현재 package.json 기준으로 다시 생김
- npm, yarn 두개 같이 사용하는건 권장하지 않음. 충돌 자주 발생함.
- package.json 파일이 가장 중요
2. npm cache clean --force
- npm cache clean --force 안되는 문제 발생
- branch 새로 따고 node_modules, yarn.lock, package-lock.json 삭제 후 처음부터 진행
3. 노드 비트 문제
- 64비트 컴퓨터에 32비트 노드를 설치했을 때 발생
- error - uncaughtException: RangeError: Array buffer allocation failed
- 환경 설정하고 컴퓨터 재시작 후 안되는 현상 발생, 다음날 다시 하니 잘됨
왜 그런지 찾아보니 이런 문제가 아니었을까?
💡 cpu에 붙어있는 L1, L2, L3 메모리는 SRAM 이라고 하는 휘발성 메모리.
CPU 전원 공급이 안되면 날아가는 데이터
컴퓨터를 재시작하는 경우, 전원이 끊기지 않고 즉시 다시 켜지기 때문에 전원이 완전히 꺼진 것과는 다릅니다.
재시작하는 동안에는 L1, L2, L3 캐시의 데이터가 일반적으로 손실되지 않습니다.
대부분의 현대 컴퓨터는 재시작 과정에서 메모리의 내용을 보존하려고 노력하며, 캐시 메모리 역시 그에 포함됩니다.
64비트로 설치, 환경 변수 설정 후 컴퓨터 완전히 껐다가 켜기
'Programming > React.js, Next.js' 카테고리의 다른 글
[Next.JS] getStaticProps를 이용해서 서버 자원을 효율적으로 사용하고, 비용을 절감하기 (2) | 2024.06.04 |
---|---|
[React Conf 2024] 이제 useMemo, useCallback 필요 없음. 리액트 컴파일러란?? (0) | 2024.05.31 |
[React] 실무에서 리팩토링으로 리액트 성능 개선 후기 (1) | 2023.12.28 |
[React] 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달하기! (0) | 2023.08.14 |
[React] useState는 동기일까? 비동기일까? (0) | 2023.07.05 |