Node.js 사용법

 

1.우선 Node.js를 설치한다.

2. 설치를 하면 Vscode에서 작성할수가 있다.

3. 설치가 완료되면 아래와 같이 터미널에서 확인해볼 수 있다.

 1) node -V

 2) npm -V

 

4. 1_nodejs.js 파일을 생성후 

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


터미널에 node 1_nodejs.js 치면
-->
안녕하세요 Node.js

 

2. Timeout.js

// Node.js 에서는 비동기식과 동기식이 있다.
// 1.동기식
function func1(){
    for(let i=0; i<10000000000; i++)
        return 100
}
console.log(func1())   //100


function func2(){
    return func1() + 100    
}
console.log(func2())   //200


function func3(){
    return func2() + 100
}
console.log(func3())   //300


console.log('프로그램이 시작 됩니다.')
const result = func3()
console.log(result)   //300
//차례대로 실행 되면 300이 반환


// 2. 비동기식

function timeout(){
    console.log('1번 실행')
    setTimeout(() => {
        console.log('2번 실행')
    }, 3000)
    console.log('3번 실행')
}

timeout()
-->
3초동안 1번실행 후 -> 3번 실행-> 2번 실행


/*
문제
주어진 초가 지나면 callback 함수를 호출하는 함수를 작성
(단, 주어진 초가 0보다 작으면 에러를 발생. callback 함수가 없으면 에러를 발생)

    function run(callback, seconds){
        '''
    }

    에러를 발생하는 문장
    throw new Error(메시지)

    callback: console.log('타이머 완료!')
*/

 

##문제

문제
주어진 초가 지나면 callback 함수를 호출하는 함수를 작성
(단, 주어진 초가 0보다 작으면 에러를 발생. callback 함수가 없으면 에러를 발생)

    function run(callback, seconds){
        ...
    }

    에러를 발생하는 문장
    throw new Error(메시지)

    callback: console.log('타이머 완료!')
---------------------------------------------

function run(callback, seconds){
    if(!callback){
        throw new Error('callback 함수가 없습니다.')
        console.log('타이머 완료!')
    }if(!callback || seconds < 0){
        throw new Error('초는 0보다 커야 합니다.')
    }
    setTimeout(callback, seconds)
}


run(() => {
    console.log('타이머 완료')
}, 3000)

-->
3초 후 타이머 완료

--------------------------------------
2.
function run(callback, seconds){
    if(!callback){
        throw new Error('callback 함수가 없습니다.')
        console.log('타이머 완료!')
    }
    if(!seconds || seconds < 0){
        throw new Error('초는 0보다 커야 합니다.')
    }
    setTimeout(callback, seconds)
}

try {
    run(() => {
        console.log('타이머 완료!')
    }, -3000) 
}catch(e){
    console.log(e)
    console.log('에러 발생 후 정상적인 종료')
}
-->
초는 0보다 커야 합니다.
에러 발생 후 정상적인 종료

 

3. inherit.js 상속

여기서

상속(Inheritance)과 전략 패턴(Strategy Pattern)은 둘 다 객체 지향 프로그래밍에서 코드 재사용과 확장성을 제공하는 방법이지만, 그 사용 목적과 적용 방법이 다릅니다.

 

1. 상속(Inheritance)

• 기본 개념: 한 클래스가 다른 클래스의 속성과 메서드를 물려받는 것.
• 사용 목적: 코드 재사용 및 계층 구조를 통해 기능 확장.
• 특징:
  • 강한 결합: 부모 클래스와 자식 클래스 사이에 강한 결합이 발생합니다.
  • 기능 확장: 부모 클래스의 기능을 확장하거나, 오버라이딩을 통해 기능을 변경합니다.
  • "몸통을 가지고 특정 기능 추가": 자식 클래스가 부모 클래스의 속성과 메서드를 상속받아, 이를 확장하거나 새로운 기능을 추가합니다.

2. 전략 패턴(Strategy Pattern)

• 기본 개념: 행위(전략)를 클래스로 캡슐화하고, 동적으로 전략을 변경할 수 있도록 하는 디자인 패턴.
• 사용 목적: 실행 중에 알고리즘을 선택하거나 변경할 수 있게 함.
• 특징:
  • 느슨한 결합: 행위(전략)와 이를 사용하는 컨텍스트 사이에 느슨한 결합을 유지합니다.
  • 유연성: 런타임에 전략을 변경할 수 있는 유연성을 제공합니다.

"몸통 가지고 그 안의 내부를 바꾸는 것": 전략 패턴에서는 컨텍스트 객체가 내부적으로 사용하는 알고리즘(전략)을 동적으로 변경할 수 있습니다.

 

