studyhard24

프로미스 promise async await

studyhard24 — Sat, 2 Nov 2024 00:03:09 +0900

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

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

- 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

화살표함수 자바스크립트 arrow function

studyhard24 — Fri, 1 Nov 2024 08:53:51 +0900

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

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

// 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를 사용하지 않을 때는 화살표 함수를 사용하는 것을 추천합니다.

템플릿 문자열 객체 리터럴

studyhard24 — Thu, 31 Oct 2024 00:04:49 +0900

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

var const let 자바스크립트 변수 상수

studyhard24 — Wed, 30 Oct 2024 00:02:18 +0900

>> 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;

Node.js 다운로드 설치 최신버전 22버전

studyhard24 — Tue, 29 Oct 2024 10:28:37 +0900

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

- 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 클릭

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

Install 클릭

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

Finish 버튼 클릭

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

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

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

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

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

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

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

서버 노드

studyhard24 — Mon, 28 Oct 2024 00:58:40 +0900

서버로서의 노드

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

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

>> 예시

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

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

>> 노드 != 서버

>> 노드서버의 장단점

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

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

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

서버 외의 노드

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

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

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

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

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

노드의 특성

studyhard24 — Sun, 27 Oct 2024 00:17:41 +0900

1. 이벤트 기반

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

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

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

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

2. 논블로킹 I/O

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

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

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

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

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

3. 프로세스 vs 스레드

>> 프로세스와 스레드

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

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

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

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

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

4. 싱글 스레드

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

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

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

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

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

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

노드의 정의

studyhard24 — Sat, 26 Oct 2024 21:29:12 +0900

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

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

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

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

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

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

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

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

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

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

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

노드 교과서 섹션0

studyhard24 — Thu, 7 Sep 2023 06:07:27 +0900

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

에러질문방법

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

스무고개 하지 않는다.

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

코드를 보여준다.

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

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

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

싱글 스레드, 비동기 모델

이벤트 기반

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

논블로킹 I/O

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

프로세스와 스레드

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

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

싱글 스레드

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

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

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

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

노드 교과서 섹션 1

studyhard24 — Wed, 6 Sep 2023 05:50:29 +0900

// 템플릿 문자열

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