[React] package.json

Package.json

NPM에서 패키지를 관리하기 위한 파일

• dependencies : 프로젝트에서 항상 사용되는 모듈
• devDependencies : 개발환경에서만 사용되는 모듈
• scripts : NPM에 내장된 다양한 script를 언제 어떻게 실행할 것인지 설정
• browserlist : 지원 브라우저와 Node.js 버전 설정. 이 값은 프로젝트 내에서 공유되며 바벨에서 생성하는 스크립트에 영향을 미침

  //package.json
  {
      "browserslist": [
          "ie 11",      //IE11 지원
          ">0.2%",      //브라우저 점유율 0.2% 이상 지원
          "not dead",        //지원이 중단된 브라우저 제외
          "not ie <= 10",    //IE10 이하 제외
          "not op_mini all"  //오페라 미니 제외
      ]
  }
  

Semantic Versioning

NPM에서 설치될 패키지의 버전을 명시하는 규칙으로 Semantic Versioning을 사용함

• 0.0.0부터 1.0.0 미만은 Pre-release 버전을 의미하며, 1.0.0부터는 정식 배포 버전을 의미함
• 패키지 버전의 각 자리수는 MAJOR.MINOR.PATCH 번호를 나타냄
  

  MAJOR	기존 버전과 호환되지 않는 API변경이 발생했을 때 변경
  MINOR	기존 버전과 호환성을 유지하며 API를 추가했을 때 변경
  PATCH	기존 버전과 호환성을 유지하며 버그가 수정되었을 때 변경

• 설치할 패키지 버전 표현식
  

  구분	예시	설치범위	설명
  버전 기술	1.1	1.1.0 ~ 1.1.9	지정된 번호가 일치하는 패키지 설치
  A-B 형태	1.0.0 - 0.3.7	1.0.0 ~ 0.3.7	지정된 범위의 패키지 설치
  비교 연산자 사용	>1.0.2 >=1.0.2 <1.0.2 <=1.0.2 >1.0.2 <=2.3.4	1.0.2 초과 1.0.2 이상 1.0.2 미만 1.0.2 이하 1.0.2 초과 ~ 2.3.4 이하	지정된 범위 설치
  || 연산자 사용	<1.0.0 || >=2.3.1 <=2.4.5 || >=2.5.2 <3.0.0	1.0.0미만 또는 2.3.1이상 2.4.5이하 또는 2.5.2이상 3.0.0미만	하나라도 만족하면 설치
  latest 사용	latest	최신버전	항상 최신버전 설치
  '*' 사용	1.3.*	1.3.0 ~ 1.3.9	*이 지정된 자리는 모든 버전을 허용
  접미사 'X' 사용	1.X	1.1.0 ~ 1.9.9	X가 지정된 자리는 모든 버전을 허용
  접두사 '^' 사용	^1.0 ^2.0.3	1.0.0 ~ 1.9.9 2.0.3 ~ 2.9.9	호환성이 유지되는 범위 내에서 설치 (지정된 버전부터, MAJOR 버전이 일치하는 범위 내에서 설치)
  접두사 '~' 사용	~1.3.5 ~1.3 ~1	1.3.5 ~ 1.3.9 1.3.0 ~ 1.3.9 1.0.0 ~ 1.9.9	지정된 버전번호가 일치하는 선에서 최신버전 설치 1. MINOR버전이 지정된 경우: 지정된 버전부터, MINOR 버전이 일치하는 범위 내에서 설치 2. MAJOR버전만 지정된 경우: 지정된 버전부터, MAJOR 버전이 일치하는 범위 내에서 설치
  패키지 위치 지정	git://.../a.git#v1.0.27 https://.../a.git file:../a.tar.gz		지정된 위치에서 다운로드하여 설치

리액트 관련 패키지

리액트 프로젝트에서 자주 사용되는 패키지에 대해 설명함

리액트

• react : 리액트 코어
• react-dom : 브라우저 환경을 위한 리액트
• react-native : iOS와 Android를 위한 리액트
• react-scripts : Create React App 도구에 필요한 스크립트나 설정 포함
• react-app-polyfill : React를 IE11에서 실행시키기 위한 모듈

라우팅

• react-router : React에서 라우팅을 위해 사용하는 패키지, React 뿐만 아니라 ReactNative에서도 사용가능
• react-router-dom : Web을 위한 react-router 패키지. 브라우저의 History API를 사용해 라우팅을 지원
• connected-react-router : History 객체 등 라우팅 정보를 리덕스에 저장하고 조회하기 위한 패키지
• history : 리액트에서 History 관리를 위한 API 제공. 브라우저 뿐만 아니라 React-Native도 지원

상태관리

• redux : 자바스크립트 상태관리 프레임워크. 전역 상태관리 및 디버깅을 용이하게 함
• redux-thunk : 리덕스에서 액션을 비동기적으로 처리하기 위해 사용

기타

• popper.js : 툴팁, 팝오버를 위한 JavaScript 패키지. 화면 밖으로 벗어나거나 표시 위치에 대한 다양한 옵션제공
• merge : 자바스크립트 object 결합을 위한 다양한 Helper API 제공
• svgo :  svg 파일 최적화. 다양한 애플리케이션에서 생성되는 svg들은 불필요한 정보를 포함하거나 최적화되어 있지 않은 경우가 많은데 이를 모두 정리해줌
• rimraf : 리눅스나 맥의 rm --rf 명령어를 Windows에서도 사용할 수 있게 지원합니다. 리액트 빌드 시 이전의 파일들을 완전 삭제하고자 할 때 이 패키지를 사용합니다.

  /* package.json */
  {
    "scripts": {
    	//React를 시작하기 전 이전 빌드를 제거
      "start": "rimraf ./build && react-scripts start", 
      "build": "react-scripts build"
    }
  }
  

• oidc-client : OpenID Connect (OIDC)와 OAuth2를 지원하는 라이브러리. 로그인세션과 AccessToken에 대한 지원이 포함되어 있음
• cross-env : 운영체제에 상관없이 동일한 방법으로 환경변수를 설정할 수 있음. Windows, MacOs, Unix 환경을 지원하며 NodeJs의 process.env를 사용하기 때문에 NodeJs의 프로세스 레벨에서 환경변수가 유지됨

  /* package.json */
  {
    "scripts": {
      //cross-env를 통해 FIRST_ENV, SECOND_ENV 환경변수 설정 예시
      "build": "cross-env FIRST_ENV=one SECOND_ENV=two node ./my-program"
    }
  }
  

• ajv : ajv(Another Json Validator) 모듈은 JSON 스키마를 정의하고, JSON이 스키마를 통과하는지 검증하는 용도로 사용함
• nan : nan(Native Abstractions for Node.js)은 Node.js의 Native Add-on 제작을 위한 추상화 계층을 제공함. 쉽게 설명하면 애드온 제작에 자주 사용되는 매크로와 도구들을 제공하는 모듈
• browserify : NodeJs 환경에서는 모듈을 로드하기 위해 requrire('파일경로')형태의 메서드를 사용함. NodeJs가 아닌 환경에서도 require()메서드를 사용할 수 있도록 해주는 모듈
• axios : 비동기 통신을 위한 모듈, fetch와 비교했을 때 기능이 좀 더 많고 IE11을 지원함