01. Node.js

SMALL

1. Node.js

Node.js는 JavaScript 런타임 환경으로 서버 애플리케이션을 개발하는데 주로 사용됨

설치하기

노드.js 사이트: https://nodejs.org/en/

Node.js — Run JavaScript Everywhere

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

1. LTS 버전 다운

2. Next

3. 전체 설치

4. 체크 해제

@터미널 글자 크기 바꾸기

출력해보기

< js >
console.log('안녕하세요. Node.js!')

</js >

안녕하세요. Node.js!

2. 함수 (Function) 의 활용

함수 (매개변수 O)

< js >

function sum(num1, num2){

console.log('sum()호출!');

return num1 + num2;

}

const result = sum(10,3);

console.log(result);

console.log('-------------------');

//함수의 메모리 주소 전달하는 방법

const add = sum; //sum의 함수 메모리 주소를 add로 넘김

console.log(sum(10,3));

console.log(add(10,3));

</js >

sum()호출!
13
-------------------
sum()호출!
13
sum()호출!
13

호출 작성팁

< js >

// 함수의 작성팁

// 조건식이 있을 때 조건을 만족하지 않은 경우를 함수 도입 부분에서 모두 처리 후 함수를 미리 종료

function print(num) {

if(num<0) return; //미리 조건식을 걸어놓아서 음수는 실행되지 않음

console.log(num);

}

print(10); //10

print(-5); //실행되지 않음

</js >

매개변수 기본값: undefined

< js >

// 매개변수의 기본값은 무조건 undefined

// arguments : 함수의 전달된 인수에 해당하는 값을 array 형태의 객체로 반환

function total(num1, num2) {

console.log(num1);

console.log(num2);

console.log(`arguments:`,arguments);

console.log(`arguments[0]`,arguments[0]);

console.log(`arguments[1]`,arguments[1]);

return num1 + num2;

}

console.log(total());
console.log('-------------------');

console.log(total(10,3));

</js >

undefined
undefined
arguments: [Arguments] {}
arguments[0] undefined
arguments[1] undefined
NaN
-------------------
10
3
arguments: [Arguments] { '0': 10, '1': 3 }
arguments[0] 10
arguments[1] 3
13

✔ arguments?

위의 코드에서 arguments는 함수에 전달된 모든 인수를 포함하는 유사 배열 객체입니다.
함수 내부에서 arguments를 사용하여 전달된 모든 인수에 접근할 수 있습니다.
이것은 함수를 선언할 때 명시적으로 매개변수를 선언하지 않았거나,
선언한 매개변수보다 더 많은 인수를 전달할 수 있는 유연성을 제공합니다.

예를 들어, total(2, 3)를 호출하면 num1에는 2가 할당되고 num2에는 3이 할당됩니다.
arguments 객체는 [2, 3]과 같이 인덱스로 모든 전달된 인수에 접근할 수 있습니다.

따라서 arguments[0]은 첫 번째 전달된 인수를 나타내고, arguments[1]은 두 번째 전달된 인수를 나타냅니다.
이것은 함수 내에서 명시적으로 선언된 매개변수가 아니라도 모든 인수를 처리할 수 있도록 해줍니다.

콜백함수

< js >

// 콜백함수 활용

const calc_add = (a,b) => a + b;

const calc_mutiply = (a,b) => a * b;

console.log(calc_add(10,3));

console.log(calc_mutiply(10,3));

console.log('-------------------');

//calculater(num1, num2, action)_1

function calculater1(num1, num2, action){

console.log(action(num1, num2));

}

calculater1(4, 2, calc_add);

calculater1(4, 2, calc_mutiply);

console.log('-------------------');

//calculater(num1, num2, action)_2

function calculater2(num1, num2, action){

if(num1 < 0 || num2 < 0) return;

const result = action(num1, num2);

console.log(result);

return result;

}

calculater2(4, 2, calc_add);

calculater2(4, 2, calc_mutiply);

</js >

13
30
-------------------
6
8
-------------------
6
8

3. 객체 (Object )의 활용

객체 생성

< js >

const Rucy = {

age: 14,

'weight' : 3.5, //key가 됨

['height'] : 0.7, //[]에 넣어도 key가 됨

['owner-name'] : '김사과'

}

console.log(Rucy.name);

console.log(Rucy.age);

console.log(Rucy.weight);

console.log(Rucy.height);

// console.log(Rucy.owner-name); //만들어지긴 했는데 출력 오류

console.log(Rucy['owner-name']);

</js >

루시
14
3.5
0.7
김사과

console.log(Rucy.owner-name); --> 오류로 뜨는 이유

