node.js
node.js에서 사용하는 package.json과 npm script에 대해서 공부
1.devDependencies와 dependencies의 차이점
2.npm과 모듈의 이해
node.js VS browser
node.js는 JavaScript 런타임이다.
node.js와 브라우저의 차이에 대해 알아볼 것이다.node.js는 서버를 만드는 환경이다?
node.js를 서버를 만드는 환경이라고 오해하는 경우가 많다고 한다. node.js를 백엔드 환경이라고 생각하는 경우도 있다고 한다.
그럼, node.js는 정말 서버를 만드는 환경이고, 백엔드 환경일까?
정확히 말하면 node.js를 통해 웹서버를 만들 수 있고, 이 내용만 가지고 퍼진 오해라고 말할 수 있다.프론트 영역에서 node.js는 어떻게 사용될까?
node.js 공식 API 문서 & 유용한 키워드
[node.js 공식 사이트 API 문서 링크]
https://nodejs.org/dist/latest-v14.x/docs/api/
몇 가지 키워드들 알아보기
keyword content Command-line options CLI 환경에서 node.js 앱을 실행할 때 무엇을 고려해야 하는지? Console 콘솔을 어떻게 이용해야 하는지? Debugger 디버거를 어떻게 이용해야 하는지? Event 이벤트는 어떤 식으로 사용하는지? File system 파일시스템을 어떤 식으로 사용하는지? HTTP, HTTPS 웹 서버(HTTP 서버)를 어떻게 만들 수 있으며, 웹 요청은 어떤 식으로 보내는지? Path 파일 혹은 또는 디렉토리의 경로(Path)는 어떤식으로 다룰 수 있는지? Timers 타이머는 어떤 식으로 작동하는지?
node.js로 할 수 없는 것 (브라우저와의 차이점)
node.js에는 DOM이 존재하지 않는다!
위의 node.js에는 DOM이 존재하지 않는 말을 풀어보면,
window 객체, document 객체가 존재하지 않는 것을 의미한다.
document.querySelector( )와 같은 것도 당연히 존재하지 않는다.document는 DOM의 본질이라 그렇다고 치지만, window가 없으면 전역변수를 다뤄야 할 때 어떻게 해결할 수 있을까?
node.js에는 global 키워드가 존재한다.
window 객체 대신 global 키워드가 존재한다. window 객체와 똑같지는 않지만 대부분 스코프 규칙이 모듈과 관련되어 있는 경우가 많다.
그리고 fetch API도 node.js에는 존재하지 않아서 서버를 요청할 때 에는 다른 방법을 사용해야 된다.
node로 js파일 실행하기
node.js 환경에서 작성한 JavaScript 파일과 npm & package.json을 실행해 볼 것이다.
1. 파일 생성하기
간단한 함수를 작성한 뒤 CLI 환경에서 명령어 node로 js파일을 실행해 볼 것이다.
terminal에서 새로운 파일 1개를 만들거나 test editor nano을 이용해서 새로운 파일을 생성하고, 코드를 추가해 볼 것이다.
touch명령어를 사용해서 helloPrint.js 파일을 만든다.
$ touch helloPrint.js
vim 에서 파일 내용 수정하기
cat명령어를 사용해서 파일의 내용을 살펴 본다.
$ cat helloPrint.js
생성한 파일 실행하기
아래의 명령어를 입력하고 터미널에서 출력을 확인한다.
node.js 환경에서 JavaScript 파일을 실행 할 때에는 명령어
node에 실행할 파일의 이름을 입력한다.3. helloPrint.js 파일을 node 환경에서 실행하기
node helloPrint.js
helloPrint.js를 node 환경에서 실행한 결과
npm & package.json
하나의 프로그램에는 다양한 모듈들이 합쳐져서 만들어지게 된다.
검증된 코드 === 모듈을 가져다가 개발하게 된다.npm
node.js 환경에서 외부 라이브러리를 다운받을 때는 다양한 방법들이 있지만, 많이 쓰이는 것중 하나가 npm이다.
npm은 Node Package Manager로 필요한 모듈을 다운로드 할 수 있는 수 많은 모듈들이 모여있는 공간이라 생각하면 좋다.
리눅스의 패키지 매니저는 apt, macOS의 패키지 매니저가 brew인 것처럼
node.js의 패지키 매니저가 npm이다!
package.json
다른 사람들이 만들어놓은 모듈을 node.js에서는 npm 모듈이라고 부른다.
그리고, 이에 대한 정보를 모아놓은 곳이 package.json이다.package.json에는 프로젝트(패키지)의 전반적인 정보가 들어있다고 볼수 있다.
해당 프로그램을 실행히시키기 위해 필요한 모듈들과 프로그램을 실행시키는 방법, 프로그램을 테스트하는 방법 등이 명시되어 있다.* 프로그램을 실행시키기 위해 필요한 실제 모듈은 node_modules라는 폴더에 저장된다.
* package.json에는 어떤 모듈인지만 적혀있다.
{ "name": "nodejs-practice-project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "", "test": "mocha getListMultiplesOfTwo.test.js", "report": "mocha getListMultiplesOfTwo.test.js --sort --reporter @mochajs/json-file-reporter" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { }, "devDependencies": { "@mochajs/json-file-reporter": "^1.3.0", "chai": "^4.3.4", "mocha": "^8.3.2" } }
package.json이 가진 이점
프로젝트 코드를 전달 할 때 포함하고 있는 모듈들을 전달하지 않아도 된다.
그 이유는 package.json에 정리해 놓은 모듈들을 사용하는 사람들이 직접 다운받아서 사용하기 때문이다.그래서 해당 프로젝트에는 node_modules가 없고, package.json만 있어도 당황하지 않고, package.json에서 필요하다고 하는 모듈들을 npm을 이용해서 다운받아 사용하면 된다.
npm 사용방법은
npm install명령어를 입력하고, package.json에서 필요로 하는 모듈을 다운 받으면 된다.
그리고 npm install이 완료되면 node_modules 디렉토리가 생성되어있을 것이다!
devDependencies
개발이나 실행에 해당 모듈을 '의존'한다해서 '의존성(Dependency)'이라고 부른다. 프로그램 실행과는 관계없이 개발을 위한 필요한 의존성 모듈이다.
JSON 형식에서 key에 해당하는 것은 모듈 이름이고, 해당 값은 버전을 나타낸다.
devDependencies에는 해당 프로젝트를 개발하는 환경에서 필요한 모듈들이 무엇인지 적혀있다.
해당 모듈들은 실제 프로젝트의 동작 부분에 직접적으로 영향을 주지 않는 모듈들을 명시한다.
$ npm install [해당 모듈] --save-dev명령어는 --save-dev 옵션과 함께 install 실행 시 자동으로 devDependencies에 추가된다.
--> npm install을 이용하면 npm에 있는 모듈을 설치할 수 있다.
dependencies
dependencies는 devDependencies과는 다르게 해당 프로젝트가 실행되기 위해 반드시 필요한 모듈들이 무엇인지 적혀 있다.
--> 해당 프로젝트의 직접적인 실행과 관련있는 모듈들을 알려준다.
npm install [해당 모듈]
npm install --save [해당 모듈]--save 옵션과 함께 (--save 옵션 생략 가능하다) install 실행을 하면, 자동으로 dependencies에 추가된다.
왜 package.json에 모듈들을 정의해 놔야될까?
해당 프로젝트에 어떤 모듈이 필요하고, 프로그램을 어떻게 실행시킬 지 다른 사람들은 모를 수 있다. 그렇기 때문에, 어떻게 해야 실행되고, 어떤 모듈이 필요로 한지 알려주는 것이 필요하다.
해당 프로젝트에 대한 정보들을 알려주기 위한 역할을 맡고있는 것이 package.json 이라고 할 수 있다.
만약에 dependency 정보를 적지 않았다면..해당 프로젝트에서는 어떤 모듈을 사용하고 있겠지만, 다른 사람들은 어떤 모듈을 설치해야 프로그램이 작동되고 개발할 수 있는 지 모르기 때문에 꼭 알려줘야 된다.
script 항목
scripts 항목은 CLI에서 사용가능한 명령을 기술한다.
이것을 npm script라고 부른다.CLI에서 실행
npm run [해당 스크립트 이름]으로 실행한다.
위의 명령어를 입력하면, 해당 npm script가 어떤 내용을 실행하는 지 확인 가능하다.몇가지 scripts 예제
주로 실행, 테스트, 코드 검사(lint) 등을 기술한다.
작업 내용 실행 스크립트 node.js 앱 실행 npm run start 테스트 실행 npm run test 코드 검사 npm run lint
npm package / npm module / npm dependency
npm 패키지, npm 모듈, npm dependency는 전부 동일한 대상을 나타낸다.
'독립적인 하나의 완성된 조각'이라는 의미로 패키지라는 용어를 사용하고,
다른 프로그램에서 패키지를 가져다 쓰면 모듈이라고 부른다.
그리고, 다른 프로그램에서 해당 패키지를 모듈로 사용하면 프로그램을 실행할 때 해당 모듈에 의존할 수 밖에 없기 때문에 dependency(의존성)이라고 부른다.
arrow function
arrow function, 화살표 함수는 function 키워드를 화살표로 축약해서 표시하는 함수를 표시하는 방법이다.
이 문법은 ES6에서 도입되었다.
아래의 코드를 통해 함수 선언식, 함수 표현식, 화살표 함수를 알아보려고 한다.
함수 선언식
function addFunc(num1, num2) { return num1 + num2; } addFunc(3, 7);
함수 표현식
const multiplyFunc = function(num1, num2) { return num1 * num2; }; multiplyFunc(20, 3);
화살표 함수
- 함수의 본문(동작, body)에 return 문만 있는 경우: return 키워드 생략, { } 코드 블럭 생략
const divideFunc = (num1, num2) => num1 / num2; divideFunc(128, 4);
- 함수 내의 표현식이 두 줄 이상일 때: return 키워드 명시, { } 중괄호 작성
const remainderFunc = (num1, num2) => { const result = num1 % num2; return result; }; remainderFunc(30, 7);
화살표 함수에서 주의해야 할 점
- 올바른 작성법 (정상적으로 작동)
const add = (num1, num2) => num1 + num2;
- 올바르지 않은 작성 (undefined를 리턴한다)
const add = (num1, num2) => {num1 + num2};
- ( ) 소괄호를 작성할 시 정상 작동
const add = (num1, num2) => (num1 + num2);
화살표 함수 예시
화살표 함수는 클로저를 표현할 때 더욱 더 강력하다.
함수 표현식과 화살표 함수를 사용해서 클로저를 한번 만들어보려고 한다.
함수 표현식
const multiplyFunc = function(num1) { return function(num2) { return num1 * num2; } }; multiplyFunc(8)(7);
화살표 함수
- 아래는 기존 함수 표현식으로 만들어 놓은 divideFunc이다.
const divideFunc = function(num1) { return function(num2) { return num1 / num2; } }; divideFunc(8)(2);
- 함수의 function 키워드를 지워 볼 것이다.
1. 작성한 함수의 function 키워드를 지운다.
const divideFunc = (num1) => { return (num2) => { return num1 / num2; } }; divideFunc(8)(2);
2. 가장 안쪽에 위치한 return 키워드를 없앤다.
- return 생략시에는 중괄호 { }를 사용하지 않는다!!!
- 파라미터가 1개라면, 소괄호 ( )를 생략할 수 있다.
const divideFunc = num1 => { return num2 => num1/num2; }; divideFunc(6)(3);
3. 마지막 return 키워드를 생략한다.
클로저는 연속 된 여러 개의 화살표 함수로 표시할 수 있다.
const divideFunc = num1 => num2 => num1/num2; divideFunc(34)(3);
