2024년 4월 19일 Node.js

오늘은 node.js에 대해서 배워볼꺼양

node.js는 서버에 관한거고 출력물은 터미널에서 출력값을 볼 수 있어

저번이랑 동일하게 VS코드를 사용할 예정이야

 

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

설치
https://nodejs.org/en/

이터레이터(iterator)
- next() 메소드를 구현하는 객체
- next() 메소드는 현재 요소를 반환하고 다음 요소로 이동
- 이터레이터는 이터러블 객체의 요소를 반복하는데 사용

이터러블(iterable)
- 이터러블은[Symbol.iterator] 메소드를 구현하는 객체
- [Symbol.iterator] 메소드는 이터레이터를 반환하는 메소드
- 이터러블 객체는 for..of 루프나 배열 같은 반복 가능한 객체를 사용하는 문맥에서 반복될 수 있음

스프레드(spread) 연산자
- 전개구문이라고 함
- 모든 iterable은 spread가 될 수 있음
- 순회가능한 데이터는 펼쳐 질 수 있음

1. nodejs

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

 

2. functionjs

function sum(num1, num2){
    console.log('sum() 호출')
    return num1 + num2
}

const result = sum(10, 3)
console.log(result)

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

// 함수의 메모리 주소 전달하는 방법
const add = sum
console.log(sum(10, 3))
console.log(add(10, 3))

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

// 함수의 작성 팁
// 조건식이 있을 때 조건을 만족하지 않는 경우를 함수 도입부분에서 모두 처리 후 함수를 미리 종료
function print(num){
    if(num < 0) return
    console.log(num)
}

print(10)
print(-5)

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

// 매개변수의 기본값은 무조건 undefined
// arguments: 함수의 전달된 인수에 해당하는 값을 array 형태의 객체로 반환
function total(num1, num2){
    console.log(num1)
    console.log(num2)
    console.log('argument:', arguments)
    console.log('argument[0]:', arguments[0])
    console.log('argument[1]:', arguments[1])
    return num1 + num2
}

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

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

// 콜백함수 활용
const calc_add = (a, b) => a + b
const calc_multiply = (a, b) => a * b
console.log(calc_add(10, 3))
console.log(calc_multiply(10, 3))

// calculater(num1, num2, action)
function calculater(num1, num2, action){
    if(num1 < 0 || num2 < 0) return

    const result = action(num1, num2)
    console.log(result)
    return result
}

calculater(4, 2, calc_add)
calculater(4, 2, calc_multiply)

sum() 호출
13
-----------------
sum() 호출
13
sum() 호출
13
-----------------
10
-----------------
undefined
undefined
argument: [Arguments] {}
argument[0]: undefined
argument[1]: undefined
NaN
10
3
argument: [Arguments] { '0': 10, '1': 3 }
argument[0]: 10
argument[1]: 3
13
-----------------
13
30
6
8

 

3. object.js

const Rucy = {
    name: '루시',
    age: '14',
    'weight': 3.5,
    ['height']: 0.7,
    ['owner-name']: '김사과'
}

console.log(Rucy.name) // 객체지향에서 선호
console.log(Rucy.weight)
console.log(Rucy.height)
// console.log(Rucy.owner-name)
console.log(Rucy['owner-name']) // 반복문에서 사용 때문(단, .으로 접근 불가능)

Rucy.family = '포메라니안'
console.log(Rucy.family)
console.log(Rucy['family'])

console.log(Rucy)

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

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

// 동적으로 프러퍼티에 접근하는 함수
function getvalue(obj, key){
    return obj[key]
}

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

// 동적으로 요소를 추가하는 함수
// Rucy.family = '포메라니안'
function addkey(obj, key, value){
    obj[key] = value
}

addkey(Rucy, 'owner-name', '김사과')
console.log(Rucy)

// 동적으로 요소를 삭제하는 함수
// delete Rucy['owner-name']
function deletekey(obj, key){
    delete obj[key]
}

