티스토리 뷰

Web/React

[React] package.json

풍요로운 해구름 2021. 7. 15. 21:33

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을 지원함

 

'Web > React' 카테고리의 다른 글

[React] ASP.NET Core React Project Template 사용  (0) 2021.07.23
[React] package.json  (0) 2021.07.15
[React] npm 설치 중 이슈 - fsevents  (0) 2021.07.07
[React] 리덕스를 이용한 상태관리  (0) 2021.07.04
[React] 클래스형 컴포넌트  (0) 2021.06.23
[React] useEffect()  (0) 2021.06.22
[React] useEffect()와 Side-Effect  (1) 2021.06.18
댓글
댓글쓰기 폼