javascript14 [JavaScript] Promise 1. Promise 2. Promise 객체 내부 Property 3. '.then()' / '.catch()' / '.finally()' ① .then() ② .catch() ③ .finally() 4. Reference 1. Promise Promise란 비동기 작업을 처리할 때 Callback 함수 대신 유용하게 활용할 수 있는 JavaScript 내장 객체로, 비동기 작업을 수행하고 나서 작업의 성공/실패 여부와 그 결과 값을 나타낸다. const prom = new Promise((resolve, reject) => { //executor, 실행자, 실행 함수 }); 위의 예시처럼 'new Promise()' 연산자를 통해 Promise 객체를 생성할 수 있다. 여기서 Promise 객체를 생성.. 2024. 4. 10. [JavaScript] 콜백 함수 Callback Function 1. 콜백 함수 Callback Function 콜백 함수란 인자, 값의 형태로 전달되는 함수를 말한다. JavaScript에서 함수를 순차적으로 실행하고자 할 때 활용할 수 있는 방법이다. function Test(Callback){ Callback(); console.log("Test 함수 실행"); } const Test2 = () => { console.log("Test2 함수 실행"); } Test(() => { console.log("임의 함수 생성, 실행")}); Test(Test2); 위의 예제처럼 Test 함수 호출 시, 임의의 함수를 만들어서 콜백 함수로 활용할 수도 있고 아니면 기존에 만들어둔 함수를 콜백 함수로 사용할 수도 있다. 콜백 함수는 기본적으로 함수를 다른 함수의 인자로 전.. 2024. 2. 4. [JavaScript] 구조 분해 할당 1. 구조 분해 할당 Destructuring Assignment 구조 분해 할당은 배열의 요소나 객체의 Property를 말 그대로 분해해서 각 변수에 할당하는 문법이다. 기존 배열이나 객체에 저장된 데이터 중 일부만 필요한 경우에 활용할 수 있는 문법이다. 먼저 배열의 요소를 분해해서 할당하는 방법부터 알아보도록 하겠다. ① 배열, 구조 분해 할당 (1). 배열 요소를 각 변수에 분해 할당하기 const colors = ["Red", "Green", "Blue"]; let [c1, c2, c3] = colors; console.log(`c1 : ${c1}`); //c1 : Red console.log(`c2 : ${c2}`); //c2 : Green console.log(`c3 : ${c3}`); /.. 2024. 1. 9. [React] 개발 환경 설정 📃 목차 1. ReactJS 개발 환경 설정하기 ① React 설치하기 ② React 개발 모드와 배포 모드 2. Create React App ① node.js 설치 ② React 설치 ③ 프로젝트 폴더 구성 ④ React 예제 실행하기 📕 Reference React 개발 환경을 설정하는 방법은 두 가지가 존재한다. 하나는 이 글을 쓰는 시점에서 위의 ② React 개발 모드와 배포 모드 React로 개발한 웹 페이지를 배포할 때는 'development.js'를 'production.min.js'로 수정해 주자. 앞에서 태그를 통해 설치했던 React와 ReactDOM은 development, 개발 모드로 프로그램 개발 중에 버그로 이어질 수 있는 요소들에 대해 경고를 보내는 검증 코드가 포함되어 .. 2023. 12. 12. [JavaScript] 배열 Array 목차 0. 개요 1. 배열 Array ① 배열의 정의 ② 배열 요소 접근 2. 배열 요소 추가 및 삭제 ① 배열 요소 추가 ② 배열 요소 삭제 3. Reference 0. 개요 빨간색, 파란색, 초록색 위의 세 가지 색상을 'Color'라는 변수에 저장하려고 한다. 기본적으로 변수에는 한 개의 값만 저장할 수 있기 때문에, 객체를 활용해서 세 가지 색상 요소를 'Color' 변수에 저장해야한다. let Color = { "Color1": "Red", "Color2": "Blue", "Color3": "Green" }; 변수 'Color'에 "빨간색", "파란색", "초록색" 세 가지 색상이 객체의 형태로 할당된 것을 확인했으니 이제 다른 색상을 하나 더 추가해 보자. let Color = { "Color.. 2023. 10. 29. [JavaScript] this 목차 1. this란? ① this ② this.(Key)와 '객체 변수'.(Key) 비교 2. JavaScript에서의 this 3. Reference 1. this란? 이전 게시글에서 메서드를 추가하고 사용하는 것을 다뤘지만 객체 메서드가 객체 Property를 참조할 수 있게 하는 방법에 대해서는 다루지 않았었다. 그러므로 이번에 다룰 것은 메서드가 객체 Property를 참조하려고 할 때 쓸 수 있는 'this' 키워드에 관한 것이다. ① this //this 예제 const Person = { name: "John", Hello(){ console.log(`안녕하세요. 저는 ${this.name}입니다.`); } }; Person.Hello(); 객체 메서드에서 'this'는 아래와 같이 입력하.. 2023. 10. 25. 이전 1 2 3 다음