deletekey(Rucy, 'owner-name')
console.log(Rucy)

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


// 객체 생성 함수 만들기

// 좌표 객체 만들기
const x = 0
const y = 0
const coord = {x, y}
console.log(coord)

// 이름 나이를 전달하여 객체로 만들어주는 함수 만들기
function makeObj(name, age){
    return{name, age}
}

console.log(makeObj('김사과', 20))

// 리터럴 표기법으로 객체 만들기
const apple = {
    name: '김사과',
    display: function(){
        console.log(`${this.name}: 🍎`)
    }
}

const banana = {
    name: '반하나',
    display: function(){
        console.log(`${this.name}: 🍌`)
    }
}

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

console.log(apple)
apple.display()

console.log(banana)
banana.display()

//Fruit 생성자를 만들고 위 결과와 같은 동일한 결과를 출력하는 객체를 만들어보자
// Fruit(name, emoji)
// const apple = new Fruit('apple', '🍎')
// console.log(apple)
// apple.display()

function Fruit(name, emoji){
    this.name = name
    this.emoji = emoji
}

const vegitable = new Fruit('melon', '🍈')

const melon = {
    name: '이멜론',
    emoji: '🍈',
    display: function(){
        console.log(`${this.name}: 🍈`)
    }
}

console.log(melon)
melon.display()

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

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)
apple2.display()
console.log(banana2)
banana2.display()

루시
3.5
0.7
김사과
포메라니안
포메라니안
{
  name: '루시',
  age: '14',
  weight: 3.5,
  height: 0.7,
  'owner-name': '김사과',
  family: '포메라니안'
}
undefined
{ name: '루시', age: '14', weight: 3.5, height: 0.7, family: '포메라니안' }
-----------------
14
{
  name: '루시',
  age: '14',
  weight: 3.5,
  height: 0.7,
  family: '포메라니안',
  'owner-name': '김사과'
}
{ name: '루시', age: '14', weight: 3.5, height: 0.7, family: '포메라니안' }
-----------------
{ x: 0, y: 0 }
{ name: '김사과', age: 20 }
-----------------
{ name: '김사과', display: [Function: display] }
김사과: 🍎
{ name: '반하나', display: [Function: display] }
반하나: 🍌
{ name: '이멜론', emoji: '🍈', display: [Function: display] }
이멜론: 🍈
-----------------
Fruit { name: 'apple', emoji: '🍎', display: [Function (anonymous)] }
apple: 🍎
Fruit { name: 'banana', emoji: '🍌', display: [Function (anonymous)] }
banana: 🍌

 

4. class

class Fruit {
    // static
    // 정적 프러퍼티 및 메소드를 생성
    // 클래스 레벨 메소드에서는 this를 참조할 수 없음
    static count_fruit = 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)
apple.display()

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

console.log(Fruit.count_fruit)
const banana = Fruit.makeBanana()
console.log(banana)

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

// 객체지향 프로그래밍의 은닉성
// 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) 안됨

// Rucy.#name = '뽀미' 접근 자체가 안된다
// console.log(Rucy.name)

// set 프러퍼티가 실행
Rucy.name = '뽀미' // name : 메소드명
// get 프러퍼티가 실행
console.log(Rucy.name)

Rucy.run()
// Rucy.eat() private상태
Rucy.myEat()

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

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

class Counter{
    #cnt
        constructor(cnt){
        this.#cnt = cnt
        if(isNaN(cnt) || cnt < 0){
        this.#cnt = 0
        }else{
        this.#cnt = cnt
        }
    }

    get cnt(){
        return this.#cnt
    }

    increment = () => {
        this.#cnt++
    }
}

const cnt2 = new Counter(-1)
console.log(cnt2.cnt)

cnt2.increment()
cnt2.increment()
console.log(cnt2.cnt)

