콜백 헬이라고 불리는 지저분한 자바스크립 코드의 해결책

 - 프로미스 : 내용이 실행은 되었지만 결과를 아직 반환하지 않은 객체

 - Then을 붙이면 결과를 반환합니다.

 - 실행이 완료되지 않았으면 완료된 후에 Then 내부 함수가 실행됩니다.

 - Resolve(성공리턴값) -> then 으로 연결

 - Reject(실패리턴값) -> catch로 연결

 - Finally 부분은 무조건 실행됩니다.

 

const condition = true; // true 면 resolve, false면 reject
const promise = new Promise((resolve, reject) => {
  if (condition) {
    resolve("성공");
  } else {
    reject("실패");
  }
});

//다른 코드가 들어갈 수 있음
promise
  .then((message) => {
    console.log(message); // 성공(resolve)한 경우 실행
  })
  .catch((error) => {
    console.error(error);
  });

 

결과값

D:\code\node\lecture2>node test1.js
성공

 

promise.all(배열) : 여러 개의 프로미스를 동시에 실행

 - 하나라도 실패하면 catch로 감

 - allSettled로 실패한 것만 추려낼 수 있음

const promise1 = Promise.resolve("성공1");
const promise2 = Promise.resolve("성공2");
Promise.all([promise1, promise2])
  .then((result) => {
    console.log(result); // ['성공1','성공2'];
  })
  .catch((error) => {
    console.error(error);
  });

 

결과값

D:\code\node\lecture2>node test1.js
[ '성공1', '성공2' ]

 

Async/awit 으로 한 번 더 축약 가능

function findAndSaveUser(Users) {
  Users.findOne({})
    .then((user) => {
      user.name = "gildong";
      return user.save();
    })
    .then((user) => {
      return Users.findOne({ gender: "m" });
    })
    .then((user) => {
      //생략
    });
}

 

Async function 의 도입

 - 변수 = await 프로미스; 인 경우 프로미스가 resolve 된 값이 변수에 저장

 - 변수 await 값; 인 경우 그 값이 변수에 저장

async function findAndSaveUser(Users){
  let user = await Users.findOne({});
  user.name = 'gildong';
  user = await user.save();
  user = await Users.findOne({gender : 'm'});
  //생략
}

 

for await ( 변수 of 프로미스배열)

 - resolve된 프로미스가 변수에 담겨 나옴

 - await을 사용하기 때문에 async 함수 안에서 해야함

const promise1 = Promise.resolve("성공1");
const promise2 = Promise.resolve("성공2");
(async () => {
  for await (promise of [promise1, promise2]) {
    console.log(promise);
  }
})();

 

결과값

D:\code\node\lecture2>node test1.js
성공1
성공2

 

 

 화살표 함수는 기존 함수 문법을 완벽하게 대체할 수는 없습니다.

기존 함수로 사용을 해야만 하는 때도 있습니다.

// add1, add2, add3, add4 모두 동일한 함수
function add1(x, y) {
  return x + y;
}

const add2 = (x, y) => {
  return x + y;
};

// add3과 같이 간결하게 변경이 가능하지만 헷갈릴 수 있어서 add4로 주로 씁니다.
const add3 = (x, y) => x + y;
const add4 = (x, y) => (x + y);

 

// not1을 not2로 변경 가능, 매개변수가 1개일 때는 괄호도 생략 가능
function not1(x){
  return !x;
}

const not2 = x => !x;

 

// 객체를 바로 return 할 때는 (괄호)를 꼭 작성해야 합니다.
const obj = (x,y) =>({x,y});

 

기존 function 문법이 안 사라진 이유는 기존 this 때문입니다.

function 에서는 this를 따로 갖는데 화살표 함수는 부모의 this를 물러 받습니다.

 

var relationship1 = {
  name: "gildong",
  friends: ["a", "b", "c"],
  logFriends: function () {
    var that = this; // relationship1을 가리키는 this를 that에 저장
    this.friends.forEach(function (friend) {
      console.log(that.name, friend);
    });
  },
};
relationship1.logFriends();

 

결과화면 

D:\code\node\lecture2>node test1.js
gildong a
gildong b
gildong c

 

화살표 함수가 기존 function(){}을 대체하는 것은 아닙니다.(this가 달라짐)

- logFriedns 메서드의 this 값에 주목

