Angular 준비하기
- Node.js의 기본 구성 및 개념
- Node.js가 프론트엔드 개발에 필요한 이유
- package.json 개념
Node.js의 기본 구성 및 개념
Node.js란?
Node.js는 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용하며 Non-blocking I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있습니다.
NPM 이란?
NPM은 Node Package Manager의 약자로 현재 Node.js에서 기본으로 사용하는 패키지 관리 도구입니다. 여기서 패키지란 JavaScript, HTML, CSS 등을 포함한 리소스들의 묶음입니다.
node.js 설치
https://nodejs.org/ko/download/ 로 들어가서 각자 자기의 개발환경으로 설치할 수 있습니다.
npm 설치
node.js가 무사히 설치가 잘되었다면 알아서 설치됩니다.
npm 주요 명령어
npm init
: 명령이 실행되는 위치에 package.json 파일을 생성하여 NPM관리를 위한 초기화 작업을 수행합니다.
npm install
: package.json 파일이 있는 경우 파일에 선언된 의존 패키지를 설치합니다. 또한 install 뒤에 패키지명을 입력하여 해당 패키지를 내려받습니다.npm uninstall
: uninstall 뒤에 패키지명을 입력하여 이미 설치된 패키지를 제거합니다.
- 추가옵션으로 --save, --save-dev 등을 사용할 수 있습니다.
--save
: 현재 경로에 package.json 이 존재하면 dependencies 항목에 자동으로 포함됩니다.--save-dev
: 만약 현재 경로에 package.json 이 존재하면 devDependencies 항목에 자동으로 포함됩니다.-g
: 패키지를 전역환경에 설치 // 해당 폴더 한정이 아니라는 이야기
- dependencies VS devDependencies
- dependencies와 devDepenencies 차이는 npm install을 할 때 나타난다. dependencies는 항상 설치되고 devDepenencies는 --production 옵션을 붙이면 빠진다. npm install “$package” 명령어로 설치할 때는 --dev 옵션을 붙여야지만 설치된다.
npm list
: 현재 설치된 패키지 목록을 트리 형태로 보여 줍니다.npm run
: package.json의 script에 선언된 명령을 수행합니다. 주로 반복적으로 사용하는 주요한 패키지 명령을 등록하여 사용합니다.
Node.js가 프론트엔드 개발에 필요한 이유
앵귤러 역시 최근 웹 프론트엔드 개발 환경과 마찬가지로 NPM기반으로 프로젝트를 구성하고 의존 패키지를 관리합니다. 또한 터미널환경에서 Node.js를 통하여 구동하기 때문이다.
의존패키지? 해당 패키지가 동작하기 위해서 반드시 필요한 패키지
"Angular에서도 의존성을 가진 패키지가 많이 존재하니까 NPM으로 프로젝트 생성 및 의존성패키지 관리를 하고 Apache처럼 localhost를 구동하는 게 아닌 터미널환경에서 하는 모양이다."
package.json 개념
NPM을 사용할 때 가장 중요한 파일로, 우리가 작성한 패키지나 웹 프로젝트의 정보를 JSON 포맷으로 담고 있는 파일입니다.
이름, 버전, 저자 등 패키지를 설명하는 정보뿐 아니라 의존 패키지 정보도 이 안에 선언합니다.
JSON 포맷?
JSON은 JavaScript Object Notation의 약자로 속성-값 쌍으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷
npm init을 이용해서 package.json파일 만들기
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
test용으로 npm init
을 했을 때 기본으로 생성되는 package.json 파일의 내용이다.
'Front_End > Angular' 카테고리의 다른 글
05. Angular로 개발하기 - 3 - 구조 지시자 (0) | 2017.08.19 |
---|---|
04. Angular로 개발하기 - 2 - 서비스/의존성주입 (0) | 2017.07.29 |
03. Angular로 개발하기 - 1 - src/app, Component, Data Binding (0) | 2017.07.28 |
02. Angular 시작하기 (0) | 2017.07.08 |
00. Angular의 개념/구조 (0) | 2017.07.03 |