profile
UI 화면 만드는걸 좋아하는 UI개발자입니다. 프론트엔드 개발 공부 중입니다. 공부한 부분을 블로그로 간략히 정리하는 편입니다.
post-thumbnail

Promise(), async, await

Promise(), async, await Promise와 async, await는 비동기 로직 호출 함수의 실행 순서를 보장해주기 위해서 만들어졌다. Promise는 Ecmascript2015(ES6)에 나온 기술이고 async, await는 Ecmascript20

2022년 2월 21일
·
0개의 댓글
·
post-thumbnail

4.1 값 변환

어떤 값을 다른 타입으로 바꾸는 과정이 명시적이면 '타입 캐스팅', 암시적이면 '강제변환'이라고 하는데, '명시적 강제변환'은 코드만 봐도 의도적으로 타입변환을 일으킨다는 사실이 명백한 반면, '암시적 강제변환'은 다른 작업 도중 불분명한 부수 효과로부터 발생하는 타

2022년 2월 15일
·
0개의 댓글
·
post-thumbnail

이벤트 흐름 (캡쳐링과 버블링)

이벤트 흐름 이벤트 흐름은 크게 3가지가 있다. 캡쳐링 단계 타겟 단계 버블링 단계 이벤트 흐름 상세 > 만약 .C1을 클릭해서 클릭 이벤트를 발생시켰다면, 최상위 요소부터 이벤트 흐름이 내려가는데 document, html, body, A1, B1까지가 캡쳐링

2022년 2월 11일
·
0개의 댓글
·
post-thumbnail

3.4.5 네이티브 프로토타입

내장 네이티브 생성자는 각자의 .prototype을 가진다.prototype 객체에는 해당 객체의 하위 타입별로 고유한 로직이 담겨 있다.각 생성자 프로토타입마다 자신의 타입에 적합한 기능이 구현되어 있다.평범하지 않은 프로토타입도 있다.네이티브 프로토타입을 변경할 수

2022년 2월 9일
·
0개의 댓글
·
post-thumbnail

3.4.4 Symbol()

'심벌'은 ES6에서 처음 선보인, 새로운 원시 값 타입이다.심벌은 충돌 염려없이 객체 프로퍼티로 사용 가능한, 특별한 '유일 값'이다.심볼을 똑같이 선언해서 각각 변수에 담아도 둘은 서로 같지 않다.심볼의 타입은 symbol 이다.심볼을 객체의 key 로 사용할 수

2022년 2월 8일
·
0개의 댓글
·
post-thumbnail

reduce()

어떤 분야든 마찬가지겠지만 공부를 할 때, 배워서 어디에 써먹을 수 있는가?를 먼저 생각해보아야 한다.문법만 배우고 실무에서 활용하는 방법을 모른다면 보람이 없다.reduce()는 배열의 4칙연산 뿐만 아니라 배열 요소의 깊은 필터링을 통해 원하는 정보들의 구성으로 이

2022년 2월 7일
·
0개의 댓글
·
post-thumbnail

3.4.3 Date() and Error()

Date()와 Error()는 리터럴 형식이 없다.Error 생성자는 앞에 new가 있든 없든 결과는 같다.임의로 에러를 발생시켜야 하는 곳에 사용message 프로퍼티와 type등 다른 프로퍼티가 들어가 있을 수도 있지만, 사람이 읽기 편한 toString() 메서드

2022년 2월 7일
·
0개의 댓글
·
post-thumbnail

정규표현식(RegExp)

