Bang's

알고있으면 좋은 Javascript Tip✨ getBoundingClientRect() getBoundingClientRect() 메서드는 웹페이지 요소의 위치와 크기를 알아내고자 할 때 사용한다. 쉽게 말해, 뷰포트(웹 페이지의 보이는 부분)에서 요소의 위치와 크기를 가져온다. (1) getBoundingClientRect 기본 문법 width : pixel 단위의 요소의 가로 크기 height : pixel 단위 요소의 세로 크기 top : 뷰포트의 위쪽에서 요소의 위쪽 까지의 거리 left : 뷰포트의 왼쪽에서 요소의 왼쪽 부분까지의 거리 bottom : 뷰포트의 아래쪽과 요소의 아래쪽 거리 right : 뷰포트의 오른쪽과 요소의 오른쪽 사이 거리 (2) getBoundingClientRect 예제..

알고있으면 좋은 Javascript Tip✨ toFixed() toFixed() 메서드는 매개변수로 소수점 자리수를 채워주면 그 자리수 만큼 반올림하여 문자열로 리턴해주는 소수점 처리 메서드이다. (1) toFixed 기본 문법 toFixed 메서드는 Number 인스턴스의 소수 부분 자릿수를 전달받은 값으로 고정한 후, 그 값을 문자열로 반환한다. numObj.toFixed([소수 부분의 자릿수]) 매개변수 : 소수점 뒤에 나타날 자릿수 0 이상 100 이하의 값이 사용 가능하고, 값을 지정하지 않으면 0을 사용한다. 반환 값(return) : 숫자를 고정 소수점 표기법으로 표기해 반환 소수점 이하가 길면 숫자를 반올림하고, 짧아서 부족할 경우 뒤를 0으로 채운다. (2) toFixed 동작 과정 le..

알고있으면 좋은 Javascript Tip✨ padStart() & padEnd() padStart와 padEnd 함수는 ES8(ES2017)에 새롭게 추가된 기능이다. pad는 좌우에 특정한 문자열로 채우는 기능이다. 첫번째 파라미터인 maxLength를 받아 문자열의 길이가 maxLength보다 작을 경우 나머지를 특정한 문자열로 채워주는 기능이다. 이때 두번째 문자열을 넘겨주지 않으면 빈 공백으로 문자열을 채운다. (1) padStart 함수 기본 문법 padStart 함수는 문자열의 앞부분을 특정 길이로 채우는 역할을 한다. str.padStart(targetLength[, padString]) str : 원본 문자열 targetLength : 목표로 하는 문자열 길이를 나타낸다. 이 길이에 맞게..

알고있으면 좋은 Javascript Tip✨ reduce() reduce 함수는 배열을 순회하면서 각 요소에 대해 콜백 함수를 실행시키고, 콜백 함수의 반환 값을 accumulator에 계속해서 누적시킨다. 그리고 순회가 완료되면 accumulator의 최종 값을 반환한다. (1) reduce 함수 기본 문법 reduce 함수는 배열을 순회하면서 각 요소에 대해 콜백 함수를 실행시키고, 콜백 함수의 반환 값을 accumulator에 계속해서 누적시킨다. 그리고 순회가 완료되면 accumulator의 최종 값을 반환한다. array.reduce(callback(accumulator, currentValue[, index[, array]] )[, initialValue]) array : recude를 적용할..

