[26.02.02] React 재직자 수업 1 - npm 설치 package.json 의미

\

리액트 모듈의 차이

기본적으로 commonjs모듈 쓴다

바꿔줄 필요가 있다.

 

리액트의 모듈을 가져오는 방법을 알아야 한다.

 

ES6 모듈시스템

 export default 또는 export로 내보낼 객체 또는 함수지정

 import문으로 모듈가져옴,

– 여러번import 하더라도 모듈은한번만실행– 따라서리턴된객체또는함수는동일

 

export default는 딱 한번만 쓸수있다.

 

모듈A는 같이 export 

모듈B는각각 export , export default로 가져옴

 

 

모듈 b처럼 디폴트로 익스포트 하면 그냥 가져오면 된다.

그러나 모듈 a처럼 각각 export하면 중괄호를 써서 가져온다.

리액트 초반에는 외부 패키지를 설치할때 YARN을 많이 썼는데 요즘은 npm을 기본으로 많이 쓴다.

 

npm i를 보통 난 많이 사용함

 

터미널에  npm으로 제이쿼리를 설치해봄

프로젝트 안에 노드 모듈이 설치가 된다.

그리고

package-lock.json이 설치가 된다.

또한 package.json이 변경됨.

 

설치한 모듈의 의존성이 자동 추가됨

 

제이쿼리 즉 내가 설치한 라이브러리의 사용하는 의존성을 보여준다

내가 설치한 모듈의 외부 라이브러리까지 싹 다 설치가 됨.

 

우리가 사용하는것은 package-lock.json을 보면 전체를 다 볼 수 있다.

 

npm 프로젝트 개발용 설치!!

개발할때만 쓰고 최종 산출물에서는 포함이 안되도록 하고싶으면 

npm install -D 옵션을 준다.

그러면 package.json에서 dev dependency로 들어가게 된다.

부트스트랩이 내부적으로 popperjs를 의존하기때문에 같이 설치가 됨.

 

npm전역으로 설치!

프로젝트를 앞으로 만들때 마다 다른 프로젝트에서 쓸수있음

--global

npm install -g

저장위치는

windows: C:/Users/<계정>/AppData/Roaming/npm/node_modules

이렇게 설치가 됨

 

삭제할때는 

npm uninstall 

 

 

package.json 파일의 버전 기술방법

 

 1.1.1: npm install 시 동일한 버전만 설치

 ^1.1.1: npm install 시 minor 버전은 업데이트 가능함(1.2.0가 설치될 수 있음)

 ~1.1.1: npm install 시 patch 버전은 업데이트 가능함(1.1.2가 설치될 수 있음)

 >=, <=, >, <는 이상, 이하, 초과, 미만으로 업데이트 가능함(npm install bootstrap@<5)

 @latest는 가장 최신버전으로 업데이트 가능 함 - npm i XXX@latest

 @next로 가장 최신 배포판으로 업데이트 가능 함(불안정함) -이런거 실제 프로젝트에 쓰지마라...

 알파/베타/RC 버전까지표시할경우(1.1.1-alpha.0, 2.0.0-beta.1, 2.0.0-rc.0)

 

 

package-lock.json 파일

 npm으로 패키지를 설치 할 때 생성되는 파일

 node_modules에 설치된 패키지의 정확한 버전과 의존관계가 기술되어있음

 npm install 시에 package.json 대신 package-lock.json 을 사용

 협업 시 패키지들을 모두 동일한 버전으로 설치하도록 함 (Git 저장소공유)

    -npm install을 해주면 사용하는거 다 다운