티스토리

개발자 회고록

검색하기

블로그 홈

개발자 회고록

kmryu807.tistory.com/m

포칼이 님의 블로그입니다.

구독자: 2

방명록 방문하기

주요 글 목록

Section 14. 자바스크립트 async & await async 함수 프로미스를 기반으로 동작한다. 마치 동기 코드처럼 직관적으로 코딩을 할 수 있다. function getMult10Promise (number) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(number * 10); }, 1000); }); } async function doAsyncWorks () { const result1 = await getMult10Promise(1); console.log(result1); const result2 = await getMult10Promise(2); console.log(result2); const result3 = await getMult10Promise(3); c.. 공감수 0 댓글수 0 2023. 4. 10.
Section 14. 자바스크립트 프로미스의 병렬 진행 // 다섯 주자들이 동시에 질주 // 데드라인(밀리초) 안에 들어오지 못하면 탈락 let DEADLINE = 1450; function getRunPromise (name) { return new Promise((resolve, reject) => { const time = 1000 + Math.random() * 500; setTimeout(() => { if (time < DEADLINE) { console.log(`🚩 ${name} 도착 - ${(time)/1000}초`); resolve({name, time}); } else { reject((`${name} 시간초과`)); } }, time); }); } console.log( '철수,영희,돌준,정아,길돈' .split(',') .map(getR.. 공감수 0 댓글수 0 2023. 4. 10.
Section 14. 자바스크립트 프로미스 어떤 로직을 구현하기 위해 콜백 함수를 계속 쓰다 보면 이런 형태와 같은 구조가 될 수 있다. setTimeout(() => { console.log(1); setTimeout(() => { console.log(2); setTimeout(() => { console.log(3); setTimeout(() => { console.log(4); setTimeout(() => { console.log(5); }, 500); }, 500); }, 500); }, 500); }, 500); 콜백 함수의 콜백 함수의 콜백 함수... 이런 형태를 콜백 지옥 이라고 한다. 콜백 지옥 callback hell 연속적으로 비동기 코드를 써야 하는 경우 위와 같이 콜백 함수 안에 또 다른 콜백 함수를 넣어야 하는 상황 발.. 공감수 0 댓글수 0 2023. 4. 10.
Section 14. 자바스크립트 비동기의 개념과 타임아웃 프로그래밍에서 동기란? 한 작업이 끝날때까지 다른 작업이 수행되지 않는 것을 말한다. 그렇다면 비동기란? 한 작업이 진행중이더라도 다른 작업들을 수행할 수 있는 것을 말한다. 특정 코드가 끝날때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 의미한다. setTimeout 함수 첫 번째 인자로 넣은 콜백 함수를 두 번째 인자로 넣은 수 만큼의 밀리초 후 실행하는 함수이다. Web API, Node.js 등 자바스크립트 환경의 기능이지 언어의 기능이 아니다. setTimeout(() => { console.log('타임아웃!'); }, 1000); //1초 후 타임아웃!이 출력된다 비동기 asynchronous 코드 동기 synchronous 코드와는 달리, 코드가 순서대로 실행되지 않는다.. 공감수 0 댓글수 0 2023. 4. 8.
Section 13. 자바스크립트 프로토타입과 상속 function Bird (name, sound) { this.name = name; this.sound = sound; } Bird.prototype.fly = function () { console.log(`${this.name} ${this.sound} 비행중`); } function Eagle (name, sound, prey) { this.name = name; this.sound = sound; this.prey = prey; } Eagle.prototype.hunt = function () { console.log(`${this.name} ${this.prey} 사냥중`); } const bird = new Bird('새돌이', '파닥파닥'); const eagle = new Eagle('독.. 공감수 0 댓글수 0 2023. 4. 8.
Section 13. 자바스크립트 프로토타입의 개념 I. 프로토타입 prototype 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍을 지원하는 언어 자바스크립트의 모든 객체는 Prototype을 가진다. const obj = {}; console.log(obj); toString이나 valueOf 같은 함수들을 그냥 가져다 쓸 수 있는 이유도 프로토타입 때문이다. II. Object - 모든 객체의 조상 아래의 객체들은 모두 프로토타입을 가지고 있고 그 프로토타입들은 결국 Object 에서 파생된 것을 확인할 수 있다. console.log( new String('') ); console.log( [] ); console.log( new Map() ); constructor 항목에서 각각의 생성자를 확인할 수 있다. 객체 리터럴 ( {} )등의 생성.. 공감수 0 댓글수 0 2023. 4. 8.
Section 12. 자바스크립트 this의 정적 바인딩 객체의 메서드 종류별 비교 const obj = { // function 선언 함수 func1: function () { return true; }, // 메서드 func2 () { return true; }, // 화살표 함수 func3: () => true } console.log( obj.func1(), obj.func2(), obj.func3() ); //true true true 로그로 출력된 형태를 비교하면 다음과 같다 console.log(obj.func1); //ƒ () { return true; } console.log(obj.func2); //ƒ func2 () { return true; } console.log(obj.func3); //() => true 생성자 역할 수행 여부 con.. 공감수 0 댓글수 0 2023. 4. 7.
Section 12. 자바스크립트 this의 동적 바인딩 I. this - "이곳의~" 기본적으로 자신이 속한 곳을 가리킨다. 함수의 호출 방식에 따라 가리키는 바가 달라진다. - 자바스크립트 특성 1. 전역에서의 this 브라우저의 콘솔창 : window 객체 - globalThis와 같음 Node.js의 REPL: global 객체 - globalThis와 같음 .js 문서로 작성 후 실행 - 빈 객체가 나온다. 이유는 Node.js에서 각 .js문서들은 모듈로서 실행되기 때문이다. 2. 함수 안에서의 this 느슨한 모드와 엄격 모드에서 다르게 동작한다. function func () { console.log(this); // globalThis } func(); //Window 객체 'use strict'; function func () { consol.. 공감수 0 댓글수 0 2023. 4. 7.
Section 12. 자바스크립트 렉시컬과 클로저 I. 렉시컬(정적) 스코프 lexical(static) scope 변수나 상수가 코드상 어디에서 지정되었는가에 따라 그 사용 범위를 결정한다. 함수가 코드상 어디에서 정의되었는가에 따라 그 상위 스코프를 결정한다. 호출한 곳을 기준으로 하는 동적 스포크 dynamic scope와 상반되는 개념이다. const x = 1; const y = 1; const z = 1; function func1 () { const y = 2; const z = 2; console.log('2', x, y, z); // func2(); } function func2 () { const z = 3; console.log('3', x, y, z); } console.log('1', x, y, z) func1(); //1 1 1.. 공감수 0 댓글수 0 2023. 4. 7.
Section 11. 자바스크립트 옵셔널 체이닝 유효하지 않을 수 있는 참조에 의한 문제들에 대해서 옵셔널 체이닝이 매우 유용하게 쓰일 수 있다. 유효하지 않을 수 있는 참조에 의한 문제들 네트워크 요청 등, 어떤 값이 들어올지 모르는 상황이 있다. 에러가 발생하는 상황들은 다음과 같다 // undefined로부터 값에 접근할 때 let undefObj; console.log(undefObj.x); // null부터 값에 접근할 때 let nullObj = null; console.log(nullObj.x); // 무효한 배열에 접근할 때 let undefArry; console.log(undefArry[1]); // 존재하지 않는 함수를 호출할 때 let noFunc = {} noFunc.func(); 또 이런 상황도 있다. 결과에 prop3가 있다.. 공감수 0 댓글수 0 2023. 4. 7.
Section 11. 자바스크립트 엄격 모드 엄격 모드 strict mode 기존의 느슨한 모드에서 허용되던, 문제를 유발할 수 있는 코드들에 오류를 발생시킨다. 엄격 모드의 적용방법과 그 효과들 예시 1. 선언되지 않은 변수 사용시 오류가 발생한다. notDeclared = 1; // 💡 암묵적으로 전역 var 변수로 선언 지금까지는 이렇게 선언되지 않은 변수를 사용해도 애러는 나지 않았다. // ⚠️ 새로고침 후 실행해볼 것 // 선언되지 않은 변수 사용 금지 'use strict'; // 쌍따옴표도 가능 notDeclared = 1; // 오류 발생! 하지만 엄격 모드를 사용하면 이제 애러가 나는 모습을 볼 수 있다. 문서 최상단(코드)에 작성하면 문서 전체에 적용된다. 문서, script 태그별로만 적용된다. 따라서 여러 .js파일이 페이지.. 공감수 0 댓글수 0 2023. 4. 7.
Section 11. 자바스크립트 var var는 let과 const가 생기기 전 변수 선언에 사용되던 문이다. 각종 문제점들을 갖고 있어서 오늘날네는 사용하지 않을 것을 권장한다. 1. 선언 없이도 사용이 가능하다. notDeclared = 1; // 미리 선언한 부분이 없을 시 var로 만들어짐 console.log(notDeclared); //1 // num이 var로 선언된 것 for (num of [1, 2, 3]) { console.log(num); } //1 //2 //3 2. 재선언이 가능하다. 그래서 코딩 중 실수의 여지가 된다. let a = 1; let a = 2; // ⚠️ 오류 const b = 1; const b = 2; // ⚠️ 오류 var c = 1; var c = 2; 3. 블록 레벨 스코프를 무시한다. let .. 공감수 0 댓글수 0 2023. 4. 7.
Section 11. 자바스크립트 에러 핸들링 에러 핸들링 error handling 의 필요성 에러 발생에 대비하지 않으면 프로그램이 종료된다. console.log('에러 발생 전'); // ⚠️ 오류를 발생시키는 코드 (3).split(''); // 출력되지 않음 console.log('에러 발생 후'); I. 자바스크립트의 에러 핸들링 1. try ...catch 문 console.log('에러 발생 전'); try { (3).split(''); } catch (e) { console.error('🛑 에러!!', e); } console.log('에러 발생 후'); try ...catch문을 썼더니 맨 위에 있는 예시에서는 프로그램이 멈춰서 마지막 출력문이 출력 되지 않았지만 이번에는 출력이 되었다. 정리하자면 try 블록 에러 발생 여지가 .. 공감수 0 댓글수 0 2023. 4. 7.
Section 10. 자바스크립트 제너레이터 제너레이터의 특징은 다음과 같다 함수 내 코드들을 모두 실행하지 않고 외부 호출자에게 제어권을 양도한다. - "계속할까요?" 이터러블과 이터레이터를 보다 간결하게 구현 가능하다. function* genFunction () { console.log('하나를 반환합니다.'); yield '하나'; console.log('둘을 반환합니다.'); yield '둘'; console.log('셋을 반환합니다.'); yield '셋'; } const genFunc = genFunction(); // 반복 수행해 볼 것 // 💡 아래의 코드가 블록의 코드에 대한 제어권을 가짐 console.log( genFunc.next() ); //하나를 반환합니다. //{value: '하나', done: false} I. 기본 .. 공감수 1 댓글수 0 2023. 4. 7.
Section 10. 자바스크립트 이터러블 I. 이터러블 프로토콜 iterable protocol 반복, 순회 기능을 사용하는 주체간의 통일된 규격이다. 공통 기능들 : for ... of, 스프레드 문법, 배열 디스트럭쳐링 이터러블 iterable - 이터러블 프로토콜을 준수하는 객체 배열, 문자열, Set, Map, arguments 등 ... 키 Symbol.iterator (well-known 심볼)의 값으로 이터레이터를 반환하는 메서드를 가진다. *Symbol.iterator같이 잘 알려져서 많은 것들의 식별자로 사용되는 것을 well-known 심볼이라 한다. 배열 하나를 출력해보자. [] 그리고 콘솔에서 그걸 펼쳐보면 다음과 같다. 프로토타입 밑에 Symbol.iterator를 키로하는 어떤 함수가 들어있는 것을 볼 수 있다. 이 프.. 공감수 0 댓글수 0 2023. 4. 7.
Section 10. 자바스크립트 Map 표준 내장 객체 중 하나로 키와 값의 쌍으로 이루어진 컬렉션을 Map 이라고 한다. 객체와의 차이는 다음과 같다 이터러블의 일종이다. (이터러블의 기능 사용 가능) 메서드와 프로퍼티 등의 기능 차이가 있다. 객체나 배열 등의 참조값을 키로 사용 가능하다. 키와 값을 보다 자주 변경하는 경우 적합하도록 설계되었다. I. 기본 사용법 // Map 생성 const map1 = new Map(); // set 메서드 - 키와 값의 쌍 추가 map1.set('x', 1); map1.set(123, 'ABC'); map1.set(true, { a: 1, b: 2 }); console.log(map1); [[키 쌍] ...] 배열로 생성 및 초기화 // [[키 쌍]...] 배열로 생성 + 초기화 const map2 .. 공감수 0 댓글수 0 2023. 4. 6.
Section 10. 자바스크립트 Set Set은 표준 내장 객체 중 하나로서 중복되지 않는 값들의 집합을 말한다. 배열과의 차이는 다음과 같다 동일한 값을 여러 번 포함할 수 없다. 값들의 순서가 무의미하다. I. 기본 사용법 // Set 생성 const set1 = new Set(); // add 메서드 - 요소 추가 set1.add(1); set1.add('A'); set1.add(true); console.log(set1); //{1, 'A', true} 이미 포함된 요소는 추가하지 않는다. set1.add(1); set1.add(true); console.log(set1); //{1, 'A', true} 배열을 인자로 넣으면 생성 + 초기화를 한다. 그리고 중복된 요소가 제거가 된다. const set2 = new Set([1, 1, .. 공감수 0 댓글수 0 2023. 4. 6.
Section 9. 자바스크립트 Symbol 다른 값과 절대 중복되지 않는 유일무이한 값을 말한다. Symbol은 원시 타입이다. I. 기본 생성과 활용 const mySymbol = Symbol(); console.log(typeof mySymbol, mySymbol); //symbol Symbol() 생성자 함수와 다름에 유의해야 한다. new를 붙이지 않는다. const symbol1 = Symbol('hello'); const symbol2 = Symbol('hello'); console.log(symbol1, symbol2); //Symbol(hello) Symbol(hello) // 래퍼 객체(Symbol)의 인스턴스 프로퍼티 console.log(symbol1.description, symbol2.description); //hello.. 공감수 0 댓글수 0 2023. 4. 6.
Section 9. 자바스크립트 BigInt Number.MAX_SAFE_INTEGER 더 큰 정수를 다루기 위한 자료형이다. 매우 큰 정수를 다뤄야 하는 특수한 경우에 사용한다. console.log( Number.MAX_SAFE_INTEGER ); //9007199254740991 for (let i = 0; i < 100; i++) { console.log(Number.MAX_SAFE_INTEGER + i); } 출력문을 보면 다음과 같다 자바스크립트의 방식으로는 이 이상의 숫자를 표현하기가 매우 어렵다. 그래서 이런 정수들보다 더 큰 값을 다룰때는 아래의 방법들로 한다. const bigInt1 = 9007199254740991n; // 끝에 n을 붙임 const bigInt2 = BigInt(9007199254740991); const b.. 공감수 0 댓글수 0 2023. 4. 6.
Section 9. 자바스크립트 2, 8, 16진법과 비트 연산자 I. 다른 진법들 2진법 binary 0b 뒤로 숫자 0, 1를 붙여 표현하는 진법이다. [ 0b1, 0b10, 0b11, 0b100, 0b101 ].forEach(i => console.log(i)) //1 //2 //3 //4 //5 2진법으로 forEach문을 돌렸지만 출력될 때는 10진법으로 표현이 된다. 표현을 달리 했을 뿐, 자바스크립트 내부에서는 같은 숫자로 인식한다. 8진법 octal 0o 뒤로 숫자 0~7를 붙여 표현하는 진법이다. [ 0o7, 0o10, 0o100, 0o1000, ].forEach(i => console.log(i)) //7 //8 //64 //512 16진법 hexadecimal 0x 뒤로 숫자 0~9, A~F를 붙여 표현하는 진법이다. [ 0x9, 0xA, 0xB, .. 공감수 0 댓글수 0 2023. 4. 6.
Section 8. 자바스크립트 Object 깊게 다루기 (JSON) I. JSON JavaScript Object Notation 이런 형태로 작성된 문서를 XML이라고 한다. XML은 간단히 말해서 복잡할 수 있는 정보를 서버와 클라이언트에서 주고 받기 적합한 형태로 표현한 것이라고 한다. tag를 사용하여 정보와 구조가 명확하게 드러나는 특징이 있다. 하지만 가독성이 조금 떨어질 수 있는데 여기서 강점을 가질 수 있는 것이 바로 JSON이다. JSON은 보다 간결한 형태로 구조화된 정보를 표기한다. JSON은 정리를 하자면 다음과 같다 복잡한 구조를 가질 수 있는 데이터를 한 줄의 문자열로 표현한 것. 서버와 클라이언트 등 데이터들을 주고받는 주체들 사이에 널리 사용된다. II. JSON 객체의 정적 메서드 1. stringify - 객체를 문자열로 직렬화 seria.. 공감수 0 댓글수 0 2023. 4. 6.
Section 8. 자바스크립트 Object 깊게 다루기 (프로퍼티 어트리뷰트) I. 프로퍼티 어트리뷰트 property attributes 객체의 프로퍼티가 생성될 때 엔진에 의해 자동 정의되는 상태를 말한다. 프로퍼티에는 두 종류가 있다. const person = { // ⭐️ 1. 데이터 프로퍼티들 fullName: '홍길동', ageInNumber: 25, // ⭐️ 2. 접근자 프로퍼티들 get name () { return this.fullName .split('') .map((letter, idx) => idx === 0 ? letter : '*') .join(''); }, get age () { return this.ageInNumber + '세'; }, set age (age) { this.ageInNumber = Number(age); } } console.log.. 공감수 0 댓글수 0 2023. 4. 6.
Section 8. 자바스크립트 Object 깊게 다루기 I. Object 클래스 자바스크립트 카테고리에서 지금까지 소개된 자바스크립트 객체들의 원형이다 console.log( new String('ABC') instanceof Object, new Number(123) instanceof Object, [] instanceof Object, (function () {}) instanceof Object, globalThis instanceof Object ); //true true true true true 생성자 함수는 다음과 같다 // 빈 객체 생성 console.log( new Object(), new Object(null), new Object(undefined), ); //{} {} {} // 각 값에 적합한 래핑함수로 작용 console.log( .. 공감수 0 댓글수 0 2023. 4. 5.
Section 7. 자바스크립트 배열의 스프레드와 디스트럭쳐링 I. 스프레드 spread 1. 기본 문법 const arr1 = [1, 2, 3]; const arr2 = [...arr1]; console.log(arr2); //[1, 2, 3] const arr1 = ['B', 'C']; const arr2 = ['D']; const arr3 = ['E']; const arr4 = ['A', ...arr1, ...arr2, ...arr3, 'F'] console.log(arr4); //['A', 'B', 'C', 'D', 'E', 'F'] 2. 활용 a. 배열을 다수의 인자들로 펼칠 수 있다 const arr1 = [1, 2, 3, 4, 5]; console.log(arr1); //[1, 2, 3, 4, 5] console.log(...arr1); //1 2 3 .. 공감수 0 댓글수 0 2023. 4. 5.
Section 7. 자바스크립트 고차함수 메서드들 배열의 고차함수 higher order function 메서드의 특징들은 다음과 같다 다른 함수(콜백 함수)를 인자로 받는다. 함수형 프로그래밍 - 변수 사용 없이 순회 작업들을 코딩한다. 1. forEach - 각 요소를 인자로 콜백함수를 실행하는 메서드 for문의 좋은 대체제이다. 단점은 예외를 던지지 않으면 종료할 수 없다. - break, continue 사용이 불가하다. 인자들 : 콜백함수 - 인자 : (현재 값, 현재 값의 인덱스, 해당 배열) thisArg 등등이 있다. const arr = [1, 2, 3, 4, 5]; const result = arr.forEach(itm => { console.log(itm); }); //1 //2 //3 //4 //5 콜백함수를 인자로 받았고 forE.. 공감수 0 댓글수 0 2023. 4. 5.
Section 7. 자바스크립트 배열의 기본 메서드들 I. 특정 값을 반호나하는 기본 메서드들 1. (정적) isArray - 배열인지 여부를 반환하는 메서드 console.log( Array.isArray([1, 2, 3]), Array.isArray('123'), Array.isArray('123'.split('')) ); //true false true 배열 여부를 boolean 값으로 반환한다. 2. at - 주어진 인자를 인덱스로 값을 반환하는 메서드 at은 음수를 사용하여 뒤에서부터 접근이 가능하다는 사실을 전에 배웠다. const arr = [ '한놈', '두시기', '석삼', '너구리', '오징어' ]; console.log( arr.at(1), arr.at(2) ); //두시기 석삼 console.log( arr.at(-1), arr.at(.. 공감수 0 댓글수 0 2023. 4. 4.
Section 7. 자바스크립트 배열의 특징과 생성 I. 자바스크립트의 배열은 다르다 *밑에 나올 배열의 출력문에는 (숫자) [ ] 형식으로 써놨다. 여기서 (숫자)는 브라우저에서 나온 결과값을 복사 했기 때문에 있는 것이지 실제로 출력되는 것은 아니다. 다른 언어들의 배열 - 전형적인 배열의 특징은 다음과 같다. 한 배열에는 같은 자료형의 데이터만 포함 가능하다. 데이터의 메모리 주소가 연속으로 나열된다. 접근은 빠름, 중간요소의 추가나 제거는 느리다. 자바스크립트의 배열의 특징은 다음과 같다. 자바스크립트의 배열은 진짜 배열이 아니다. 배열의 형태와 동작을 흉내내는 특수한 객체이다. 한 배열에 다양한 자료형의 데이터가 들어갈 수 있다. 연속나열이 아니다. 접근은 상대적으로 느리지만 중간요소의 추가나 제거는 빠르다. 특정 자료형 전용 배열도 있다. II.. 공감수 0 댓글수 0 2023. 4. 4.
Section 6. 자바스크립트 Date 객체 Date 객체는 날짜와 시간 관련 기능들을 제공하는 빌트인 객체이다. I. 생성자 함수 1. 현재 날짜와 시간 const now = new Date(); console.log(typeof now); //object console.log(now); //Fri Mar 31 2023 11:11:02 GMT+0900 (한국 표준시) const nowStr = Date() console.log(typeof nowStr); //string console.log(nowStr); //Fri Mar 31 2023 11:11:13 GMT+0900 (한국 표준시) 현재 날짜와 시간이 출력되는 것을 알 수 있다. 두개의 출력문을 보면 특징은 다음과 같다. new와 함께 사용하면 인스턴스 객체가 된다. new 없이 사용하면 문.. 공감수 0 댓글수 0 2023. 3. 31.
Section 6. 자바스크립트 Math 객체 Math 객체는 수학에 관련된 기능을 가진 빌트인 객체이다. 특성은 다음과 같다. 정적 프로퍼티와 메서드만 제공한다. Number 타입만 지원한다. -BigInt 사용이 불가능하다. I. 주요 정적 프로퍼티 PI - 원주율 console.log( Math.PI ); //3.141592653589793 E - 자연로그의 밑 console.log( Math.E ); //2.718281828459045 II. 주요 정적 메서드 1. abs - 절대값(0 이상) 반환 console.log( Math.abs(123), Math.abs(-123), ); //123 123 0을 반환하는 경우이다. // 0 반환 console.log( Math.abs(0), Math.abs(''), Math.abs(null), Mat.. 공감수 0 댓글수 0 2023. 3. 31.
Section 6. 자바스크립트 Number 객체 I. 생성자 함수 const numObj1 = new Number(); const numObj2 = new Number(123); const numObj3 = new Number(-123.45); console.log(numObj1, numObj2, numObj3);//Number {0} Number {123} Number {-123.45} String 생성자 함수에 이어서 Number 생성자 함수를 살펴보면 위와 같다. 인자가 없을 시 0이 반환되는 것을 볼 수 있다. Number 생성자 함수도 PrimitiveValue를 살펴보면 다음과 같다. 모두 PrimitiveValue에 원시값이 저장되는 것을 알 수 있다. console.log( numObj1.valueOf(), numObj2.valueOf(.. 공감수 0 댓글수 0 2023. 3. 31.

문의안내

티스토리
로그인
고객센터

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