-  forEach의 function의 this와 logFriends의 this는 다름

- that 이라는 중간 변수를 이용해서 logFriends의 this를 전달

 

this를 사용해야 할 때는 function 을 사용하고

this를 사용하지 않을 때는 화살표 함수를 사용하는 것을 추천합니다.

 

'Javascript > Node' 카테고리의 다른 글

프로미스 promise async await  (0) 2024.11.02
템플릿 문자열 객체 리터럴  (0) 2024.10.31
var const let 자바스크립트 변수 상수  (0) 2024.10.30
Node.js 다운로드 설치 최신버전 22버전  (0) 2024.10.29
서버 노드  (0) 2024.10.28
let year = 2024;
let result = "올해는" + year + "년입니다.";
console.log(result);

 

위와 같이 코딩을 하면 결과는 아래와 같습니다.

올해는2024년입니다.

 

띄어쓰기가 안 되었기 때문에 아래와 같이 수정을 해야 합니다.

let year = 2024;
let result = "올해는 " + year + "년 입니다.";
console.log(result);

결과는 아래와 같습니다. 

올해는 2024년 입니다.

 

const result2 = `올해는 ${year}년 입니다.`;
console.log(result2);

최신 문법에서는 바뀌어서 위와 같이 사용 가능합니다.

변수를 ${} 로 감싸주면 됩니다.

띄어쓰기 할 때도  보기 좋게 바뀌었습니다.

``를 빽틱 문자열 , 템플릿 문자열이라고 부릅니다. 

 

객체 리터럴

>> 훨씬 간결한 문법으로 객체 리터럴 표현 가능

  - 객체의 메서드에 :function을 붙이지 않아도 됩니다.

  - { sayNode : sayNode } 와 같은 것을 { sayNode }로 축약 가능합니다.

const sayNode = function () {
  console.log("Node");
};

const es = "ES";

const newObject = {
  sayJS() {
    console.log("JS");
  },
  sayNode,
  [es + 6]: "Fantastic",
};

newObject.sayNode(); // 실행결과 : Node
newObject.sayJS(); // 실행결과 : JS
console.log(newObject.ES6); // 실행결과 : Fantastic

 

>> ES2015 이전에는 var로 변수를 선언

  -  ES2015부터는 const 와 let 이 대체

   - 가장 큰 차이점 : const 와 let은 블록 스코프(var는 함수 스코프)

if (true) {
  var x = 3;
}
console.log(x);

if (true) {
  const y = 3;
}
console.log(y);

 

실행하면 아래와 같은 에러가 발생

console.log(y);
            ^
ReferenceError: y is not defined

 

>> 기존 : 함수 스코프(function() {}이 스코프의 기준점)

 - 다른 언어와는 달리 if 나  for, while 은 영향을 미치지 못함

 - const 와 let 은 함수 및 블록 ({})에도 별도의 스코프를 가짐

 

const a = 3;
a = 5;

const b = { name: "hong" };
b.name = "Hong";

const 는 =(등호) 를 한 번만 사용할 수 있다고 이해하면 쉽다.

위와 같이 = 을 두 번 이상 사용하면 아래와 같이 에러가 발생한다.

a = 5;
  ^
TypeError: Assignment to constant variable.

하지만 b 와 같이 객체를 사용하고 객체 안에서 다른 것을 대입하는 것이 가능하다.

값의 변경이 필요하면 let을 사용하면 된다.

let c = 5;
c = 3;
c = 10;

 

 

'Javascript > Node' 카테고리의 다른 글

화살표함수 자바스크립트 arrow function  (0) 2024.11.01
템플릿 문자열 객체 리터럴  (0) 2024.10.31
Node.js 다운로드 설치 최신버전 22버전  (0) 2024.10.29
서버 노드  (0) 2024.10.28
노드의 특성  (0) 2024.10.27

>> 윈도우 기준  (아래 주소로 접속 )

  - https://nodejs.org 

 

Node.js — Run JavaScript Everywhere

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

nodejs.org

 

아래 Download Node.js (LTS) 클릭
 - LTS는 Long Term Support 를 줄인 말로 3년정도 안정적인 버전을 말하는 것이다. 

 

node-v22.11.0-x64.msi 이름으로 다운된 파일을 더블클릭 (버전에 따라 파일이름은 달라질 수 있음)

 

Next 클릭

 

accept 왼쪽에 체크하고 Next 클릭

 