상속의 예)

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)  // Dog { color: '흰색' }
Rucy.eat()       // 맛있게 먹습니다.
Rucy.sleep()    // 잡니다.
Rucy.play()     // 놉니다.
console.log('-----------')

 

4. ## 문제

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

    - const kim = new FullTimeEmployee('김사과', '개발팀')
    - const ban = new PartTimeEmployee('김사과', 'QA팀')
    - console.log(kim.calculatepay())
    - console.log(ban.calculatepay())

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 = 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 kim = new FullTimeEmployee('김사과', '개발팀')
const ban = new PartTimeEmployee('김사과', 'QA팀')
console.log(kim.calculatepay())  // 4200000 출력
console.log(ban.calculatepay())  // 2100000 출력

 

5. 
    원시값과 객체값의 비교
    - 원시값 : 값에 의한 복사가 일어난다. 
    - 객체값 : 참조에 의한 복사(메모리 주소)

    1. 스크롤을 올리거나 내리면 이전 section 또는 이후 section으로 이동
    (Intersection Observer) 기능
    2. 현재 ssection에 맞춰 메뉴에 포커스를 맞춤
    3. 1번 이동시 부드럽게 이동

 

1)

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

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

console.log('-----------')
객체의 값이 10에서 5로 바뀜

 

2)

function displayObj(obj){
    obj.age = 15
    console.log(obj)   // { name: '루시', age: 15 }
}

const Rucy = {name:'루시', age:10}
displayObj(Rucy)     // 객체의 값을 변경하는 것은 좋지않은 알고리즘
console.log(Rucy)   // { name: '루시', age: 15 }

function changeAge(obj){
    return { ...obj, age: 7 } 
}

PPomi = changeAge(Rucy)
console.log(Rucy)    // { name: '루시', age: 15 }
console.log(PPomi)   // { name: '루시', age: 7 }

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

 

3)

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

console.log(add(10, 20, 30))  //60


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

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

 

4)

//배열 선언
const fruits1 = ['🍎', '🍓']
const fruits2 = ['🍌', '🍟']
// 연결하다(concatenate)를 의미하는 배열의 concat() 메서드를 사용하면 하나의 배열에 다른 배열을 합칠 수 있음
let arr = fruits1.concat(fruits2)
//배열로 출력한다
//fruits1+fruits2을 출력
console.log(arr)               // [ '🍎', '🍓', '🍌', '🍟' ]
arr = [...fruits1, ...fruits2]
console.log(arr)              // [ '🍎', '🍓', '🍌', '🍟' ]

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

 

5)

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

 

6)

const fruits = ['🍎', '🍓', '🍌', '🍟']
const [fruit1, fruit2, ...others] = fruits
console.log(fruit1)   //🍎
console.log(fruit2)   //🍓
//other는 나머지 모든것 출력
console.log(others)   // [ '🍌', '🍟' ]


function sendEmoji(){
    return ['🍎', '🍓', '🍌', '🍟']
} 

const [f1, f2, f3, f4] = sendEmoji()
console.log(f1)  //🍎
console.log(f2)  //🍓
console.log(f3)  //🍌
console.log(f4)  //🍟

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

 

6)

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

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

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

display(new_apple)
// 이름 김사과
// 주소 { si: '서울시', gu: '서초구', dong: '양재동' }
// 나이 20
// 직업 프로그래머

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

 

7)

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

console.log(new_apple)
// {
//     name: '김사과',
//     age: 20,
//     address: { si: '서울시', gu: '서초구', dong: '양재동' },
//     job: '프로그래머'
//   }
function display({name, address, age, job}){
    console.log('이름', name)
    console.log('주소', address)
    console.log('나이', age)
    console.log('직업', job)
}


display(new_apple)
// 이름 김사과
// 주소 { si: '서울시', gu: '서초구', dong: '양재동' }
// 나이 20
// 직업 프로그래머

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

//키값이 바뀐다
const { name, age, pet='루시', address, job: hobby} = new_apple
console.log(name)    //김사과
console.log(age)     //20
console.log(pet)     //루시
console.log(address)  //{ si: '서울시', gu: '서초구', dong: '양재동' }
console.log(hobby)    // 프로그래머

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

 

8)

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

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

changeColor(component)  //black

 

