Bang's

알고있으면 좋은 Javascript Tip✨ JSON 자바스크립트의 ajax, fetch, axios등을 통해 서버로 요청(request)를 보낼 수 있다. 하지만 네트워크를 통해 객체를 보내기 위해서는 이 객체를 문자열로 전환해야 한다. JSON(Javascript Object Notation)은 값이나 객체를 나타내주는 범용 포맷이다. JSON.stringify() JavaScript 객체를 JSON 문자열로 변환해준다. stringify() 메서드는 JavaScript 객체를 인자로 받고 JSON 문자열을 반환한다. // 객체를 obj이라는 변수에 저장 const obj = { name: "홍길동", age: 25, married: false, family: { father: "홍판서", mothe..

알고있으면 좋은 Javascript Tip✨ setTimeout setTimeout과 setInterval는 기본적으로 무언가를 일정 간격을 두고 실행하도록 만들어주는 스케줄링 메서드이다. setTimeout 메서드는 한 번 실행 후 멈추게 된다. setTimeout(() => { console.log('timeout'); }, 1000); setInterval setInterval 메서드는 지정된 주기로 특정 코드를 실행 한다. 즉, 반복적으로 실행 한다. setInterval(() => { console.log('timeout'); }, 1000); 둘의 차이점은? setInterval은 설정된 함수의 실행시간에 관계 없이, 간격으로 설정된 시간이 지나면 곧바로 다시 함수를 실행시킨다. 그에 반해 s..

알고있으면 좋은 Javascript Tip✨ flat() ES2019에 추가된 메서드로 배열 내부의 하위 배열을 쉽게 합칠 수 있는 아주아주 유용한 메서드이다. flat 메서드는 하위 배열을 합칠때 사용한다. const $array = ["a", ["b"], ["c"]]; // $newArray = ['a','b','c']; const $newArray = $array.flat(); flatMap() flatMap 메서드는 flat과 map을 합친 메서드이다. 하위배열을 결합하는데 조건에 따라 결합을 할때 사용한다. let arr1 = [1, 2, 3, 4]; // [[2], [4], [6], [8]] arr1.map(x => [x * 2]); // [2, 4, 6, 8] arr1.flatMap(x =>..

알고있으면 좋은 Javascript Tip✨ export 파일이나 모듈안의 함수나, 객체를 export 하는데 사용된다. export에는 Named exports와 Default exports 두가지 방법이 있다. (1) Named exports Named exports는 여러값을 export 하는데 유용하다. export 된 이름을 사용하여 import 하여 사용할 수 있다. // 개별로 선언 export export const arrs = [10, 20, 30, 40]; // 묶어서 export export { arrs2, getName }; const arrs2 = [100, 200, 300, 400]; function getName() { return "aaaaaaaaa"; } (2) Defaul..

알고있으면 좋은 Javascript Tip✨ in 연산자 in연산자는 특정 속성이 해당 객체에 있는지 여부를 boolean으로 리턴해준다. (1) array의 경우 array에서 in연산자를 사용하면, 인덱스에 대해서만 체크할 수 있다. const arr = ['dog', 'cat', 'rabbit']; console.log(0 in arr); // true console.log((1+1) in arr); // true console.log('dog' in arr); // false (2) string의 경우 string에서는 in연산자를 사용하면 에러가 발생한다. 하지만, new String로 선언하면 string에서 사용할 수 있는 속성(length)에 대해서 체크할 수 있다. const text =..

알고있으면 좋은 Javascript Tip✨ min() min() 메서드는 주어진 값들 중에서 가장 작은 값을 반환한다. let minValue = Math.min(4, 8, 2, 6, 1); // 1 max() max() 메서드는 주어진 값들 중에서 가장 큰 값을 반환한다. let maxValue = Math.max(4, 8, 2, 6, 1); // 8 주의할 점은, 이 함수들은 배열을 직접 다루지 않는다. 배열 내의 값들을 사용하려면 함수에 전달하기 전에 배열을 해체하여 개별 숫자들을 전달해야한다. ES6에서 도입된 확산 연산자(spread operator)를 사용하여 배열을 전달할 수 있다. let numbers = [4, 8, 2, 6, 1]; let minValue = Math.min(...nu..

알고있으면 좋은 Javascript Tip✨ URLSearchParams() URLSearchParams API는 URL 쿼리 파라미터에서 자료를 가져오는 방법을 제공한다. URL 객체 사용 let url= new URL('https://sisiblog.tistory.com?mode=night&page=2'); let params = new URLSearchParams(url.search); const $queryStr = new URLSearchParams(window.location.search); 직접 URL 객체를 만들어서 URLSearchParams 객체를 생성할 수도 있다. url.search 대신 window.location.search를 사용할 수 있다. window.location.sea..

알고있으면 좋은 Javascript Tip✨ closest() 현재 기준의 Element에서 파라미터에 입력된 선택자에 만족할 때까지 탐색한다. 이 중, 가장 가까운 선택자를 선택해 가져온다. 조건에 만족하는 요소가 없을 경우에는 Null을 반환한다. const $selectId = Number($selectIcon.closest('.floor-row').dataset.floorId); .icon 을 클릭하면 .icon의 부모 요소를 하나씩 찾아서 올라간다. .floor-row라는 부모 요소(클래스)를 찾을 때까지 올라간다. parentElement() 부모 요소를 한 단계 씩 찾아서 올라간다. const $selectId = Number($selectIcon.parentElement.parentElem..

알고있으면 좋은 Javascript Tip✨ contains() 특정 문자 포함 여부를 알 수 있다. export default function isPoiAlarmCount(){ let $iconList = document.querySelectorAll('.icon'); $iconList.forEach((data) => { data.addEventListener('click', async (e) => { if(document.querySelector("#poi-container") && data.classList.contains('active')){ return; } } 문서(DOM) 안에서 #poi-container라는 ID를 가진 요소를 찾는다. data라는 변수에서 active라는 클래스가 있는지 ..

알고있으면 좋은 Javascript Tip✨ event.target() 이벤트가 발생한 요소를 반환한다. event target(html 요소)에 지정된 event type(클릭이나 스크롤 등)이 발생하면 정의된 event handler(함수)가 실행된다. $("a").click(function(event){ console.log(event.target); }); a 요소를 클릭 했을 때 이벤트가 발생한다. 이벤트가 발생할 때마다 이벤트 대상인 a 요소를 console.log로 출력한다. event.target과 this는 DOM 객체이므로, jQuery 객체가 아니기 때문에 jQuery 메서드를 사용할 수 없다.