Next 클릭

 

Next 클릭

 

Automatically 왼쪽 체크하고 Next 클릭
 - Automatically install 체크 안 했을 경우 나중에 후회하는 경우가 많으므로 꼭 설치하는 것을 추천

 

Install 클릭

 

설치 중에 중간에 팝업화면이 뜨면서 설치할 건지 물어보면 예(Yes) 누르시고 넘어 가시면 됩니다.

 

 

 

Finish 버튼 클릭

 

 

아무 키나 누르시면 됩니다. 위 화면과 같이 비슷한 화면 두번 정도 나올 수 있습니다.

 

중간에 팝업화면이 나올 수 있는데 허용할 건지 물어보고 누르시면 됩니다.

 

Enter 누르라는 화면 나올 수 있습니다. ENTER 누르시면 자동으로 종료 됩니다.
저와는 로그 내용이 다를 수 있지만 별다른 에러가 발생하지 않으면 정상입니다.

 

Node.js 가 정상적으로 설치 되면 아래와 같은 방법들로  확인이 가능합니다.

 

윈도우 버튼 누른 후에 node 로 검색 후 Node.js 앱 실행 

 

 

윈도우 버튼 누르고 cmd 검색해서 명령 프롬프트 실행

 

node 입력 후 엔터 누르면 Node.js 실행 되는 것 확인 (22.11 버전도 확인 가능)

'Javascript > Node' 카테고리의 다른 글

템플릿 문자열 객체 리터럴  (0) 2024.10.31
var const let 자바스크립트 변수 상수  (0) 2024.10.30
서버 노드  (0) 2024.10.28
노드의 특성  (0) 2024.10.27
노드의 정의  (0) 2024.10.26

서버로서의 노드

 >> 서버 : 네트워크를 통해 클라이언트에 정보나 서비스를 제공하는 컴퓨터 또는 프로그램

 >> 클라이언트 : 서버에 요청을 보내는 주체(브라우저, 데스크탑 프로그램, 모바일 앱, 다른 서버에 요청을 보내는 서버)

 >> 예시

   - 브라우저(클라이언트, 요청)가 길벗 웹사이트(서버, 응답)에 접속

   - 핸드폰(클라이언트)을 통해 앱스토어(서버)에서 앱 다운로드

 >> 노드 != 서버

 

 >> 노드서버의 장단점

장점 단점
멀티 스레드 방식에 비해 컴퓨터 자원을 적게 사용함 싱글 스레드라서 CPU 코어를 하나만 사용함
I/O 작업이 많은 서버로 적합 CPU 작업이 많은 서버로는 부적합
멀티 스레드 방식보다 쉬움 하나뿐인 스레드가 멈추지 않도록 관리해야 함
웹 서버가 내장되어 있음 서버 규모가 커졌을 때 서버를 관리하기 어려움
자바스크립트를 사용함 어중간한 성능
JSON 형식과 호환하기 쉬움  

 

 >> CPU 작업을 위해 AWS Lambda나 Google Cloud Functions 같은 별도 서비스 사용

 >> 페이팔 , 넷플리스, 나사 , 월마트, 링크드인, 우버 등에서 메인 또는 서브 서버로 사용

 

 

서버 외의 노드 

 >> 자바스크립트 런타임이기 때문에 용도가 서버에만 한정되지 않음

 >> 웹, 모바일, 데스크탑 애플리케이션에도 사용

  - 웹 프레임워크 : Angular, React, Vue, Meteor 등

  - 모바일 앱 프레임워크 : React Native

  - 데스크탑 개발 도구 : Electron(Atom, Slack, VSCode, Discord 등 제작)

 

 

 

'Javascript > Node' 카테고리의 다른 글

var const let 자바스크립트 변수 상수  (0) 2024.10.30
Node.js 다운로드 설치 최신버전 22버전  (0) 2024.10.29
노드의 특성  (0) 2024.10.27
노드의 정의  (0) 2024.10.26
노드 교과서 섹션0  (0) 2023.09.07

1. 이벤트 기반

 >> 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식

   - 이벤트의 예 : 클릭, 네트워크 요청, 타이머 등

   - 이벤트 리스너  : 이벤트를 등록하는 함수

   - 콜백 함수 : 이벤트가 발생했을 때 실행될 함수

 

