NodeJS

NodeJS?

Chrome V8 JavaScript 엔진으로 빌드된 JavaScript Runtime

NVM

설치

NVM 설치 주소 에 들어가서 아래의 화면으로 이동합니다.

그러고 난 후에 아래의 코드를 복사한 후에 Terminal에 복사합니다.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

윈도우 사용자

윈도우 사용자들 아래의 링크를 들어가면 된다.
nvm-window
그 후에 Download Now! 를 찾아서 눌러주면 됩니다.

해당 URL로 이동 한 뒤에 아래의 zip 파일을 받으면 됩니다.

사용법

# NVM 으로 설치한 Node 버전 목록
nvm ls

# NVM으로 특정 버전의 node 설치
nvm install 12.14.1

# NVM으로 특정 버전의 node를 사용
nvm use 12.14.1

NPM

NPM?

NodePackageManager는 전 세계의 개발자들이 만든 다양한 기능 들을 관리

테스트 환경 구축

# NodeJS 초기화
npm init -y
# parcel-bundler 설치 devDependance
npm install parcel-bundler -D

npm install lodash

개발용 의존성 패키지 vs 일반 의존성 패키지

개발용 의존성 패키지 : 개발할 때만 필요하고 실제 빌드 후 운영에서는 사용하지 않는 경우를 의미한다.
일반 의존성 패키지 : 개발 + 운영시 모두 필요한 패키지를 의미한다.

개발 서버 실행과 빌드

dev

{
	// ...
	"main" : "index.js",
	"script" : {
		"dev" : "parcel index.html" 
	}
	// ...
}

package.json

npm run dev

를 입력하게 된다면, package.json에 있는 script를 자동으로 생성해준다.

import _ from 'lodash'

console.log(_.camelCase('hello world'));

Build

{
	// ...
	"main" : "index.js",
	"script" : {
		"dev" : "parcel index.html" ,
		"build" : "parcel build index.html"
	}
	// ...
}

package.json

npm run build

위 명령어를 입력시에는 Build가 되서, dist 파일 안에 build된 결과물이 보이게 됩니다
해당 빌드 결과물은 난독화를 진행하여 build 결과물을 추출합니다.

난독화?

작성된 코드를 읽기 어렵게 만드는 작업을 말합니다.
빌드된 결과(제품)는 브라우저에서 해석되는 용도로, 용량을 축소하고 읽기 어렵게 만드는 등의 최적화를 거치는 것이 좋습니다.

Bundle?

프로젝트 개발에 사용한 여러 모듈을 하나로 묶어내는 작업

유의적 버전(SemVer)

npm info lodash

실제 package.json 파일과 현재 설치된 버전이 다를 수도 있습니다.
정확한 해당 node package의 버전을 보고 싶다면, 해당 node_modules에서 해당 패키지 명 안에 있는 package.json을 찾아보는 것이 제일 정확한 방법입니다.

특정 패키지 버전 설치

# 특정 패키지 버전 설치
npm install lodash@4.17.20

# 패키지 버전 업그레이드
npm update lodash

^ 이 없다면, 해당 버전으로 Fix 된 상태이기에, 업데이트를 진행할 수가 없다.

ECMA Script

ECMA?

Java Script를 표준화 해주는 국제 표준 기구

실습

초기화

npm init -y

npm i parcel-bundler -D

package.json

{
	...
	 "scripts": {
		  "dev" : "parcel index.html",
		 "build" : "parcel build index.html"
  },
  ...
}

index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<script src="./main.js"></script>
	</head>
	<body>
		<h1>Hello World!</h1>
	</body>
</html>

main.js

console.log(typeof 'Hello World');
console.log(typeof 123);
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);
console.log(typeof {});
console.log(typeof []);

! 300

JS에서는 기본적으로 null, { }, [ ] 를 구분하지 못한다.
만약 이를 구분하기 위해서는 약간의 가미가 필요합니다.

