JavaScript 런타임(runtime)
런타임이란? 프로그래밍 언어가 구동되는 환경. 어떤 프로그램이 동작할 때, 프로그램이 동작하는 곳.
ex) 크롬, 사파리 같은 웹 브라우저가 대표적인 JavaScript 런타임
이전에는 JavaScript 런타임이 웹 브라우저 밖에 없었으나, node.js라는 새로운 JavaScript 런타임이 등장하여 브라우저가 아닌 곳에서도 실행할 수 있게 해주어 웹 페이지 뿐만 아니라 서버와 같은 다른 프로그램도 만들 수 있게 되었다.
node.js
node.js 런타임의 등장으로 JavaScript 코드를 브라우저와 node.js 환경 모두에서 실행시킬 수 있다. HTMl <script>태그 내에 JavaScript 코드를 작성하면, 이 코드는 웹 브라우저에서 동작한다. CLI 환경에서 node <file_name> 명령어를 프롬프트에 입력하면 작성한 코드가 node.js라는 런타임에서 실행된다.
런타임이란 프로그래밍 언어가 실행되는 환경, 그리고 node.js는 JavaScript 런타임이다.
nvm
nvm이란? 패키지 매니저처럼 node.js의 다양한 버전을 관리하는 프로그램. nvm을 사용하면 node.js의 다양한 버전을 쉽게 설치하고, 사용할 수 있다. (윈도우 환경에서는 사용 불가)
nvm 설치
// 설치 명령어
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
// 설치 확인하는 방법
nvm --version
// "Command 'wget' not found" 에러 출력시, Package Manager로 wget 설치 후 진행
// Ubuntu
sudo apt update
sudo apt install wgetnode.js 설치
- nvm은 node.js의 다양한 버전을 쉽게 설치 가능. nvm 설치 후 node.js 설치 진행.
// node.js 설치 명령어 (--lts 가 아닌 원하는 node 버전을 적어줘도 됨)
nvm install --lts
// 설치 확인
node -vnvm으로 node 버전 변경
// 현재 nvm을 통해 설치한 node version 목록 확인
nvm ls
// 버전 변경
nvm use 버전넘버 // ex) nvm use 12.18.3 등 원하는 버전 작성nvm은 다양한 node version을 설치하고 관리할 수 있는 프로그램이다.
npm과 package.json
package.json?
- npm 모듈을 활용하기 위해 해당 모듈에 대한 정보를 담은 파일. 즉, 프로젝트(패키지) 전반에 관한 정보
- 이 프로그램을 실행시키기 위해 필요한 모듈들이 뭔지, 프로그램을 실행하는 방법, 테스트하는 방법 등이 명시되어 있음.
- 주의! 이 프로그램을 실행시키기 위해 필요한 실제 모듈은 따로 node_modules 라는 폴더에 저장된다. package.json에는 어떤 모듈이 필요한지에 대한 정보만 적혀 있음
- 장점 : 프로젝트 코드를 전달할 때, 포함하고 있는 모든 모듈을 다 전달하지 않아도 된다. package.json에서 필요한 모듈의 정보를 확인하고 사용하는 사람이 직접 다운받도록 하면 된다.
devDependencies
- 프로그램 실행과 관계없는 오로지 개발을 위해 필요한 dependency (의존성 모듈)
--save-dev옵션과 함께 install 실행시 자동으로 devDependencies에 추가된다.
// 명령어 예시
npm install mocha --save-devdependencies (필수 설치)
- 직접 실행과 관련 있는 dependency
npm install명령 시 package.json에 있는 dependency(의존성 모듈)를 바탕으로 설치된다.- devDependencies와는 다르게, 프로젝트가 돌아가기 위해 반드시 필요한 모듈들에 대한 정보가 작성되어 있음
ex) underscore, React 등 --save옵션과 함께 설치하면, 자동으로 dependencies에 추가된다. (생략 가능)
// 모듈 설치 및 dependencies에 추가
npm install --save react
// 생략 가능
npm install reactscript 항목
- CLI에서 사용 가능한 명령 목록 (npm script라고 부른다)
- 주로 실행(start), 테스트(test), 코드 검사(lint) 등을 기술한다.
- 이러한 작업이 항상 모든 프로젝트에 있는 것은 아니다. 테스트 케이스 통과만이 목적이면 start 스크립트조차 없을 수 있음.
- CLI에서 실행할 때에는
npm run <스크립트 이름>으로 실행한다.
npm?
- node.js 환경에서 외부 라이브러리를 다운로드 받기 위한 대표적인 방법
- node.js 생태계의 패키지 매니저
- "Node Package Manager" 일종의 앱스토어. 필요한 모듈을 다운로드 받을 수 있는, 모듈들이 모여있는 모듈 스토어.
npm 설치
npm install명령어 입력시, package.json에서 필요한 모듈(dependency)의 정보를 확인하고 해당하는 모듈을 알아서 다운받음.- 설치 완료시 프로젝트 폴더 내에 node_modules 디렉토리가 생성된다.
(다운로드 받은 모듈의 실제 저장 위치) - 프로젝트 코드마다 필요한 모듈이 다르므로 매번
npm install을 실행해주어야 한다.
// 설치 명령어
npm install🔥 Achievement Goals
- nvm, Nodejs, npm을 설치하고, 버전을 확인할 수 있다.
- 명령어 node를 이용해 JavaScript 파일을 실행할 수 있다.
ㄴ 짝수생성기 과제에서 package.json 파일의 "script"에 start 단축키로 node index.js를 설정하여npm run start로 파일을 실행해보았다. - 스프린트 시작 전 package.json 파일을 확인하고, npm install을 사용할 수 있다.
ㄴ "dependencies" 정보를 통해 필요한 모듈 === 설치될 모듈을 확인했고npm install하여 모듈이 자동으로 설치되도록 하여 프로그램이 실행될 수 있는 상태로 만들었다.
✍ 내일 할 일
- Sprint Calculator - Nightmare 관련 코드 Refactoring
- 계산기에 애니메이션 추가해보기
- 개인프로젝트 - Tamo 웹사이트 amount 영역 구현
개발자