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. [JavaScript] 객체 (Object) 1. 객체 ① 객체 생성 방법 (1). 객체 생성자 (2). 객체 리터럴 ② Property 2. 객체 Property 접근법 ① 점 표기법 ② 대괄호 표기법 3. 메서드 Method ① 메서드 생성 방법 (1). 외부 함수를 객체 메서드로 할당하는 방법 (2). 객체 리터럴 시, 메서드를 같이 생성하는 방법 4. Reference 1. 객체 이번에 정리한 것은 JavaScript의 비 원시 타입의 자료형인 객체에 대한 것이다. 기본적으로 변수에는 값을 하나만 저장할 수 있다. 변수에 원시 타입인 number, String, boolean 값 중 하나를 할당했다면 이후에 해당 변수에 새로운 값을 재할당하기 전까지 한 개, 한 종류의 값만 저장된 상태이다. let Sample = 10; console.lo.. 2023. 9. 20. [Javascript] 함수 표현식, 화살표 함수 목차 1. 함수 표현식 ① 함수 표현식 ② 함수 선언식과 함수 표현식 ③ 일급 객체 2. 화살표 함수 1. 함수 표현식 Javascript 함수 게시글에서 함수를 만들 때 아래와 같은 형식으로 만든다고 정리했었다. function print(){ console.log("함수 실행."); } 이와 같이 function 키워드를 사용해서 함수를 선언해서 함수를 생성하는 방식을 함수 선언식이라고 한다. Javascript에서는 함수 선언식 외에도 함수를 만들 수 있는 방식이 더 존재하는데 이번에 공부한 것은 함수를 만드는 방법 중 하나인 함수 표현식에 관한 것이다. 바로 본론으로 들어가도록 하겠다. ① 함수 표현식 //함수 표현식 var print = function (){ console.log("Hello".. 2023. 8. 15. [Javascript] var 목차 0. 개요 1. var ① var ② var로 선언한 변수의 특징 (1). var로 선언한 변수는 함수 스코프나 전역 스코프를 가지고 있다. (2). var로 선언한 변수는 중복 선언이 가능하다. (3). var로 선언한 변수는 호이스팅이 가능하다. (호이스팅) 2. let, const ① let, const로 선언한 변수(상수)는 호이스팅을 지원하는가? ② TDZ 0. 개요 이번에는 Javascript의 변수 선언 키워드 중 하나인 var에 대한 것을 공부해봤고 공부하면서 정리한 내용을 바탕으로 Javascript 변수 선언 키워드인 var에 대해 설명해보도록 하겠다. 1. var ① var 'var'은 Javascript의 변수 선언 키워드로 오래된 변수 선언 키워드로 현재는 ES6부터 도입된 .. 2023. 7. 23. 이전 1 2 다음