Fruit { display: [Function: display], name: 'apple', emoji: '🍎' }
apple: 🍎
-----------------
10
Fruit { display: [Function: display], name: 'banana', emoji: '🍌' }
-----------------
Dog { run: [Function: run], myEat: [Function: myEat] }
루시
set 뽀미
뽀미
흰색 색상의 강아지 뽀미 달립니다
뽀미 사료를 먹습니다.
-----------------
0
2

 

5. inherit

class Animal {
    constructor(color){
        this.color = color
        
    }
    eat(){
        console.log('먹습니다')
    }
    sleep(){
        console.log('잡니다.')
    }
}

class Dog extends Animal {
    constructor(color){
        super(color)
    }

    play() {
        console.log('놉니다.')
    }
    // 오버라이딩
    eat(){
        console.log('맛있게 먹습니다')
    }
}

const Rucy = new Dog('흰색')
console.log(Rucy)
Rucy.eat()
Rucy.sleep()
Rucy.play()

/*
문제

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

const kim = new FullTimeEmployee('김사과', '개발팀')
const ban = new PartTimeEmployee('반하나', 'QA팀')

*/
// 나의 버전
class Employee{
    constructor(name, fieldname, work){
        this.name = name
        this.fieldname = fieldname
        this.work = work
    }

    function(){
        const daily_works = 21
        return 0
    }
}

class FullTimeEmployee extends Employee{
    constructor(name, fieldname, work){
        super(name, fieldname, work)

    }

    function(){
        const daily_price = 200000
        const daily_works = 21
        console.log(`이름: ${this.name}, 부서명: ${this.fieldname}, 근무일: ${this.work}일`)
        return `급여: ${daily_price * daily_works}원`
    }

}

class PartTimeEmployee extends Employee{
    constructor(name, fieldname, work){
        super(name, fieldname, work)
    }

    function(){
        const daily_price = 100000
        const daily_works = 21
        console.log(`이름: ${this.name}, 부서명: ${this.fieldname}, 근무일: ${this.work}일`)
        return `급여: ${daily_price * daily_works}원`
    }
}

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

// 강사님 버전
class Employee{
    static dayPerMonth = 21
    constructor(name, department, payRate){
        this.name = name
        this.department = department
        this.payRate = payRate
    }
    calculater(){
        return this.payRate * Employee.dayPerMonth
    }
}

class FullTimeEmployee extends Employee{
    static PAY_RATE = 200000
    constructor(name, department) {
        super(name, department, FullTimeEmployee.PAY_RATE)
    }
}

class PartTimeEmployee extends Employee{
    static PAY_RATE = 100000
    constructor(name, department) {
        super(name, department, PartTimeEmployee.PAY_RATE)
    }
}

const kim1 = new FullTimeEmployee('김사과', '개발팀')
const ban2 = new PartTimeEmployee('반하나', 'QA팀')
console.log(kim1.calculater())
console.log(ban2.calculater())

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

 

6. iterator

const arr = [1, 2, 3, 4, 5]
console.log(arr.values())
console.log(arr.entries())
console.log(arr.keys())

const iterator = arr.values()

while(true){
    const item = iterator.next()
    if(item.done) break
    console.log(item.value)
}

for(let item of arr){
    console.log(item) // 이터러블 객체때문에 반복문 가능
}

Object [Array Iterator] {}
Object [Array Iterator] {}
Object [Array Iterator] {}
1
2
3
4
5
1
2
3
4
5

 

7. iterable

function iterable(){
    let index = 0
    let data = [1, 2, 3, 4]

    return {
        next(){
            if(index < data.length){
                return{value:data[index++], done:false}
            }else{
                return{value:undefined, done:true}
            }
        }
    }
}

let i = iterable()
console.log(i.next())
console.log(i.next())
console.log(i.next())
console.log(i.next())
console.log(i.next())

{ value: 1, done: false }
{ value: 2, done: false }
{ value: 3, done: false }
{ value: 4, done: false }
{ value: undefined, done: true }

 

8. spread

// 원시값과 객체값의 비교
// 원시값: 값에 의한 복사가 일어남
// 객체값: 참조에 의한 복사(메모리 주소)

