티스토리

흔적을 남겨
검색하기

블로그 홈

흔적을 남겨

muyeon95.tistory.com/m

gmakin36@gmail.com

구독자
8
방명록 방문하기

주요 글 목록

  • 여러개의 input 관리 [React] input 을 관리할때 onChange 와 value 를 통해 사용하고 useState 를 통해 관리한다.더 관리하기 좋은 형태는 없을까?무슨 고민이야? 아래 코드는 간단한 todo 리스트의 입력부분이다.import React, { useState } from "react";import "../../styles/index.css";import TodoFormButton from "./buttons/TodoFormButton";const TodoForm = ({ setTodos }) => { const [title, setTitle] = useState(""); const [content, setContent] = useState(""); const addTodoHandler = (e) => { .. 공감수 1 댓글수 1 2024. 5. 17.
  • Vite Vite 를 왜 사용해야 할까?그냥 마냥 사용하면 될까? 주의점은 없을까?번들링? 번들링은 빌드라고도 할 수 있다.사용자에게 웹 애플리케이션을 제공하기 위해 여러 코드와 프로그램들을 묶는 행위라고 정의할 수 있다.개발자는 최종적으로 번들링된 웹 애플리케이션을 만들어내고, 사용자가 웹 애플리케이션을 이용할 때는 번들링한 파일을 받아와 브라우저가 이 번들을 실행한다.  왜 번들링을 해야해? 코드를 번들링한다는 것은 단순히 묶기만 하는 것이 아닌 압축하는 개념과 비슷하다.번들 파일은 원본 프로그램 파일보다 크기가 작아지고 실행 속도, 로딩 속도 또한 빨라진다. 압축한 파일을 받아와 압축해제 전까지 파일을 조작할 수 없는 것처럼, 또한 번들링된 웹 애플리케이션은 사용자가 임의로 조작할 수 없다.  js 에서 변.. 공감수 1 댓글수 0 2024. 5. 13.
  • Virtual DOM 리엑트를 사용하는 이유에는 여러가지가 있다.그중에서 가상 DOM 은 큰 특징이다.DOM 웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것이다.DOM 은 애플리케이션 전체 UI 를 나타내고 트리 구조로 표현된다.여기에는 Web Document 에 있는 각 UI 요소에 대한 노드가 포함된다.웹 개발자가 자바스크립트를 통해 컨텐츠를 수정할 수 있기 때문에 유용하다.또한 구조화된 형식으로 되어 있어 특정 대상을 선택할 수 있고 모든 코드 작업이 쉬워지기 때문에 도움이된다. DOM 의 문제점은? DOM 은 트리 구조로 되어 있어 이해하기 쉽지만, 노드의 수가 많아질 수록 느려지고, DOM 업데이트에 잦은 오류를 발생시킬 수 있다.또 최근 웹은 SPA 를 사용한다. 하나의 웹 페이지를 어플리케이션처.. 공감수 0 댓글수 1 2024. 5. 3.
  • 이벤트 버블링 & 캡처링 바닐라 JS 로 프로그래밍을 하다보면 생기는 현상이 있다.이벤트를 다른 곳에 지정했는데 왜 상위요소가 지정되지?왜 하위요소도 전부..?event flow DOM 이벤트 흐름에는 캡처링, 타겟, 버블링 3가지가 있다. 캡처링은 이벤트가 하위요소로 전파되는 것이고타겟은 이벤트가 실제 타겟 요소에 전달되는 것그리고 버블링은 이벤트가 상위 요소로 전파되는 것이다. td 태그를 클릭하게 되면 이벤트가 최상위에서 시작해 아래로 전파. -> 캡처링이벤트가 타겟 요소에 도착해 실행 된다. -> 타겟그리고 다시 위로 전파된다. -> 버블링 위 그림의 3개의 phase 중에서 이벤트 핸들러가 실행되는 과정은 원래 target phase, bubbling phase 이나, 필요에 따라서 capture phase 와 targ.. 공감수 0 댓글수 1 2024. 5. 2.
  • JavaScript & TypeScript 요즘 TypeScript 가 선호된다. 왜 선호되고 장점은 무엇이고 단점은 없을까?javascript & typescript 자바스크립트는 동적 웹 페이지를 만들기 위해 고안된 언어이며 브라우저를 통해 실행된다.타입스크립트는 자바스크립트의 슈퍼셋으로 정적 타입을 제공하여 대규모 애플리케이션의 개발을 용이하게 한다. 자바스크립트와 타입스크립트는 웹 개발자에게 강력한 도구를 제공한다. 이들은 개발자가 빠르게, 안정적으로 유연하게 애플리케이션을 개발 할 수 있도록 도와준다. typescript  타입스크립트는 자바스크립트 기반의 정적 타입 문법을 추가한 언어이다.타입스크립트는 자바스크립트의 슈퍼 셋, 즉 상위 확장자로 자바스크립트 엔진을 사용하며 자신이 원하는 변수의 타입을 정의하고 프로그래밍을 하면 자바스크.. 공감수 0 댓글수 1 2024. 5. 1.
  • this [re:] this 는 무엇일까?this this는 일반적으로 객체지향 언어에서 자기자신을 가리키는 객체, 즉 자기 자신과 굉장히 관련이 깊다.자바스크립트도 비슷할까?그렇지 않다. 자바스크립트가 조금 특별하기 때문인데,자바스크립트의 함수는 객체, 그 중에서도 일급 객체이다.일급 객체인 자바스크립트 함수는 변수나 데이터에 할당할 수 있고, 다른 함수에 인수 또는 반환값으로도 사용할 수 있다. // 1. 변수나 데이터에 저장const myFunc = func// 2. 함수의 인수로 전달function func1(func2) {}// 3. 함수의 반환값으로 사용function func1() { ... return func1} 이런 특징으로 자바스크립트의 함수는 다양한 환경에서 호출될 수 있다. func(), tes.. 공감수 0 댓글수 0 2024. 4. 30.
  • Javascript Closure 클로져를 알기위해서는 실행 컨텍스트에 대해 알아야 한다. https://muyeon95.tistory.com/317 실행 컨텍스트실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 이는 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다. 자바스크립트는 어떤 실행 컨텍스트muyeon95.tistory.com 클로져는 무엇이고 어떻게 활용할 수 있을까?정의 MDN : 함수와 함수가 선언된 어휘적 환경의 조합 ????????????확실히 MDN 이 만능은 아니다. 코어 자바스크립트 : 어떤 함수 A 에서 선언한 변수 a 를 참조하는 내부 함수 B를 외부로 전달할 경우 A 의 실행 컨텍스트가 종료된 이후에도 변수 a 가 사라지지 않는 현상 ex code 1)functio.. 공감수 0 댓글수 0 2024. 4. 29.
  • this [Javascript] this 란? this 란 Javascript 예약어 이다. this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. this 바인딩이란? 식별자와 값을 연결하는 과정을 말한다. 변수선언은 변수 이름과 확보된 메모리 공간의 주소를 바인딩하는 것이다. this 바인딩은 this(키워드로 분류되지만 식별자의 역할을 한다.)와 this가 가리킬 객체를 바인딩하는 것이다. 다른 대부분의 객체 지향 언어에서 this 는 클래스로 생성한 인스턴스 객체를 의미한다. 클래스에서만 사용할 수 있기 때문에 혼란의 여지가 없거나 많지 않다. 하지만 자바스크립트는 어디서든 사용할 수 있다. 상황에 따라 this 가 바라보는 대상이 달.. 공감수 1 댓글수 3 2024. 1. 5.
  • 호이스팅 이전에 실행컨텍스트에 대해 다루었었다. https://muyeon95.tistory.com/317 실행 컨텍스트 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 이는 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다. 자바스크립트는 어떤 실행 컨텍스트 muyeon95.tistory.com 실행 컨텍스트 요약 자바스크립트 코드를 실행하는데 필요한 환경 정보, 즉 변수 객체, 스코프 체인, this 에 관한 내용 등을 담고 있는 객체이다. 실행 컨텍스트는 크게 전역 컨텍스트와 함수 컨텍스트 2가지로 나뉘며, 자바스크립트 코드 실행이 시작되면 무조건 콜 스택에 전역 컨텍스트가 먼저 쌓이고, 그 위로 함수를 호출할 때마다 함수 컨텍스트가 생성된다. 각 컨텍스트가 생성.. 공감수 0 댓글수 0 2023. 12. 31.
  • 실행 컨텍스트 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 이는 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다. 자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고(호이스팅), 외부 환경 정보를 구성하고 this 값을 설정하는 등의 동작을 수행하는데, 이로 인해 다른 언어에서는 없는 특이한 현상이 발생한다. 클로저를 지원하는 대부분의 언어에서 이와 유사하거나 동일한 개념이 적용되어 있다. 실행 컨텍스트란? 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 이를 콜 스택에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드.. 공감수 0 댓글수 1 2023. 12. 26.
  • Javascript 데이터 타입 데이터 타입의 종류 데이터 타입은 크게 두가지가 존재한다. 기본형과 참조형이다. 기본형에는 숫자, 문자열, 불리언, null, undefined 등 이 있으며 ES6에서는 심볼이 추가되었다. 참조형은 객체가 있고, 배열, 함수, 날짜, 정규표현식 등과 ES6에서 추가된 Map, WeakMap, Set, WeakSet 등이 객체의 하위 분류에 속한다. 어떤 기준으로 기본형과 참조형을 구분할까? 일반적으로 기본형은 할당이나 연산 시 복제되고 참조형은 참조된다고 알려져 있다. 엄밀히 말하면 둘 모두 복제를 하긴한다. 다만 기본형은 값이 담긴 주소값을 바로 복제하는 반면 참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제한다는 점이 다르다. 기본형은 불변성을 띈다. 혼란스러울 수 있는데 기본형.. 공감수 1 댓글수 7 2023. 12. 18.
  • Javascript Async / Await async function myFunc() { try { const res1 = await fetch("URL 입력"); const req1 = await res1.json(); console.log("첫번째 Request 완료", req1); const res2 = await fetch("URL 입력"); const req2 = await res2.json(); console.log("두번째 Request 완료", req2); } catch (err) { console.log(err); } finally { console.log("done"); } } myFunc(); - 좋은 가독성 promise, callback 보다 훨씬 보기 편함 - await 는 async 내부 함수에만 사용 가능 공감수 0 댓글수 0 2023. 5. 16.
  • Javascript 프로미스 ( Promise ) Promise 객체는 new 키워드와 생성자를 사용해 만든다. 인자로 함수를 받고 함수의 첫번째 인자는 resolve 성공했을때 결과값 반환, 두번째 인자는 reject 작업이 실패했을때 오류원인 반환 const promise1 = new Promise((resolve, reject) => { setTimeout(() => { resolve('foo'); }, 300); }); promise1.then((value) => { console.log(value); // Expected output: "foo" }); console.log(promise1); // Expected output: [object Promise] 출처 : mdn javascript 링크 : https://developer.mozil.. 공감수 0 댓글수 0 2023. 5. 16.
  • Javascript 이벤트루프 ( event loop ) 이벤트 루프를 이해하기 넘나 좋은 사이트 링크 : http://latentflip.com/loupe/ http://latentflip.com/loupe/ latentflip.com 동기와 비동기의 차이 동기는 먼저 이전의 것이 끝나야 다음 것을 할 수 있다. 줄서는느낌 비동기는 여러가지를 할 수 있다. 운전하면서 노래를 듣고 네비게이션도 확인하며 대화도 가능 - 자바스크립트는 동기 언어이다. 비동기 코드가 있을뿐 console.log() 의 경우 동기이고 setTimeout() 은 비동기이다. - 힙 : 메모리 할당이 일어남 - 호출 스택 : 실행될 코드를 한 줄 단위로 할당해 동작된다. - Web APIs : 비동기 처리 - 콜백 큐 : 비동기 처리 후 실행되야할 콜백 함수가 순서대로 할당 - 이벤트 .. 공감수 0 댓글수 0 2023. 5. 16.
  • Javascript 클로져 ( Closure ) 다른 함수 내부에 정의된 함수가 있는 경우 외부 함수가 실행을 완료하고 해당 변수가 해당 함수 외부에서 더이상 액세스 할 수 없는 경우에도 내부 함수는 외부 함수의 변수 및 범위에 액세스 할 수 있다. let num1 = 1; const A = () => { let num2 = 2; console.log(num1, num2, num3); }; const B = () => { let num3 = 3; console.log(num1, num3); A(); }; B(); let num1 = 1; const B = () => { const A = () => { let num2 = 2; console.log(num1, num2, num3); }; let num3 = 3; console.log(num1, num3).. 공감수 0 댓글수 0 2023. 5. 16.
  • Javascript OOP 상속 부모 클래스를 자식클래스에 확장하는 것, 부모 클래스에 있던 기능들로 자식 클래스를 만들 수 있다. extends 키워드를 사용하고, super() 를 사용해 부모 클래스의 속성을 물려받을 수 있다. class Person { constructor(name, age, job) { this.name = name; this.age = age; this.job = job; } sayHello() { return `안녕 나는 ${this.name}야 정말 반가워`; } static sumAllNumbers(min, max) { let result = 0; for (let i = min; i < max + 1; i++) { result += i; } return result; } } class Student ex.. 공감수 0 댓글수 0 2023. 5. 16.
  • Javascript ES6 Classes ES6 에서 나온 Class 를 이용해서 쉽게 OOP 를 구현할 수 있다. 문법은 OOP 방식을 이용하지만 내부에서는 prototype 을 사용하며 작동한다. class Person { constructor(name, age, job) { this.name = name; this.age = age; this.job = job; } sayHello() { return `안녕 나는 ${this.name}야 정말 반가워`; } } const yeon = new Person("yeon", 29, "false"); console.log(yeon); console.log(yeon.sayHello()); - constructor 는 인스턴스의 생성과 동시에 클래스 필드의 생성과 초기화를 실행, 또 constructo.. 공감수 0 댓글수 0 2023. 5. 16.
  • Javascript 프로토타입 ( prototype ) 객체를 만들면 prototype 이라는게 생긴다. 모든 객체는 global Object prototype 을 가진다. prototype 이란? 자바스크립트 객체가 다른 객체로 부터 메서드와 속성을 상속받는 메커니즘이다. ( prototype chain ) prototype 을 사용 함으로서 더 적은 메모리를 사용할 수가 있고 코드를 재사용 할 수 있다. 예시 출처 : mdn javascript 속성상속 // o라는 객체가 있고, 속성 'a' 와 'b'를 갖고 있다고 하자. let f = function () { this.a = 1; this.b = 2; } let o = new f(); // {a: 1, b: 2} // f 함수의 prototype 속성 값들을 추가 하자. f.prototype.b = 3.. 공감수 0 댓글수 0 2023. 5. 16.
  • Javascript OOP 객체지향 특징 객체지향 프로그래밍은 객체들의 모임이다. 객체는 알아보기 쉽고 재사용성이 높다. 특징 1) 자료 추상화 (Abstraction) 불필요한 정보는 숨기고 중요한 정보만을 표현해 프로그램을 간단하게 만든다. 객체 안에 자세한 내용을 몰라도 중요 정보를 이용해 해당 객체 사용 2) 상속 (Inheritance) 새로운 클래스의 자료와 연산을 이용할 수 있게하는 기능 이를 통해 기존의 클래스를 상속받은 하위 클래스를 이용해 프로그램 요구에 맞춰 클래스를 수정하고 클래스간 종속 관계를 형성할 수 있다. 3) 다형성 (Polymorphism) 다양한 형태를 가질 수 있다. 같은 메소드라도 각 인스턴스에 따라 다양한 형태를 가질 수 있다. 오버 라이딩(Overriding) 을 사용하여 자식 클래스의 메서드가 부모 클.. 공감수 0 댓글수 0 2023. 5. 16.
  • Javascript DOM DOM (Document Object Model) DOM (문서 객체 모델) 은 메모리에 웹 페이지 문서구조를 트리구조로 표현해 브라우저가 페이지를 인식하게 해준다. JS 를 이용해 요소들을 제어할 수 있다. 조작 DOM API 를 이용해 조작할 수 있다. 응애 나 애기버튼 /* document는 브라우저에서 제공하는 window 객체의 이다. */ const button = document.querySelector('.button'); button.onclick = function(){ this.style.backgroundColor = 'blue'; } 웹 페이지 빌드 과정 (Critical Rendering Path CRP) 1. 렌더 엔진이 문서를 읽어 파싱, DOM tree 생성 2. DOM C.. 공감수 0 댓글수 0 2023. 5. 16.
  • Javascript window 객체 ( Window Object ) window 객체는 브러우저에 의해 자동 생성되고 이 객체는 js 의 객체가 아니다. 브라우저에 대한 정보를 알 수 있고 제어할 수 있다. var 로 변수나 함수를 선언하면 window 객체에 프로퍼티가 된다. alert(), prompt(), confirm() 등은 window 객체이다. window 객체는 너무 많은 친구들이 있기때문에 링크에서 필요에따라 찾아서 쓰는 것을 추천함 링크 : https://developer.mozilla.org/ko/docs/Web/API/Window Window - Web API | MDN Window 인터페이스는 DOM 문서를 담은 창을 나타냅니다. document 속성이 창에 불러온 DOM 문서를 가리킵니다. developer.mozilla.org 공감수 0 댓글수 0 2023. 5. 16.
  • Javascript 반복문( Loop ) 1. for for (let i = 0; i < 10; i++) { if (i === 5) { console.log( "반짝이는 5번 입니다. continue 때문에 더 실행되지 않고 다음 반복으로 넘어갑니다." ); continue; } if (i === 8) { console.log("8 번입니다. break 때문에 반복문을 탈출해 종료됩니다."); break; } console.log(i + "번 입니다."); } /* === 실행 결과 === 0번 입니다. 1번 입니다. 2번 입니다. 3번 입니다. 4번 입니다. 반짝이는 5번 입니다. continue 때문에 더 실행되지 않고 다음 반복으로 넘어갑니다. 6번 입니다. 7번 입니다. 8 번입니다. break 때문에 반복문을 탈출해 종료됩니다. */ .. 공감수 0 댓글수 0 2023. 5. 16.
  • Javascript 타입 기본 : Boolean, String, Number, null, undefined, Symbol - 기본 타입들은 호출스택 메모리 공간 사용 - 고정된 크기의 메모리로 저장, 데이터가 변수에 할당된다. 객체 : Object, Array, function 등등 - 힙 사용 - 데이터 크기가 정해지지 않는채로 호출스택에 저장되고 데이터의 값이 힙에 저장되고 변수에 힙 메모리 주소값이 할당된다. - js 는 느슨한 타입의 동적 언어이다. 특정 타입과 연결되지 않고 모든 타입의 값으로 할당 , 재할당이 가능하다. - 같은 변수가 여러개의 타입을 가질 수 있고 타입을 명시하지 않아도 된다. // 기본 타입 const myname = "muyeon"; console.log(myname); console.log(ty.. 공감수 0 댓글수 0 2023. 5. 16.
  • Javascript 호이스팅(Hoist) - 뭔가를 끌어올린다 라고 생각하면 됩니다. - JS 에서 호이스팅은 코드가 실행되기 전에 변수, 함수 선언 이 지역범위(로컬 범위) 의 맨 위로 끌어 올려지는 경우입니다. 1. var - 많이 이상해보이지만 호이스팅 때문에 오류가 나지 않습니다. - JS 인터프리터는 변수 생성과 할당값을 분할합니다. 선언부분은 코드 실행 전 범위의 맨 위로 호이스팅 초기 값은 undefined 가 할당됩니다. console.log(hoisting); var hoisting = "hi hoisting"; console.log(hoisting); /* === 실행 결과 === undefined hi hoisting */ 2. 함수 호이스팅 - 함수도 바로출력 hoistingFunc(); function hoistingFu.. 공감수 0 댓글수 0 2023. 5. 16.
  • Javascript 스코프(Scope) 1. var (function-level scope) - 함수 안에서 선언된 변수는 함수 안에서만 유효하다. 외부는 X function varScope() { if (true) { var a = "var 스코프"; console.log(a); } console.log(a); } func(); console.log(a); // 에러발생 /* === 실행 결과 === var 스코프 var 스코프 Uncaught ReferenceError: a is not defined */ 2. let / const (block-level scope) - 코드 블록 {} 내부에서 선언된 변수는 블록안에서만 유효. 외부는 X function blockScope() { if (true) { let a = "block scope.. 공감수 0 댓글수 0 2023. 5. 16.
  • JavaScript 변수 1. var - 중복 선언과 재할당이 가능하다. - 과거에 쓰던 방식 var a = 'welcome'; console.log(a); var a = 'to the'; console.log(a); a = 'javascript' console.log(a); 2. let - 중복 불가 재할당 가능 let a = "welcome"; console.log(a); //let a = "to the"; // 에러 발생 console.log(a); a = "javascript"; console.log(a); 3. const - 중복 재할당 모두 불가 - 배열과 객체의 값은 변경가능 - 박스에 담아놨다고 생각해도 좋을듯, 박스는 못바꾸지만 안에 물건은 빼거나 넣을수 있음 const a = "welcome"; console... 공감수 0 댓글수 0 2023. 5. 16.
  • AJAX [ node.js 교과서] 본 게시글은 node.js 교과서 강의를 듣고 정리한 글입니다. AJAX doc : https://developer.mozilla.org/ko/docs/Web/Guide/AJAX AJAX - 웹 개발자 안내서 | MDN 시작하기 AJAX를 소개합니다. developer.mozilla.org - 서버로 요청을 보내는 코드 - 라이브러리 없이는 브라우저가 지원하는 XMLHttpRequest 객체를 이용해야 한다. - AJAX 요청시 Axios 라이브러리를 사용하는게 편하다. - HTML에 스크립트를 추가하면 사용할 수 있다. GET 요청 보내기 - axios.get 함수의 인수로 요청을 보낼 주소를 넣으면 된다. - 프로미스 기반 코드라 async / await 를 사용 가능하다. axios.get(’htt.. 공감수 0 댓글수 0 2023. 4. 9.
  • 널 병합 / 옵셔널 체이닝 [node.js 교과서] 본 게시글은 node.js 교과서 강의를 듣고 정리한글입니다 - ES2020 에서 추가된 ?? (널 병합) 연산자와 ?. (옵셔널 체이닝) 연산자이다. - 널 병합 연산자는 주로 || 연산자 대용으로 사용되며 falsy 값 ( 9, '', false, NaN, null, undefined ) 중 null 과 undefined 만 따로 구분한다 널 병합 연산자 ?? const a = 0; const b = a || 3; // || 연산자는 falsy 값이면 뒤로 넘어감 console.log(b); // 3 const c = 0; const b = c ?? 3; // ?? 연산자는 null과 undefined 일 때만 뒤로 넘어감 console.log(b); // 0 const e = null; const .. 공감수 0 댓글수 0 2023. 4. 9.
  • Map/Set [node.js 교과서] 본 게시글은 node.js 교과서 강의를 듣고 정리한 글입니다. Map - map 은 일반 객체 리터럴과 비슷하다. - map 은 생성자이다. - 키랑 값을 객체로도 줄 수 있다. m.set({a : 'b'},{c : 'd'}); 이는 일반 객체와 다른점이다. const m = new Map(); m.set(’a’, ‘b’); // set(키, 값) 으로 Map 에 속성 추가 m.set(’c’, ‘d’); m.get(’a); // get(키) 로 속성값 조회 m.size; // size로 속생 개수 조회 for(const [k, v] of m) { console.log(k, v); } // 속성간의 순서도 보장된다. m.forEach((v, k) ⇒ { console.log(k, v); }); m.has.. 공감수 0 댓글수 0 2023. 4. 9.
  • Promise, async / await [node.js 교과서] 본 게시글은 node.js 교과서 강의를 듣고 정리한 글입니다. - 콜백 헬이라고 불리는 지저분한 자바스크립트 코드의 해결책이다. - Promise : 내용이 실행은 되었지만 결과를 아직 반환하지 않은 객체 - then 을 붙이면 결과를 반환한다. - 실행이 완료되지 않았으면 완료된 후에 then 의 내부함수가 실행된다. const condition = true; const promise = new Promise((resulve, reject) ⇒ { if(condition) { resolve(’성공’); } else { reject(’실패’); } }); promise.then((message) ⇒ { console.log(message); }) .catch((err) ⇒ { console.log(er.. 공감수 0 댓글수 2 2023. 4. 8.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.