NPM

프론트엔드 개발에 Node.js가 필요한 이유

1.최신 스펙으로 개발할수 있다. js스펙의 빠른 발전에 비해 브라우져의 속도는 느리다. 바벨 같은 것으로 도움을 받고, Ts나 Sass와 같은 것을 사용하려면 Node 환경이 뒷받침 되어야 한다.

2.빌드 자동화

-과거에는 코딩 결과물을 브라우져에 바로 올렸지만 이제는 파일을 압축하고, 코드를 난독화하고, 폴리필을 추가한 후 배포한다. 라이브러리 의존성을 해결하고, 각종 테스트를 자동화 하는데 사용된다.

3. 개발 환경 커스터마이징: react의 cra을 사용하면 쉽게 개발 환경을 갖출 수 있다.

 

NPM: js기반 프로젝트의 빌드 도구. 

npm init: 질문에 답을 하면 package.json이 생성된다. 

Package.json: 프로젝트의 정보를 기록한다.

npm <command>: start(어플리케이션 실행), test(테스트), install(설치), build(소스 빌드), lint(소스 컨벤션 검사)

 

패키지 설치 종류

1. CDN: <script src="https://unpkg.com/react@16/umd/react.development.js"></script>와 같이 제공하는 라이브러리를 직접 가져오는 방식. cdn 서버가 장애가 일어나면 답이없다.

2. 직접 다운로드: cdn과 다르게 장애와 독립적으로 웹을 제공할 수 있을 것같지만, 라이브러리는 계속해서 업데이트 되기 때문에 귀찮기도 하고 ,호환성 여부를 확인해야한다. 

3. NPM을 이용한 방법: npm install 명령어로 외부패키지를 프로젝트에 다운. 

4.유의적 버전: { "dependencies": { "react": "^16.12.0" } }

 -패키지의 버전을 엄격하게 제한하면 버전업 하는데 힘들다. 느슨하게 풀어 놓으면 여러 버전별로 코드를 관리해야하는 혼란스러움이 있다.  주(Major),qn(Minor),수(Patch) 세가지 숫자를 조합해 버전을 관리한다.

 -주버전은 기존 버전고 호환되지 않게 변경한 경우

 -부 버전: 기존 버전과 호환되면서 기능이 추가된 경우

 -수 버전: 기존 버전과 호환되면서 버그를 수정한 경우

5.버전의 범위: 틸드(~), 캐럿(^)

 -~는 ~1.2.3은 1.2.3.부터 1.3.0까지 포함한다. 

-^캐럿: 정식 버전에서 마이너와 패치버전을 변경한다. ^1.2.3표기는 1.2.3.부터 2.0.0미만까지를 포함하고, 정식버전 미만인 0.x 버전은 패치만 갱신한다.