2. 논블로킹 I/O

 >> 논 블로킹 : 오래 걸리는 함수를 백그라운드로 보내서 다음 코드가 먼저 실행되게 하고, 나중에 오래 걸리는 함수를 실행 

   - 논 블로킹 방식 하에서 일부 코드는 백그라운드에서 병렬로 실행됨

   - 일부 코드 : I/O 작업(파일 시스템 접근, 네트워크 요청), 압축, 암호화 등

   - 나머지 코드는 블로킹 방식으로 실행됨

   - I/O 작업이 많을 때 노드 활용성이 극대화 

 

3. 프로세스 vs 스레드

 >> 프로세스와 스레드

  - 프로세스 : 운영체제에서 할당하는 작업의 단위, 프로세스 간 자원 공유 X

  - 스레드 : 프로세스 내에서 실행되는 작업의 단위, 부모 프로세스 자원 공유

 

 >> 노드 프로세스는 멀티 스레드이지만 직접 다룰 수 있는 스레드는 하나이기 때문에 싱글 스레드라고 표현

 

 >> 노드는 주로 멀티 스레드 대신 멀티 프로세스 활용

 

 >>  노드는 14버전부터 멀티 스레드 사용 가능

 

4. 싱글 스레드

 >> 싱글 스레드라 주어진 일을 하나밖에 처리하지 못함

   -  블로킹이 발생하는 경우 나머지 작업은 모두 대기해야 함  -> 비효율 발생

 

>> 주방에 비유 ( 점원 : 스레드 , 주문 : 요청, 서빙 : 응답)

 

>> 노드는 논 블로킹 모델을 채택하여 일부 코드(I/O)를 백그라운드(다른 프로세스)에서 실행 가능

  - 요청을 먼저 받고, 완료될 때 응답함

  - I/O 관련 코드가 아닌 경우 싱글 스레드, 블로킹 모델과 같아짐

 

 

'Javascript > Node' 카테고리의 다른 글

Node.js 다운로드 설치 최신버전 22버전  (0) 2024.10.29
서버 노드  (0) 2024.10.28
노드의 정의  (0) 2024.10.26
노드 교과서 섹션0  (0) 2023.09.07
노드 교과서 섹션 1  (0) 2023.09.06

Node.js는 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임입니다.

 - 서버의 역할도 수행할 수 있는 자바스크립트 런타임

 - 노드는 자바스크립트로 작성된 서버를 실행할 수 있음.

 - 서버 실행을 위해 필요한 http/https/http2 모듈을 제공

 

노드 : 자바스크립트 런타임

 - 런타임 : 특정 언어로 만든 프로그램을 실행할 수 있게 해주는 가상 머신(크롬의 V8 엔진사용)의 상태

 - 노드 : 자바스크립트로 만든 프로그램들을 실행할 수 있게 해 줌

 - 다른 런타임으로는 웹 브라우저(크롬, 엣지, 사파리, 파이어폭스 등)가 있음

 

노드는 V8과 libuv를 내부적으로 포함

 - V8 엔진 :오픈 소스 자바스크립트 엔진 -> 속도 문제 개선

 - libuv : 노드의 특성인 이벤트 기반, 논블로킹 I/O 모델을 구현한 라이브러리

 

 

'Javascript > Node' 카테고리의 다른 글

서버 노드  (0) 2024.10.28
노드의 특성  (0) 2024.10.27
노드 교과서 섹션0  (0) 2023.09.07
노드 교과서 섹션 1  (0) 2023.09.06
노드 교과서 섹션 2  (0) 2023.09.05

참고 깃헙 주소 : https://github.com/zerocho/nodejs-book

에러질문방법

질문 제목에 질문의 요약을 작성한다.

스무고개 하지 않는다.

에러메세지를 일부만 올리지 말고 전체를 올려준다.

코드를 보여준다.

듣는 사람의 입장을 생각해야 한다.

 

노드는 자바스크립트 런타임이다.

서버의 역할도 수행할 수 있는 자바스크립트 런타임

싱글 스레드, 비동기 모델

 

이벤트 기반

이벤트가 발생할 때 미리 지정해 둔 작업을 수행하는 방식

논블로킹 I/O

논 블로킹 : 오래 걸리는 함수를 백그라운드로 보내서 다음 코드가 먼저 실행하게 하고, 나중에 오래 걸리는 함수를 실행

프로세스와 스레드