JavaScript에서 객체 속성에 접근할 때 사용하는 점 표기법(dot notation)에서 유효한 속성 이름으로 "-"를 사용했기 때문입니다.
JavaScript는 "-"를 객체 속성 이름으로 인식하지 못합니다.

console.log(Rucy['owner-name']); ---> 이렇게 수정해야 합니다.

객체에 생성자 추가

< js >

Rucy.family = '포메라니안';

console.log(Rucy.family);

console.log(Rucy['family']);

console.log(Rucy);

</js >

포메라니안
포메라니안
{ name: '루시', age: 14, weight: 3.5, height: 0.7, 'owner-name': '김사과', family: '포메라니안' }

객체 생성자 삭제

< js >

//삭제하기

delete Rucy['owner-name'];

console.log(Rucy['owner-name']);

console.log(Rucy);

</js >

undefined
{ name: '루시', age: 14, weight: 3.5, height: 0.7, family: '포메라니안' }

동적 함수

< js >

//동적으로 프러퍼티에 접근하는 함수

function getValue(obj, key) {

return obj[key];

}

console.log(getValue(Rucy,'age'))

//동적으로 요소를 추가하는 함수

function addKey(obj, key, value) {

obj[key] = value;

}

addKey(Rucy, 'owner-name','김사과')

console.log(Rucy);

//동적으로 요소를 삭제하는 함수

function deleteKey(obj, key){

delete obj[key];

}

deleteKey(Rucy, 'owner-name');

console.log(Rucy);

</js >

14
{ name: '루시', age: 14, weight: 3.5, height: 0.7, 'owner-name': '김사과' }
{ name: '루시', age: 14, weight: 3.5, height: 0.7 }

좌표객체

< js >

//좌표객체 만들기

const x = 0;

const y = 0;

const coord = {x,y};

console.log(coord);

</js >

{ x: 0, y: 0 }

객체 생성하는 함수 ( 매개변수: Value )
return {Key값1, Key값2,...};

< js >

//이름, 나이를 전달하여 객체로 만들어주는 함수 만들기

function makeObj(name, age){

return{name, age}; //key값

}

console.log(makeObj('김사과',20)); // { key값 : value }

</js >

{ name: '김사과', age: 20 }

객체 생성 후 값 출력하기 (1)

< js >

