[JS] Node js에서 Promise 쓰기

Promise가 뭐더라..? # Promise 다음에 할 행동을 약속한다 resolve( ): Promise 객체가 성공할 때 호출되어 결과 값을 전달 reject( ): Promise 객체가 실패할 때 호출되어 결과 값을 전달 then( ): 로직 이행 성공 시 then으로 넘어감(resolve 호출 시) catch( ): 로직 이행 실패 시 catch로 넘어감(reject 호출 시) 간단한 Promise를 이용하는 코드 const myPromise = new Promise((resolve, reject) => { let num = 3 if (num === 0) { resolve('성공') } else { reject('로직 수행 실패!') } }) myPromise.then((result) => { ..

• format_list_bulleted FrontEnd/JavaScript
• · 2023. 10. 31.
• textsms

[JS] Axios

비동기 처리의 단점 Web API로 들어오는 순서가 아니라 작업이 완료되는 순서에 따라 처리됨 코드의 실행 순서가 불명확함 → 콜백 함수를 사용하자 # 비동기 콜백 비동기적으로 처리되는 작업이 완료되었을 때 실행되는 함수 연쇄적으로 발생하는 비동기 작업을 순차적으로 동작할 수 있게 함 근데 이렇게 하다보면 콜백 지옥(파멸의 피라미드)가 생김 → (콜백 안에, 콜백 안에, 콜백 안에....) 그래서 만든게.. # Promise 비동기 콜백과 같은 역할, Axios 라이브러리 = 작업이 끝나면 실행시켜 줄께 then(callback) 요청한 작업이 성공하면 callback실행 이전 작업의 성공 결과를 인자로 전달 받음 실패에 대한 약속 catch() then()이 하나라도 실패하면 callback 실행 ca..

• format_list_bulleted FrontEnd/JavaScript
• · 2023. 10. 30.
• textsms

[JS] 동기와 비동기

# 동기(Synchronous) 프로그램의 실행 흐름이 순차적으로 진행 즉, 하나의 작업이 완료된 후에 다음 작업이 실행되는 방식 # 비동기(Asynchronous) 프로그램의 실행 흐름이 순차적이지 않으며, 작업이 완료되기를 기다리지 않고 다음 작업이 실행되는 방식 → 작업 완료 여부를 신경 쓰지 않고, 동시에 다른 작업들을 수행할 수 있음 기다려주지 않는 것일 뿐, 앞에 일을 안하는게 아님! 비동기의 특징 병렬적 수행 당장 처리를 완료할 수 없고 시간이 필요한 작업들은 별도로 요청을 보낸 뒤, 응답이 빨리 오는 작업부터 처리 JavaScript는 Single Thread언어 → 한번에 한개밖에 못 함, 그럼 어떻게 여러개를 한번에 할 수 있나? # JavaScript Runtime JavaScript..

• format_list_bulleted FrontEnd/JavaScript
• · 2023. 10. 30.
• textsms

[JS] 이벤트

# 웹에서의 이벤트란? 무언가 일어났다는 신호, 사건 버튼을 클릭했을 때 팝업 창이 출력되는 것 마우스 커서에 위치에 따라 드래그하는 것 웹은 이벤트를 통해 특정 동작을 수행 모든 DOM 요소는 이벤트를 만들어 냄 event object DOM에서 이벤트가 발생했을 때 생성되는 객체 종류 매우 많음 → mdn 찾아서 쓰기 더보기 https://developer.mozilla.org/ko/docs/Web/API/Event DOM요소는 event를 받고, event handler를 이용해서 event를 처리한다. # event handler 이벤트가 발생했을 때 실행되는 함수 .addEventListenr() :대표적인 이벤트 핸들러 EventTartget.addEventListener(type, handl..

• format_list_bulleted FrontEnd/JavaScript
• · 2023. 10. 30.
• textsms

[JS] 얕은 복사와 깊은 복사

JS는 우선 원시 타입빼고는 다 얕은 복사 # 얕은 복사 1. 함수로 사용할 때 function fun(arr) { arr[5] = 10 arr[0] = 0 } let arr = [1, 2, 3] fun(arr) console.log(arr) // [0, 2, 3, 비어 있음 × 2, 10] 2. 그냥 복사하기 let numbers = [1, 2, 3] let newNumbers = numbers// 얕은 복사 newNumbers[0] = 10 console.log(numbers)// [10, 2, 3] console.log(newNumbers)// [10, 2, 3] 주소를 참고해 오기 때문에 다 얕은 복사가 된다 그렇다면.. 깊은 복사는 어떻게 하지? # 깊은 복사 1. 배열 스프레드 연산자를 사용해..

• format_list_bulleted FrontEnd/JavaScript
• · 2023. 10. 26.
• textsms

[JS] 'this' keyword

'this' keyword 함수나 메서드를 호출한 객체를 가리키는 키워드 함수 내에서 객체의 속성 및 메서드에 접근하기 위해 사용 파이썬의 self (인스턴스 자기자신)와 비슷함 const user = { name: 'Yongbok', geeting: fun () { return `hello, ${this.name}` } } // 호출 console.log(user.greeting())// hello, Yonngbok 근데.. JavaScript에서 this는 함수를 호출하는 위치에 따라 가리키는 대상이 다름 → 호출될 때 결정됨(동적 할당) 단순 호출: 전역 객체 // 전역 객체 const myFun = function () { return this } console.log(myFun())// wind..

• format_list_bulleted FrontEnd/JavaScript
• · 2023. 10. 25.
• textsms