match()문자열.match(정규식) - 일치하는 문자열의 배열(Array) 반환옵션을 넣지 않을 경우 다양한 정보 함께 출력, 그 중 첫번째 인덱스에 검색한 첫번째 값이 들어옴옵션을 넣으면 검색한 단어로 구성된 배열만 출력replace()문자열.replace(정규식

2022년 2월 6일
·
0개의 댓글
·
post-thumbnail

3.4.2 Object(), Function(), and RegExp()

일반적으로 Object(), Function(), and RegExp() 생성자도 선택 사항이다(의도적인게 아니라면 사용하지 않는게 좋다).new Object() 는 사실상 사용할 일이 없다.프로퍼티르 하나씩 지정하지 말고 그냥 객체 리터럴로 한번에 지정하자.Funct

2022년 2월 5일
·
0개의 댓글
·
post-thumbnail

3.4.1 Array()

생성자로 배열을 선언하거나 리터럴로 배열을 생성하거나 동일하다. 아래와 같은 기능이 있으니, 되도록이면 배열은 리터럴로 생성하자. 현재 크롬 버전 [비어 있음 x 3]

2022년 2월 4일
·
0개의 댓글
·
post-thumbnail

3.4 네이티브, 나는 생성자다

배열, 객체, 함수, 정규식 값은 리터럴 형태로(축약형) 생성하는 것이 일반적이지만, 리터럴은 생성자 형식으로 만든 것과 동일한 종류의 객체를 생성한다(즉, 래핑되지 않은 값은 없다).확실히 필요해서 쓰는게 아니라면 생성자 형태로 값을 선언하는 것은 가급적 쓰지 않는

2022년 2월 4일
·
0개의 댓글
·
post-thumbnail

3.3 언박싱

객체 래퍼의 원시 값은 valueOf() 메서드로 추출한다.valueOf()를 사용하는 과정에서 내부적으로는 아래와 같이 암시적 변환이 일어난다.

2022년 2월 2일
·
0개의 댓글
·
post-thumbnail

3.2.1 객체 래퍼의 함정

객체 래퍼를 사용하는 것을 권장하진 않지만 그래도 사용해야 한다면 아래와 같은 함정이 있으니 주의해야 한다.일반적인 객체는 'truthy'한 값이다. 그래서 조건값에 넣으면 true가 되어 위 코드의 구문은 실행되지 않는다.수동으로 원시 값을 박싱하려면 Object()

2022년 2월 2일
·
0개의 댓글
·
post-thumbnail

3.2 래퍼 박싱하기

원시 값엔 프로퍼티나 메서드가 없으므로 .length, toString()으로 접근하려면 객체 래퍼( ex. new String("abc") )로 감싸줘야 한다.(다른 언어에서는..) 하지만 자바스크립트는 원시 값을 알아서 박싱(래핑)하므로 아래와 같은 코드가 가능하다

2022년 2월 2일
·
0개의 댓글
·
post-thumbnail

3.1 내부 [[Class]]

typeof가 'object'인 값에는 \[Class]라는 내부 프로퍼티가 추가로 붙는다.이것으로 typeof로 명확히 그 타입을 알 수 없는 Array 라던가 null, undefined 등과 같은 값의 본연의 타입을 알아낼 수 있다.null, undefined와 같

2022년 2월 1일
·
0개의 댓글
·
post-thumbnail

3. 네이티브

네이티브는 자바스크립트 내장함수다. 많이 쓰는 네이티브 내장함수들 > 생성자 함수 방식으로 문자열 또는 숫자를 만들면 그 값은 객체 래퍼에 감싸져서 반환되기 때문에 typeof 값은 "object"가 된다. 이런 객체 형태로 반환된 값을 문자열로 바꿔주는 것이 문

2022년 2월 1일
·
0개의 댓글
·
post-thumbnail

2.5 값 vs 레퍼런스

책에는 헷갈리게 값-복사, 레퍼런스-복사 라고 써있지만 간단히 말해 불변값과 가변값 이라고 보면 된다. > 불변값(immutable) - null, undefined, string, number, boolean, symbol > 가변값(mutable) - 나머지 배열

2022년 2월 1일
·
0개의 댓글
·
post-thumbnail

2.4.4 특이한 동등 비교

NaN, 0과 -0등을 ES6에서 Object.is() 라는 유틸리티 함수로 간단하게 판별할 수 있다.NaN은 물론 Number.isNaN()을 사용해도 된다.폴리필도 간단하다.0과 -0을 비교하는 것 외에는 == 또는 === 연산자로 판별하는 것이 더 효율적.

2022년 1월 31일
·
0개의 댓글
·
post-thumbnail

2.4.3 특수 숫자

NaN은 말 그대로 '숫자 아님'이다. 하지만 사실 '유효하지 않은 숫자'라고 하는게 더 적절하다.Not a Number 즉, 숫자가 아닌데 타입이 "number"라니 이 무슨 해괴한 말인가?NaN은 유일하게 자기 자신과 비교를 해도 동등하지 않다.그래서 NaN을 판별

2022년 1월 31일
·
0개의 댓글
·
post-thumbnail

2.4.2 undefined

느슨한 모드에서는 전역 스코프에서 undefined에 값을 할당할 수 있다.(절대 비추천)그런데 황당한 것은 undefined라는 지역변수를 생성할 수 있다.절대 이렇게 쓰지 말자.보이드 연산자는 어떤 값이든 무효로 만드는 특징이 있어서 값을 undefined로 만들어

2022년 1월 31일
·
0개의 댓글
·