4. Promise

  프로미스(Promise)
   - 비동기 작업의 완료 또는 실패를 나타내는 객체
   - 주로 서버 요청이나 타이머와 같은 비동기 작업에서 사용
   - 콜백 함수로 인한 콜백 지옥 문제를 해결

   상태
   - 대기 : 프로미스가 아직 완료되지 않은 초기 상태
   - 이행 : 비동기 작업이 성공적으로 완료되어 결과 값을 반환한 상태
   - 거부 : 비동기 작업이 실패하고 오류가 발생한 상태

   const myPromise = new Promise((resolve, reject) => {
        let success = true
        if(success){
            resolve('작업이 성공했습니다.')
        }else{
            reject('작업이 실패했습니다.')
        }
    })

    프로미스 사용법
    myPromise.then((message) => {
        console.log(message)
    })
    //실패시
    myPromise.catch(() => {
        console.log(error) 
    })
    항상실행
    myPromise.finally(() => {
    console.log('프로미스가 완료되었습니다.')  

 

프로미스  기본 문법
 new Promise((resolve, reject) => {
     if(조건) {
        resolve('성공!');
    }
         reject('실패');
     })

 

 

프로미스 예시)

//fetchData가 성공시
function fetchData(){
    return new Promise((resolve, reject) => {
    setTimeout(() => {
        const data = {user:'apple', age:20 }
        if(data){
            resolve(data)
        }else{
            reject('데이터를 가져오지 못했음')
        }
        }, 2000)        
    })
}

fetchData()
    .then((result)=> {
        console.log('성공', result)
    })
    .catch((error) => {
        console.log(error)
    })
    .finally(()=> {
        console.log('요청 완료') //항상 출력
    })

-->
성공 { user: 'apple', age: 20 }
요청 완료

 

2) promise- all 예시)

-오렌지 주석 처리 후 성공적으로 실행

오렌지 주석후 성공적으로 실행 할시

function getBanana() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('🍌')
        }, 1000)
    })
}

function getApple() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('🍎')
        }, 3000)
    }) 
}

// function getOrange(){
//     return Promise.reject(new Error('오렌지 없음'))
// }

getBanana()
    .then((banana) => getApple().then((apple) => [banana, apple]))
    .then(console.log)

// Promise.all: 병렬적으로 한번에 Promise들을 실행
Promise.all([getBanana(), getApple()])
    .then((fruits) => console.log('all', fruits))



//primise.all : 병렬적으로 한번에 promise들을 실행. 하나의 프로미스라도 실패하면 전체를 에러로 처리함
Promise.all([getBanana(), getApple()])
    .then((fruits) => console.log('all', fruits))

Promise.all([getBanana(), getApple()])
    .then((fruits) => console.log('all', fruits))
    .catch(console.log)


//promise.race : 주어진 promise 중에 가장 빨리 수행 되는것이 실행
Promise.race([getBanana(), getApple()])
    .then((fruits) => console.log('race', fruits))


// Promise.allSettled : 여러 프로미스를 병렬적으로 처리하되 하나의 프로미스가 실패해도 무조건 이행
Promise.allSettled([getBanana(), getApple()])
    .then((fruits) => console.log('all', fruits))
    .catch(console.log)
 
 -->
race 🍌
all [ '🍌', '🍎' ]
all [ '🍌', '🍎' ]
all [ '🍌', '🍎' ]
all [
  { status: 'fulfilled', value: '🍌' },
  { status: 'fulfilled', value: '🍎' }
]
[ '🍌', '🍎' ]

 

2-1) promise- all 예시)

- 오렌지 에러 발생

function getBanana() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('🍌')
        }, 1000)
    })
}
function getApple() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('🍎')
        }, 3000)
    }) 
}
function getOrange(){
    return Promise.reject(new Error('오렌지 없음'))
}

getBanana()
    .then((banana) => getApple().then((apple) => [banana, apple]))
    .then(console.log)

// Promise.all: 병렬적으로 한번에 Promise들을 실행
Promise.all([getBanana(), getApple()])
    .then((fruits) => console.log('all', fruits))



//primise.all : 병렬적으로 한번에 promise들을 실행. 하나의 프로미스라도 실패하면 전체를 에러로 처리함
Promise.all([getBanana(), getApple()])
    .then((fruits) => console.log('all', fruits))

Promise.all([getBanana(), getApple()])
    .then((fruits) => console.log('all', fruits))
    .catch(console.log)


//promise.race : 주어진 promise 중에 가장 빨리 수행 되는것이 실행
Promise.race([getBanana(), getApple()])
    .then((fruits) => console.log('race', fruits))


// Promise.allSettled : 여러 프로미스를 병렬적으로 처리하되 하나의 프로미스가 실패해도 무조건 이행
Promise.allSettled([getBanana(), getApple(),getOrange()])
    .then((fruits) => console.log('all', fruits))
    .catch(console.log)
