Web - FrontEnd

[JavaScript] JavaScript 기본 문법 (10) - Javascript의 비동기 처리 (3) - async / await

JavaScript 비동기 처리 시리즈 [JavaScript] JavaScript 기본 문법 (8) - Javascript의 비동기 처리 (1) - 콜백(Callback) [JavaScript] JavaScript 기본 문법 (9) - Javascript의 비동기 처리 (2) - Promise Async / Await 얘네 사실. Promise랑 동떨어져 있는 새로운 비동기 처리 방식아 아니다. Promise를 좀 더 편하게 사용하기 위해 생긴 놈들이다. 그러니까, 왜 async/await을 먼저 배우지 않고 Promise를 먼저 배우고 나서 더 쉬운 놈들을 알려주냐? 하면, Promise를 알아야 async/await을 이해하기 쉬워진다. 아니, Promise를 알아야 쓸 수 있고, async/awai..

[JavaScript] JavaScript 기본 문법 (9) - Javascript의 비동기 처리 (2) - Promise

JavaScript 비동기 처리 시리즈 [JavaScript] JavaScript 기본 문법 (8) - Javascript의 비동기 처리 (1) - 콜백(Callback) [JavaScript] JavaScript 기본 문법 (10) - Javascript의 비동기 처리 (3) - async/await Promise 기본 Promise 객체의 기본 형태와 resolve, reject 콜백 let promise = new Promise(function (resolve, reject) { // code }); Promise 객체는 이런 방식으로 만들 수 있다. new Promise() 에 인자로 전달되는 함수(function (resolve, reject){ })는 executor 라고 부른다. execut..

[JavaScript] JavaScript 기본 문법 (8) - Javascript의 비동기 처리 (1) - 콜백(Callback)

JavaScript 비동기 처리 시리즈 [JavaScript] JavaScript 기본 문법 (9) - Javascript의 비동기 처리 (2) - Promise [JavaScript] JavaScript 기본 문법 (10) - Javascript의 비동기 처리 (3) - async/await 동기 (Synchronous) vs 비동기 (Asynchronous) 동기 (Synchronous) 동기 방식은, 간단히 말해서 먼저 진행하던 작업을 끝내고 그 다음 작업을 시작하는 방식이다. 그러니까, console.log("1"); // 1초 이후에 console.log("2")를 실행하는 코드. setTimeout(function () { console.log("2"); }, 1000); console.log..

[JavaScript] JavaScript 기본 문법 (7) - 객체 (4) - new 연산자와 생성자

생성자 (Constructor) 이거 뭐임? 이거 왜 씀? 객체를 생성할 때 사용하는 함수. 같은 프로퍼티들을 가진 비슷한 객체들을 여러 개 찍어내기 위해 만듬. 이거 어떻게 씀? (Constructor Usage) 생성자 명은 대문자로 시작하는 관례가 있음. (Ex. User, Default, Spring...) new 키워드를 통해 호출해야 함. this.(property) 를 통해 property를 명시. function User(name, age) { this.name = name; this.age = age; } let user1 = new User("Kim", 30); let user2 = new User("Lee", 20); console.log(user1); console.log(user2..

[JavaScript] JavaScript 기본 문법 (6) - 객체 (3) - 메소드(Method)와 this 키워드

Method 메소드(Method) VS 함수(Function) 메소드는 함수의 일종. ( 메소드 ⊂ 함수 ) 메소드는 객체에 종속된 함수. 객체의 property 값인 함수. Method examples Method 만들기 객체 프로퍼티의 value로 함수를 할당. let user = { name: "Kim", age: 30, sayHi: function () { console.log("HI"); }, }; user.sayHi();// output : HI 이미 정의된 함수를 메소드로 만들 수도 있음. let user = { name: "Kim", age: 30, }; function sayHi() { console.log("HI"); } user.sayHi = sayHi; user.sayHi();// ..

[JavaScript] JavaScript 기본 문법 (5) - 객체 (2) - Shallow Copy(Copy by reference), Deep Copy(Copy by value)

Copy by reference (Shallow Copy) Shallow Copy JavaScript에서 다른 원시 자료형(type)과 달리, 객체(Object)는 변수에 Object 자체가 저장되는 것이 아닌, 변수에는 Object의 Reference(주소값)가 저장된다. let user = { name: "John", }; 이 때 변수 user에 객체 { name : "John" } 자체가 저장되는 것이 아니라, 객체가 담긴 메모리 위치의 "주소값"이 저장된다는 것이다. (필자는 C, C++ 때의 포인터를 떠올리니 어렵지 않게 이해할 수 있었다.) 따라서 object가 할당된 변수를 복사할 때는 object 자체가 복제되는 것이 아니라 object의 reference가 copy된다. let user ..

[JavaScript] JavaScript 기본 문법 (4) - 객체 (1) - 기본 개념

객체 (Object) 키(key) : 값(value) 쌍으로 이루어진 property(프로퍼티)를 여러 개 저장할 수 있는 자료형. 객체 생성법 let user = new Object(); // '객체 생성자' 문법 let user = {}; // '객체 리터럴' 문법 객체 선언은 주로 객체 리터럴(object literal) 방법을 사용. 객체 생성자 함수를 사용한 객체의 생성은 기본문법(7)-객체(4)에서 서술. 객체 프로퍼티 조작 객체 생성 let user = { name: "John", // key: "name", value: "John" age: 30 // key: "age", value: 30 }; Property 추가 (object).(key) = (value) 또는 (object name)..

[JavaScript] JavaScript 기본 문법 (3) - 반복문에서의 Label(레이블), break, continue.

break, continue break, continue의 용법은 다른 언어에서와 동일하다. for (let i = 0; i < 5; i++) { console.log(i); if (i === 2) { break; } } // output : // 0 // 1 // 2 for (let i = 0; i < 5; i++) { if (i === 2) { continue; } console.log(i); } // output : // 0 // 1 // 3 // 4 break 는 현재 진행되는 반복문을 탈출하며, continue 는 현재 iteration(반복)을 종료, 다음 iteration으로 넘어간다. 문제는 반복문이 중첩되었을 때, 안쪽 반복문에서 여러 반복문을 한 번에 탈출하고 싶거나, 바깥쪽 반복문에서..