프로세스 : 운영체제에서 할당하는 작업의 단위, 프로세스 간 자원공유X

스레드 : 프로세스 내에서 실행되는 작업의 단위, 부모 프로세스 자원 공유

 

싱글 스레드

싱글 스레드라 주어진 일을 하나밖에 처리하지 못함

대신 논 블로킹 모델을 채택하여 일부 코드(I/O) 를 백그라운드(다른 프로세스)에서 실행 가능

요청을 먼저 받고, 완료될 때 응답함

I/O 관련 코드가 아닌 경우 싱글 스레드, 블로킹 모델과 같아짐

'Javascript > Node' 카테고리의 다른 글

노드의 특성  (0) 2024.10.27
노드의 정의  (0) 2024.10.26
노드 교과서 섹션 1  (0) 2023.09.06
노드 교과서 섹션 2  (0) 2023.09.05
노드 교과서 섹션 3  (0) 2023.09.01
// 템플릿 문자열
const won = 1000;
const result = `이 과자는 ${won}원입니다.`;

// 객체 리터럴
con newObject = {
    sayJS() {
        console.log('JS');
    },
    sayNode,
    [es + 6] : 'Fantastic',
};

newObject.sayNode(); // None
newObject.sayJS(); // JS
console.log(newObject.ES6); // Fantastic


// 화살표 함수
function add1(x, y) {
    return x + y;
}

const add2 = (x,y) => {
    return x + y ;
};

const add3 = (x, y) => x + y;
const add4 = (x, y) => (x + y);

function no1(x){
    retrun !x;
}

const not2 = x => !x ;

// 비구조화 할당
const example = {a: 123, b:{c :135, d:146}}
const a = example.a;
const b = example.b.d;

const {a,b:{d}} = example;
console.log(a); // 123
console.log(b); // 146

arr = [1,2,3,4,5]
const x = arr[0]
const y = arr[1]
const z = arr[4]

const [x,y,,,z] = arr;

 

 

//프로미스
const condition = true; //true 면 resolve, false면 reject
const promise = new Promise((resolve, reject) => {
    if (condition) {
        resolve('성공');
    } else {
        reject('실패');
    });
   
    // 다른 코드가 들어갈 수 있음
    promise
        .then((message) => {
            console.log(message);
        })
        .catch((error) => {
            console.error(error);
        })
       
    // async/await
        // 변수  = awsit 프로미스;인 경우 프로미스가 resolve 된 값이 변수에 저장
        // 변수 await 값; 인 경우 그 값이 변수에 저장
       
    async function findAndSaveUser(Users){
        let user = await User.findOne({});
        user.name = 'zero';
        user = await user.save();
        user = await Users.findOne({ gender : 'm'});
    }
   
    async function main(){
        try {
            const result = await promise;
            return result;
        } catch (error){
            console.error(error);
        }
    }

 

 

// map/set
// ES2015에는 새로운 자료구조들이 추가 되었습니다. 그 중 자주 쓰이는 것은 Map과 Set 입니다.
// Map 은 객체와 유사하고, Set은 배열과 유사하다고 생각하면 됩니다.
const m  = new Map();
m.set('a','b');
m.set('c','d');
m.get('a') // 'b'
m.size  // size 속성 개수 조회

for (const [k, v] of m){ // 반복문에 바로 넣어 사용 가능
    console.log(k, v); // 'a','b'
} // 속성 간의 순서도 보장됨

m.forEach((v,k) => { // forEach 도 사용 가능
    console.log(k, v); // 결과는 위와 동일
});
   
// Set은 중복을 허용하지 않는다는 것이 가장 큰 특징이다.
const s = new Set();
s.add(false); // add(요소)로 Set에 추가
s.add(1);
s.add('1'); // 자료형이 다르면 가능
s.add(1); // 중복이므로 무시
s.add(2);

const arr = [1,3,2,2,3]
const s = new Set(arr);
const result = Array.from(s); // Set->arry(배열)로 전환해서 저장
console.log(result); // 1,3,2

'Javascript > Node' 카테고리의 다른 글

노드의 정의  (0) 2024.10.26
노드 교과서 섹션0  (0) 2023.09.07
노드 교과서 섹션 2  (0) 2023.09.05
노드 교과서 섹션 3  (0) 2023.09.01
노드 교과서 섹션 4  (0) 2023.08.31

+ Recent posts