과제를 진행해보면, 라이브러리나 프레임워크 버전 업데이트가 되는 경우가 있다.
하위 버전과 호환이 된다면 다행이겠지만 그렇지 않은 경우도 많아서
종속성 관리를 필요로 하는데, 이러한 부분에 대해서 관리하는 방법을 정리해보겠다.
yarn으로 진행하였고, npm에서도 가능할 것이다
package.json 버전 관리 및 yarn 활용하기
먼저 나는 react 버전을 17.0.2버전을 cra하고 싶었다.
그래서 몇가지 방법을 시도 했는데
cra에 낮은버전 template를 쓰려고 시도하였다.
npx create-react-app my-app --template cra-template@1.0.3하지만 결과는 최신 버전의 React가 설치되었다.
두번째로는 컴퓨터 전체에 깔려있는 create-react-app버전을 낮춘 다음에 시도해보았다.
npm install -g create-react-app@3.3.0 // CRA 3.3.0 다운로드
npx create-react-app my-app --template cra-template@1.1.2결과는 최신 버전이 설치되었다.
버전도 확인해보니
create-react-app --version3.3.0이 잘 설치되었는데도 그러하였다.
$ yarn info create-react-app version
yarn info v1.22.19
5.0.1
Done in 0.81s.
$ npm view create-react-app version
5.0.1
$ create-react-app --version
3.3.0버전 확인을 해보니 설치했을 때는 5.0.1 을 사용하여서 설치가 되었고
내가 원하는 버전에 맞추어서 설치하는 양식이 잘못되었다고 생각한다
그래서 올바른 버전 컨트롤이 이루어진다면 잘될거 같다.
npx create-react-app@3.3.0 my-app2이런식으로 버전을 낮추어서도 해보았는데, 똑같았다.
내가 예상한 바로는 cra 버전이 낮아도 react 최신버전이 오고, 바뀌는 것은
react 외에 설치되는 부가적인 요소들(?) 이 바뀌는 거 같다고 생각이 들었다.
(cra 최신버전에서는 jest와 testing library들이 다른 거 같다)
그래서 내가 사용한 방법은 cra를 하고 나서 버전을 낮추어주는 방법을 사용하였다.
npx create-react-app my-app "@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^1.0.1"위와 같이 설치가 되었고,
cd my-app
npm install react@17.0.2 react-dom@17.0.2
(yarn add react@17.0.2 react-dom@17.0.2)위와 같이 작성하면 기존의 버전 위에 내가 입력한 버전으로 덮어 씌운다.
설치하고나서 불필요한 것들을 제거하였다.
그리고 해당 버전에 맞는 종속성 관리를 업데이트 하였다.
package.json 파일에서
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}로 수정하였고 yarn install을 통해 하위 버전으로 바꾸었다.
하지만 실수로 버전을 업데이트 할 수도 있어서 이를 대비하기 위해 버전 고정을 해야했다.
"dependencies": {
"@enact/core": "=4.1.4",
"@enact/spotlight": "=4.1.4",
"react": "=17.0.2",
"react-dom": "=17.0.2",
"react-scripts": "=5.0.1"
},위와 같이 =를 버전 앞에 붙여주면, 업그레이드해도 해당 버전이 유지가 된다.
이를 확인하기 위해
yarn outdated를 사용하여서 버전을 확인하였다.
yarn outdated v1.22.19
info Color legend :
"<red>" : Major Update backward-incompatible updates
"<yellow>" : Minor Update backward-compatible features
"<green>" : Patch Update backward-compatible bug fixes
Package Current Wanted Latest Package Type URL
@enact/core 4.1.4 4.1.4 4.7.1 dependencies https://enactjs.com
@enact/spotlight 4.1.4 4.1.4 4.7.1 dependencies https://enactjs.com
react 17.0.2 17.0.2 18.2.0 dependencies https://reactjs.org/
react-dom 17.0.2 17.0.2 18.2.0 dependencies https://reactjs.org/
Done in 0.94s.이 후 업그레이드를 통해 최선버전 업데이트하였다.
yarn upgrade아래처럼 버전이 유지가 되었다.
info Direct dependencies
├─ @enact/core@4.1.4
├─ @enact/spotlight@4.1.4
├─ react-dom@17.0.2
├─ react-scripts@5.0.1
└─ react@17.0.2중간에 yarn outdated를 사용하면 버전 체크가 이루어지는데
3가지 색깔로 현재 버전과 비교하며 알려준다
info Color legend :
"<red>" : Major Update backward-incompatible updates
"<yellow>" : Minor Update backward-compatible features
"<green>" : Patch Update backward-compatible bug fixes세 가지 업데이트 유형은 소프트웨어 업데이트의 규모와 영향력 차이에 기인합니다.
<red>: 주요(Major) 업데이트 - 이 유형의 업데이트는 기존 기능에 큰 변화가 발생하거나 새로운 기능이 추가됩니다. 이 경우 이전 버전과 호환되지 않을 수 있습니다. 주요 업데이트는 소프트웨어 아키텍처 변경이나 큰 규모의 새로운 기능 추가 시 이루어집니다. 주요 업데이트를 적용하려면 기존 코드와의 호환성에 주의 깊게 살펴보고, 가능한 테스트를 충분히 진행해야 합니다.
<yellow>: 부(Minor) 업데이트 - 이 유형의 업데이트는 새로운 기능이 추가되지만, 기존 기능과 호환성을 그대로 유지합니다. 이전 버전과 호환되는 방식으로 작동합니다. 이 업데이트는 성능 향상이나 추가 기능을 사용할 수 있게 함으로써, 부 업데이트를 적용할 때 크게 문제가 발생하지 않는 편이지만, 예외적인 경우 문제가 있을 수 있으므로 주의가 필요합니다.
<green>: 패치(Patch) 업데이트 - 이 유형의 업데이트는 기존 기능에 대한 버그 수정이나 소규모 개선 사항을 포함합니다. 패치 업데이트는 일반적으로 하위 호환성을 유지하므로, 기존 코드와 충돌하지 않습니다. 그러나, 버그 수정이나 성능 향상으로 인해 간혹 영향을 받을 수 있으므로, 업데이트를 적용하기 전에 가능한 테스트를 진행하는 것이 좋습니다. 패치 업데이트는 소프트웨어를 안정적이고 신뢰할 수 있는 상태로 유지하기 위한 업데이트로 자주 발표되고 적용됩니다. 패치 업데이트를 정기적으로 확인하고 적용함으로써 기존 시스템이 예상대로 작동하도록 할 수 있습니다
Yarn.lock 활용하기
Yarn.lock은 의존성 관리할 때 사용하기 좋다.
파일을 들어가면 내가 사용하는 라이브러리가 어떠한 것과 연관성이 있는지 확인할 수 있고,
package.json에 표기하는 것들 외에 설치되어있는 정보들을 보여준다.
"@enact/spotlight@=4.1.4":
version "4.1.4"
resolved "https://registry.yarnpkg.com/@enact/spotlight/-/spotlight-4.1.4.tgz#43b13c8206c171aa5e5137e6afb8f76c626f554e"
integrity sha512-jcSDO9sbM8XSXi445SIsZSP73G+igBBPchxwxhuuaCIgOoJaQQ7OrAgJEwDJ+ici4xn3WiOisrB10ROd0qFNPA==
dependencies:
"@enact/core" "^4.1.4"
classnames "^2.3.1"
prop-types "^15.8.0"
ramda "^0.27.1"
react "^17.0.2"
react-dom "^17.0.2"
warning "^4.0.3"cra를 사용하면서 보일러 플레이트에 대한 용어가 궁금하여서 정리하였다.
보일러 플레이트(boilerplate)
boilerplate 단어 그자체의 의미는 변경 없이 계속하여 재 사용할 수 있는 저작품을 말한다.
간단하게 말하면 빠르게 개발을 시작하기 위한 초기 설정의 집합이다. 즉, 주요한 라이브러리나 프레임워크 초기 설정을 건너뛰어 개발자가 언제든지 이용할 수 있는 기본 애플리케이션 구조로 볼 수 있다.
보일러 플레이트는 중복되는 작업을 줄이고 개발 팀의 생산성을 높인다. 코드의 개발과 기본 설정 요소들을 수작업으로 정의하는 것 대신 미리 설정된 코드와 구조를 사용하여 더욱 빠르게 어플리케이션을 구축할 수 있습니다.
예를 들어, React의 경우 Create React App 이라는 보일러 플레이트가 제공됩니다. 이 보일러 플레이트에는 React 프로젝트 개발에 필요한 초기 설정들이 미리 구성되어 있으므로, 개발자는 이 보일러 플레이트를 기반으로 시작해서 프로젝트를 더욱 쉽게 구축할 수 있다.
보일러 플레이트는 일반적으로 여러 컴포넌트와 라우팅 시스템, 상태 관리 라이브러리, 빌드 도구 등이 있는 프로젝트 폴더와 함께 제공됩니다. 이 제공된 기본 설정에서 시작하여 개발자는 적절한 라이브러리와 패키지를 추가하고 로컬적인 설정을 조정할 수 있습니다.
보일러 플레이트는 많은 경우에 사용됩니다. 아래는 일반적인 사용사례입니다.
기술 스택이 복잡한 프로젝트
새로운 기술 스택이나 어려운 함수들을 학습해야 하는 복잡한 프로젝트를 시작할 때, 보일러 플레이트를 사용하여 개발자들이 긴 시간을 사용하고자 하는 초기 설정을 시간 내에 완료할 수 있습니다.
재사용 가능한 구성 요소
보일러 플레이트를 사용하는 것은 재사용 가능한 구성 요소를 만드는 것과 비슷합니다. 보일러 플레이트를 사용하면, 공통적인 코드와 파일 구조를 재사용하고, 다음 번 프로젝트에서 빠르게 세팅할 수 있습니다.
호환 가능한 코드베이스
보일러 플레이트를 사용하면, 개발자가 추구하는 최신 기술이나 프레임 워크를 쉽게 업데이트할 수 있습니다. 또한, 프로젝트를 시작할 때 보일러 플레이트를 사용하면 코드베이스를 호환 가능하게 만들 수 있습니다.
개발에 집중
보일러 플레이트는 초기 프로젝트 설정을 쉽게 설정할 수 있도록 도와주므로, 개발자들은 주요 기능구현에만 집중할 수 있습니다. 초기 설정을 수동으로 시도하면 코드를 개발하고 기능구현하는 데에도 시간을 사용해야 하므로 보일러 플레이트를 사용하면 초기 설정에 시간을 낭비하지 않고 더욱 효율적으로 개발할 수 있습니다.
나중에 종속성 관리를 고려한다면 보일러 플레이트를 사용하는 것이 좋다.
끝으로
종속성관리를 사용할 일이 앞으로 많이 생기다보니 조사하였다.
그래도 생각보다 간단하게 버전을 변경하고, 호환하는 버전을 알아내는 것을 찾은 것 같아서 만족스럽다.
그리고 확실히 글에 사진이 적으니 읽기 힘들어보인다. 스크린샷을 더 열심히 찍어야겠다.
= 을 붙여서 버전 고정하는 법이 있었군요. 새로운 사실 배워갑니다ㅎㅎ