알고있으면 좋은 Javascript Tip✨ 함수에서 사용되는 this는? 보통 어떤 함수를 함수로서 호출한 경우 this는 전역객체를 참조한다. 실행해보면 전역객체인 window 객체가 출력된다. 전역객체가 아닌 다른 객체를 출력하고 싶은 경우 call, apply, bind를 사용한다. function test(){ console.log(this); }; test(); (1) call call 메서드는 메서드의 호출 주체인 함수를 즉시 실행하는 메서드이다. 전역객체가 아닌 바인딩 시켜준 객체가 출력된다. function test(c, d){ // {a : 1, b : 2} 3 4 console.log(this, c, d); }; test.call({a : 1, b : 2}, 3, 4); (2) app..

알고있으면 좋은 Javascript Tip✨ Set() Set 객체는 중복되지 않는 유일한 값들의 집합이다. 쉽게 말해, 동일한 값을 중복하여 포함할 수 없고, 요소 순서에 의미가 없으며, 인덱스로 요소 접근이 불가능하다. (1) Set 객체 생성하기 Set 생성자 함수로 생성하며, 인수를 전달하지 않으면 빈 Set 객체가 생성된다. const example = new Set(); // Set(0) {} console.log(example); 중복된 값은 Set 객체에 요소로 저장되지 않으므로, 배열에서 중복된 요소를 제거하는데 사용한다. const example1 = new Set([1, 2, 3, 3]); console.log(example1); // Set(3) {1, 2, 3} const exam..

알고있으면 좋은 Javascript Tip✨ 이벤트 루프란 무엇인가? 보통 자바 스크립트는 단일 스레드 기반의 언어로 한 번에 하나의 작업만을 처리할 수 있다. 하지만 이벤트 루프를 이용해 비동기 방식으로 동시성을 지원한다. 여러 이벤트가 동시에 발생되었을 때 어떤 순서로 콜백 함수를 호출할지 판단하고 이벤트가 종료될 때까지 이벤트 처리를 위한 작업을 반복한다. (1) 이벤트 루프 진행 과정 Web API : 브라우저에서 제공하는 API로 DOM, Ajax, TimeOut 등이 있다.CallStack에서 실행된 비동기 함수는 Web API를 호출하고, Web API는 콜백 함수를 Task Queue에 넣는다. 콜스택 : 실행된 코드의 환경을 저장하는 자료구조로, 함수 호출 시 이곳에 저장됩니다. 어떤 함..

알고있으면 좋은 Javascript Tip✨ this란 무엇인가? 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가르키는 자기참조변수이다. this는 호출 패턴에 따라 다른 객체를 참조하고 실행 컨텍스트가 생성될 때마다 this의 바인딩이 일어난다. this 바인딩은 식별자와 값을 연결하는 과정을 말하며 new 바인딩, 명시적 바인딩, 암시적 바인딩, 기본 바인딩 으로 구분된다. (1) new 연산자 new 연산자를 사용하면 해당 객체로 바인딩 된다. let name = 'global'; function Func() { this.name = 'Func'; this.print = function f() { console.log(this.name); }; } let a = new Func(); a.prin..

알고있으면 좋은 Javascript Tip✨ Date 객체 자바스크립트에서 현재 날짜 및 시간을 구하기 위해서는 Date 객체를 사용하면 된다. Date 객체를 사용하여 현재의 날짜를 출력하면 YYYY-MM-DD와 같은 형식의 날짜 포맷으로 출력되지 않기 때문에, Date 객체에서 제공하는 추출 함수를 사용하여 날짜 포맷을 변환하는 작업이 추가적으로 필요하다. (1) 현재 날짜, 시간 구하기 new Date()는 현재 날짜와 시간을 가지는 객체를 리턴한다. const now = new Date(); (2) 날짜 포맷 변경하기 (YYYY-MM-DD) getFullYear() - Date 객체의 년도를 가져온다. getMonth() - Date 객체의 월 정보를 가져온다. 1월은 0으로 표현됨을 주의해야 한..

알고있으면 좋은 Javascript Tip✨ 호이스팅 호이스팅은 코드에 선언된 변수 및 함수를 코드 상단으로 끌어올리는 것이다. (1) 호이스팅 대상은? var 키워드는 호이스팅이 발생하게되면 선언과 동시에 초기화를 진행하고, 변수의 재선언과 재할당이 모두 가능하며 함수 스코프에 종속된다. let 키워드는 블록 레벨 스코프에 해당하며, 변수의 재선언이 불가능하지만 재할당은 가능하다. const 키워드도 마찬가지로 블록 레벨 스코프에 해당하며, 변수의 재선언과 재할당 모두 불가능하다. // 예제 (1) console.log($test); // undefined var $test = true; console.log($test); // true // 예제 (2) console.log($test); // 에러 ..