const apple = {

display: function(){

console.log(`${this.name}:🍎`)

}

const banana = {

display: function(){

console.log(`${this.name}:🍌`)

}

console.log(apple);

apple.display();

console.log(banana);

banana.display();

</js >

{ name: '김사과', display: [Function: display] }
김사과:🍎
{ name: ' 반하나', display: [Function: display] }
반하나:🍌

객체 생성 후 값 출력하기 (2)

< js >

/Fruit 생성자를 만들고 위 결과와 동일한 결과를 출력하는 객체를 만들어보자

//Fruit(name, emoji)

//const apple = new Fruit('apple','🍎');

//console.log(apple);

//apple.display();

function Fruit(name, emoji){

this.name = name;

this.emoji = emoji;

this.display= () => {

console.log(`${this.name}: ${this.emoji})`);

}

const apple2 = new Fruit('apple', '🍎');

const banana2 = new Fruit('banana', '🍌');

console.log(apple2);

apple.display();

console.log(banana2);

banana.display();

</js >

Fruit { name: 'apple', emoji: '🍎', display: [Function (anonymous)] }
김사과:🍎
Fruit { name: 'banana', emoji: '🍌', display: [Function (anonymous)] }
반하나:🍌

4. 클래스(Class) 심화

클래스 생성

< js >

class Fruit {

constructor(name, emoji){

this.name = name;

this.emoji = emoji;

}

display=() => {

console.log(`${this.name}: ${this.emoji})`)

}

const apple = new Fruit('apple', '🍎');

console.log(apple);

apple.display();

</js >

Fruit { display: [Function: display], name: 'apple', emoji: '🍎' }
apple: 🍎

static 함수
- 정적 프로퍼티 및 메서드를 생성
- 클래스 레벨 메소드(static)에서는 this를 참조할 수 없음

< js >

class Fruit {

//static 사용하기

//정적 프러퍼티 및 메서드를 생성

//클래스 레벨 메소드 에서 this를 참조할 수 없음

static count_fruits = 10;

static makeBanana(){

return new Fruit('banana', '🍌');

}

//기본 생성자 메서드

constructor(name, emoji){

this.name = name;

this.emoji = emoji;

}

display=() => {

console.log(`${this.name}: ${this.emoji}`)

}

const apple = new Fruit('apple', '🍎');

console.log(apple); // Fruit { display: [Function: display], name: 'apple', emoji: '🍎' }

apple.display(); //apple: 🍎

console.log('-------------------');

console.log(Fruit.count_fruits); // 10

const banana = Fruit.makeBanana();

console.log(banana); // Fruit { display: [Function: display], name: 'banana', emoji: '🍌' }

</js >

Fruit { display: [Function: display], name: 'apple', emoji: '🍎' }
apple: 🍎
-------------------
10
Fruit { display: [Function: display], name: 'banana', emoji: '🍌' }

객체지향 프로그램의 은닉성
- # : 외부에서 접근 불가
- (# 변수)에 접근하고 가져오기 위해서는
  set 변수()
  get 변수() 를 사용해야 합니다!

< js >

//객체지향 프로그램의 은닉성

//private

class Dog{

#name; //private

#color;

constructor(name, color){

this.#name = name;

this.#color = color;

}

//프로퍼티명과 setter 프로퍼티 메서드의 이름은 일치할 필요없음

set name(value){

console.log('set',value);

this.#name = value;

}

get name(){

return this.#name;

}

set color(value){

console.log('set',value);

this.#color = value;

}

get color(){

return this.#color;

}

run = () => {

console.log(`${this.#color} 색상의 강아지 ${this.name} 달립니다.`)

}

#eat = () => {

console.log(`${this.#name} 사료를 먹습니다.`)

}

myEat = () => {

this.#eat();

}

const Rucy = new Dog('루시','흰색');

console.log(Rucy);

console.log(Rucy.name);

console.log(`-----`)

//Rucy.#name = '뽀미' ; //접근 안됨_Private

//set() 메소드 실행

//프로퍼티: 변수이고 함수이기도 함

Q: 왜 get()은 실행되지 않는가?

Rucy.name = '뽀미' ;

Rucy.color = '빨강' ;

console.log(`-----`)

console.log(Rucy.name);

console.log(Rucy.color);

console.log(`-----`)

//바뀐 값 출력

//Rucy.set();

//Rucy.get();

Q:왜 실행되지 않는가?

Rucy.run();

//Rucy.#eat(); //실행안됨_Private!

Rucy.myEat();

</js >

Dog { run: [Function: run], ~~eat:~~ ~~[Function: eat](뜨지 않음)~~, myEat: [Function: myEat] }
루시
-----
set 뽀미
set 빨강
-----
뽀미
빨강
-----
빨강 색상의 강아지 뽀미 달립니다.
~~뽀미 사료를 먹습니다.~~
뽀미 사료를 먹습니다.

Rucy.set();과 Rucy.get();은 올바르게 실행되지 않습니다.
set과 get 메서드는 클래스의 속성에 대한 setter와 getter 함수를 정의할 때 사용됩니다.
예를 들어, set name(value)과 get name()과 같이 클래스 내에 이러한 메서드를 정의하고,
해당 메서드를 통해 속성에 접근하고 값을 설정하거나 가져올 수 있습니다.

Rucy.name = "새로운 이름";과 같이 속성에 값을 설정하거나
const name = Rucy.name;과 같이 값을 가져오는 방식으로 사용해야 합니다.

문제: 카운터 만들기
카운터를 0으로 값을 초기화 한 뒤 하나씩 값이 증가하는 메서드를 구현한 클래스를 만들어보자.
단, 객체 생성시 값이 0보다 작을 경우 0으로 초기화를 시키고 그 외의 값은 입력한 값으로 설정.
또한 프로퍼티에 값을 직접 불러오거나 설정할 수 있음

< js >

class Counter {

#value;

constructor(value){

if(isNaN(value) || value < 0) { // 문자열이거나, 0보다 작을 경우

this.#value = 0; // value=0 으로 초기화

}else {

this.#value = value; // value 그대로 유지

}

get value() {

return this.#value;

}

increment = () => {

this.#value++; //private 속성인 #value를 1씩 증가

}

const cnt = new Counter(-1);

console.log(cnt.value); //0

cnt.increment(); //vaule=1

cnt.increment(); // vaule= 2

console.log(cnt.value); //2

</js >

0
2

isNaN(value)
isNaN(value) 함수는 JavaScript에서 사용되는 내장 함수 중 하나로,
주어진 값이 숫자인지 여부를 판별합니다.
isNaN은 "Is Not a Number"의 줄임말입니다.

이 함수는 주어진 값이 숫자이면 false를 반환하고, 숫자가 아니면 true를 반환합니다.
따라서 주로 숫자로 변환할 수 있는 값이 제공되었는지 확인하는 데 사용됩니다.

isNaN(123); // false (숫자)

isNaN('hello'); // true (문자열)

isNaN(true); // false (불리언 값)

isNaN(undefined); // true (정의되지 않은 값)

숫자나 숫자로 변환할 수 있는 값에 대해서는 false를 반환하고,
그렇지 않은 경우에는 true를 반환합니다.

더 알아보기

⏺️ 클래스의 프로토타입 (Prototype of a Class)

class Dog{

constructor(name, color){

this.name = name;

this.color = color;

display=() => {

console.log(`${this.name}: ${this.emoji})`)

}

클래스의 프로토타입은 모든 인스턴스에서 공유되는 속성과 메서드의 원본입니다.

JavaScript에서 클래스는 실제로 프로토타입 기반 상속을 기반으로 합니다.
클래스를 정의하면 JavaScript 엔진은 해당 클래스의 프로토타입을 만들고, 클래스의 메서드를 프로토타입에 추가합니다.
프로토타입은 클래스의 모든 인스턴스에서 공유되므로, 인스턴스마다 메서드를 별도로 유지할 필요가 없습니다.
이것은 메모리를 효율적으로 사용하고 객체 간의 상속을 지원합니다.

⏺️ 클래스의 인스턴스 (Instance of a Class)

const Rucy = new Dog ('루시','흰색' ) );

클래스의 인스턴스는 클래스를 사용하여 생성된 개별 객체입니다.
클래스의 인스턴스는 클래스의 프로토타입에 정의된 메서드와 속성을 상속받습니다. 이러한 상속은 프로토타입 체인을 통해 이루어집니다.
인스턴스는 클래스의 생성자(constructor)를 호출하여 만들어집니다.
생성자는 인스턴스를 초기화하고 필요한 속성을 설정합니다. 생성자를 통해 인스턴스에 고유한 속성을 설정할 수 있습니다.

5. 상속 (Inherit)의 활용

상속

< js >

class Animal {

constructor(color){

this.color = color;

}

eat(){

console.log('먹습니다!')

}

sleep(){

console.log('잡니다!')

}

class Dog extends Animal{

//constructor(color) //에러

constructor(color) {

super(color);

}

play() {

console.log('놉니다!')

}

//오버라이딩

eat(){

console.log('맛있게 먹습니다!')

}

const Rucy = new Dog('흰색');

console.log(Rucy);

Rucy.eat();

Rucy.sleep();

Rucy.play();

</js >

Dog { color: '흰색' }
맛있게 먹습니다!
잡니다!
놉니다!

문제: 카운터 만들기

정직원, 아르바이트생을 나타낼 수 있는 클래스를 설계
부모 클래스: Employee
자식 클래스: FulltimeEmployee, PartTimeEmployee
직원의 정보: 이름, 부서명, 한달 근무 시간
급여: 정직원(일 200,000원), 아르바이트(일 100,000일)
매달 직원들이 정보를 이용해서 한달 급여를 계산하는 메서드를 구현(calculatePay)
한달의 근무일 수는 21일로 함

const kim = new FullTimeEmployee('김사과', '개발팀');
const ban = new PartTimeEmployee('반하나', 'QA팀');
console.log(kim.calculatePay());
console.lof(ban.calculatePay());

< js >

class Employee{

static daysperMonth = 21;

constructor(name, department, payRate){

this.name = name;

this.department = department;

this.payRate = payRate;

}

calculatePay(){

return this.payRate * Employee.daysperMonth;

}

class FullTimeEmployee extends Employee{

static PAY_RATE=100000;

constructor(name,department){

super(name,department,FullTimeEmployee.PAY_RATE);

}

class PartTimeEmployee extends Employee{

static PAY_RATE=50000;

constructor(name,department){

super(name,department,PartTimeEmployee.PAY_RATE);

}

const Kim=new FullTimeEmployee('김사과','공갈협박');

const ban=new PartTimeEmployee('반하나','시정잡배');

console.log(Kim.calculatePay());

console.log(ban.calculatePay());

</js >

2100000
1050000

'Web > Node.js' 카테고리의 다른 글

06. 버퍼(buffer), 스트림(Steam) (0)	2024.04.24
05. Console, This, file (0)	2024.04.23
04. JSON (0)	2024.04.23
03. timeout, promise, async (0)	2024.04.23
02. 이터레이터, 이터러블, 스프레드 (0)	2024.04.19

leesarr-study

01. Node.js

1. Node.js

2. 함수 (Function) 의 활용

3. 객체 (Object )의 활용