function getType(data){
	return Object.prototyle.toString.call(data)
}

console.log(getType(123))
console.log(getType(false))

! 300

function getType(data){
	return Object.prototyle.toString.call(data).slice(8,-1)
}

console.log(getType(123))
console.log(getType(false))
console.log(getType(null))
console.log(getType({}))
console.log(getType([]))

! 300

getType.js

export default function getType(data){
	return Object.prototyle.toString.call(data).slice(8,-1)
}

export default 옵션을 사용한다면, 해당 함수를 전역으로 사용 할 수 있게 해줍니다.
해당 함수를 사용하면, 아래와 같이 사용할 파일에서 import를 해준다면 사용할 수 있습니다.

main.js


import getType from './getType.js'
...

JS 유효 범위

// 변수 유효 범위(Variable Scope)
// var, let, const

function scope(){
	if(true){
		const a = 123
		console.log(a)
	}
}

scope()

const와 let은 블록 레벨에서 변수를 선언합니다.
즉, 아래와 같은 코드는 에러가 나오게 됩니다.

function scope(){
	console.log(a) // 2번
	if(true){
		console.log(a) // 1번
		const a = 123
	}
}

const 와 let은 해당 레벨에서 2번에서는 Error를 내뿜습니다.
- 해당 부분을 블록 레벨에서 유효 범위를 갖는다 라고 합니다.
하지만, var 는 블록 레벨이 아닌 함수 레벨입니다.
- 그렇기에, 아래의 부분에서 에러를 내지 않습니다.

unction scope(){
	console.log(a) // 2번
	if(true){
		console.log(a) // 1번
		var a = 123
	}
}

JS 형 변환

// Truthy (참 같은 값)
// true, { }, [], 1, 2, 'false', -12, '3.14'

// Falsy(거짓 같은 값)
// false , '', null, undefined, 0, -0, NaN

함수

화살표 함수

const double = function(x){
	return x * 2
}
console.log('double: ', double(7))

const doubleArrow = (x) =>{
	return x * 2
}
// 위 함수와 같은 결과로 출력된다.
const doubleArrow = x => x * 2
console.log('doubleArrow', double)

const doubleArrow = x => { x * 2 }
// 위와 같은 형태로는 반환 할 수 없다.

const doubleArrow = x => false
//와 같이 대부분의 자료형을 위와 같이 넣을 수 있다.
// 하지만, 예외적으로 { } 같은 경우에는 아래와 같이 작성해야합니다.

const doubleArrow = x => ({
	name : 'Kim'
})

IIFE

IIFE?

Immediately-Invoked Function Experession
즉시 실행 함수

const a = 7
function double(){
	console.log(a * 2)
}

double( );
/**

보통의 경우에는
위와 같이 함수 선언 -> 함수 호출 이런식으로 되어있지만, 
즉시 호출 함수를 사용하면 아래와 같은 형태로 생성 된 즉시 호출이 가능합니다.

*/ 

(function(){
	console.log(a * 2)
})();

Hosting

Hosting?

함수 선언부가 유효범위 최상단으로 끌어올려지는 현상

const a = 7

double() // 1번

const double = function() {
	console.log(a * 2);
}

1번 일때는 아래와 같이 에러가 발생합니다.
- 당연하게도 double() 이라는 함수가 없기 때문에 발생한 에러 입니다.
  ! 300
하지만,

const a = 7

double()

function double(){
	console.log(a * 2)
}

함수 호이스팅에 의해서 함수로 선언된 곳은 JS 엔진에서 최 상단으로 끌어올리게 됩니다.

타이머 함수

setTimeout(함수, 시간) : 일정 시간 후 함수 실행
setIntervval(함수, 시간) : 시간 간격마다 함수 실행
clearTimeout( ) : 설정된 Timeout 함수를 종료
clearInterval( ) : 설정된 Interval 함수를 종

#FrontEnd #JavaScript #NodeJS