function display(num){
    num = 10
    console.log(num) // 10
}

const value = 5
display (value)
console.log(value) //  5

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

// 객체의 값을 변경하는 것은 좋지 않은 알고리즘
function displayObj(obj){
    obj.age = 14
    console.log(obj)
}

const Rucy = {name:'루시', age:10}
displayObj(Rucy)
console.log(Rucy)

// 객체를 복사하여 age를 변환하고 해당 객체를 반환
function changeAge(obj){
    return {...obj, age: 6}
}

PPomi = changeAge(Rucy)
console.log(Rucy)
console.log(PPomi)

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

function add(num1, num2, num3){
    return num1 + num2 + num3
}

console.log(add(10,20,30))
const nums = [10, 20, 30]
console.log(add(nums[0], nums[1], nums[2]))

console.log(add(...nums))

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

const fruits1 = ['🍎', '🍈']
const fruits2 = ['🍔', '🍕']
let arr = fruits1.concat(fruits2)
console.log(arr)
arr = [...fruits1, ...fruits2]
console.log(arr)
arr = [...fruits1, '🍌', ...fruits2]
console.log(arr)

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

const apple = {name:'김사과', age:20, address: {si:'서울시', gu:'서초구', dong:'양재동'}}
console.log(apple)
const new_apple = {...apple, job: '프로그래머'}
console.log(apple)
console.log(new_apple)

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

const fruits = ['🥐','🥨','🥯','🥖','🫓']
const [fruit1, fruit2, ...others] = fruits
console.log(fruit1)
console.log(fruit2)
console.log(others)

function sendEmoji(){
    return ['🥐','🥨','🥯','🥖','🫓']
}

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

const [f1, f2, f3, f4, f5] = sendEmoji()
console.log(f1)
console.log(f2)
console.log(f3)
console.log(f4)
console.log(f5)

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

console.log(new_apple)

function display({name, age, address, job}){
    console.log('이름', name)
    console.log('나이', age)
    console.log('주소', address)
    console.log('직업', job)
}

display(new_apple)

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

const {name, age, pet='루시', address, job: hobby} = new_apple
console.log(name)
console.log(age)
console.log(pet)
console.log(address)
console.log(hobby)

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

const component = {
    name: 'Button',
    styles:{
        size:20,
        color: 'black'
    }
}

function changeColor({styles: {color}}){
    console.log(color)
}

changeColor(component)

이름 undefined
나이 undefined
주소 undefined
직업 undefined
5
-----------------
{ name: '루시', age: 14 }
{ name: '루시', age: 14 }
{ name: '루시', age: 14 }
{ name: '루시', age: 6 }
-----------------
60
60
60
-----------------
[ '🍎', '🍈', '🍔', '🍕' ]
[ '🍎', '🍈', '🍔', '🍕' ]
[ '🍎', '🍈', '🍌', '🍔', '🍕' ]
-----------------
{
  name: '김사과',
  age: 20,
  address: { si: '서울시', gu: '서초구', dong: '양재동' }
}
{
  name: '김사과',
  age: 20,
  address: { si: '서울시', gu: '서초구', dong: '양재동' }
}
{
  name: '김사과',
  age: 20,
  address: { si: '서울시', gu: '서초구', dong: '양재동' },
  job: '프로그래머'
}
-----------------
🥐
🥨
[ '🥯', '🥖', '🫓' ]
-----------------
🥐
🥨
🥯
🥖
🫓
-----------------
{
  name: '김사과',
  age: 20,
  address: { si: '서울시', gu: '서초구', dong: '양재동' },
  job: '프로그래머'
}
이름 김사과
나이 20
주소 { si: '서울시', gu: '서초구', dong: '양재동' }
직업 프로그래머
-----------------
김사과
20
루시
{ si: '서울시', gu: '서초구', dong: '양재동' }
프로그래머
-----------------
black

지금까지 node.js였어 복습하고 재업로드 예정