-->
race 🍌
all [ '🍌', '🍎' ]
all [ '🍌', '🍎' ]
all [ '🍌', '🍎' ]
all [
  { status: 'fulfilled', value: '🍌' },
  { status: 'fulfilled', value: '🍎' },
  {
    status: 'rejected',
    reason: Error: 오렌지 없음
        at getOrange (C:\Chaeyeon\Web\Node.js\test.js:16:27)
        at Object.<anonymous> (C:\Chaeyeon\Web\Node.js\test.js:44:45)
        at Module._compile (node:internal/modules/cjs/loader:1546:14)
        at Object..js (node:internal/modules/cjs/loader:1689:10)
        at Module.load (node:internal/modules/cjs/loader:1318:32)
        at Function._load (node:internal/modules/cjs/loader:1128:12)
        at TracingChannel.traceSync (node:diagnostics_channel:315:14)
        at wrapModuleLoad (node:internal/modules/cjs/loader:218:24)
        at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:170:5)
        at node:internal/main/run_main_module:36:49
  }
]
[ '🍌', '🍎' ]

 

5. Async 와 await

async와 await는 자바스크립트에 가장 최근 도입된 비동기 처리 방식입니다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완했으며 가독성 높은 코드를 작성할 수 있습니다.

async는 함수 앞에 붙이는 키워드입니다. async는 asynchronous비동기라는 의미입니다. async function만 보고도 비동기 함수라는 것을 유추할 수 있습니다.

여기서 말하는 비동기는 콜백이 아니라 프로미스를 말하는 겁니다. 즉 async가 붙은 함수는 프로미스를 반환한다고 이해하면 되겠습니다.

await는 기다린다는 뜻의 영어입니다. 자바스크립트에서 사용하는 await는 무엇을 기다릴까요? 성공 또는 실패로 Promise 객체의 실행이 완료되기를 기다립니다. 그러므로 await의 뒤에는 Promise가 오게 됩니다. await는 async 키워드를 사용한 함수 안에서만 사용할 수 있습니다.

function getBanana() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('🍌')
        }, 1000)
    })
}

function getApple() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('🍎')
        }, 3000)
    }) 
}

function getOrange(){
    return Promise.reject(new Error('오렌지 없음'))
}

// getBanana()
//     .then((banana) => getApple().then((apple) => [banana, apple]))
//     .then(console.log)

async function fetchFruits(){
    const banana = await getBanana()
    const apple = await getApple()
    return [banana, apple]
}

fetchFruits().then((fruits) => console.log(fruits))   // [ '🍌', '🍎' ]

 

 

6. JSON

JSON은 JavaScript Object Notation의 약자입니다.

JSON은 좀 더 쉽게 데이터를 교환하고 저장하기 위하여 만들어진 텍스트 기반의 데이터 교환 표준입니다.

 

1) JSON 의 특징

1. JSON은 자바스크립트를 확장하여 만들어졌습니다.

2. JSON은 자바스크립트 객체 표기법을 따릅니다.

3. JSON은 사람과 기계가 모두 읽기 편하도록 고안되었습니다.

4. JSON은 프로그래밍 언어와 운영체제에 독립적입니다.

 

2) JSON의 표준

JSON은 2009년에 더글라스 크록포드(Douglas Crockford)가 처음으로 규정하였습니다.

현재 JSON은 RFC 7159와 ECMA-404라는 두 개의 경쟁 표준에 의해 규정되고 있습니다.

ECMA 표준에서는 문법만 정의할 정도로 최소한의 정보만 정의되어 있으며, RFC 표준은 문법 및 보안에 관련된 사항까지 일부 제공하고 있습니다.

 

const Rucy = {
    name: '루시',
    age: 15,
    eat: () => {
        console.log('먹습니다.')
    } 
}

console.log(Rucy)   // { name: '루시', age: 15, eat: [Function: eat] }
//json 변환
const json = JSON.stringify(Rucy)
console.log(json)     // {"name":"루시","age":15}
//json을 obj로 변환
const obj = JSON.parse(json)
console.log(obj)     // { name: '루시', age: 15 }

 

7. Fetch.html

   1) Fetch API

• 비동기 요청의 가장 대표적인 사례는 단연 네트워크 요청이다.
• 네트워크를 통해 이루어지는 요청은 그 형태가 다양한데 그중에서 URL로 요청하는 경우가 가장 흔하다.
• URL로 요청하는 것을 가능하게 해 주는 API가 바로 fetch API이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fetch test</title>
</head>
<body>
    <script>
        //데이터 받아온거 화면에 찍어줌
        fetch('http://date.jsontest.com/')
        .then((response) => {
            return response.json()
        })
        .then((data) => console.log(data.date))  // 11-07-2024
    </script>
</body>