You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🚀 자바스크립트 객체 끼리 값 비교하는 방법
객체 끼리 값 비교하기 key 순서가 정해진 객체 비교 const one = { fruit: '🥝', nutrients: { energy: '255kJ', minerals: { name: 'calcium' } } }; const two = { fruit: '🥝', nutrients: { energy: '255kJ', minerals: { name: 'calcium' } } }; // 1. Using JSON JSON.stringify(one) === JSON.stringify(two); // true // 2. Using Object.entries Object.entries(one).toString() === Object.entries(two).toString(); // 3. Using Lodash Li..
🚀 자바스크립트 객체 value 값으로 key 값 찾기
value값으로 key값 찾기 Object 메소드와 배열 메소드를 적절히 조합하여 사용하면 된다. 원리만 알면 쉽게 구현이 가능하다 function getKeyByValue(object, value) { return Object.keys(object).find(key => object[key] === value); } 우선 key만 따로 배열로 전환하고 -> Object.keys() 고차 배열함수 find()를 써서, 배열을 순회하여, Object[key]의 값과 비교하려는 value값이 같으면 그 값을 리턴한다.
🚀 화면 스크롤 맨 아래 / 맨 위 감지하기
스크롤 맨 아래 맨 위 감지하기 스크롤 되어 내려온 위치와 브라우저에 표시된 높이를 더한 값이 페이지 전체 높이 값과 같거나 클 경우를 비교해 로직을 짜주면 된다. 맨 아래까지 왔다고 판단하는 로직 function detectBottom() { var scrollTop = $(window).scrollTop(); var innerHeight = $(window).innerHeight(); var scrollHeight = $('body').prop('scrollHeight'); if (scrollTop + innerHeight >= scrollHeight) { return true; } else { return false; } } 맨 위를 감지하는 방법 function detectTop() { var s..
🚀 자바스크립트 Timestamp 다루기
타임스탬프 값이란? 타임스탬프 값은 현재 시간을 밀리세컨드 단위로 변환하여 보여주며 특히 값을 비교하는 경우 매우 유용하게 사용할 수 있습니다. 현재시간과 이후시간을 비교할 경우 초 단위, 분 단위 또는 시 단위로 비교하기 어렵습니다. 그 이유는 24 이후에 1이되거나 아니면 60 다음에 1로 넘어가기 때문입니다. 그런데 타임스탬프의 경우 감소하지 않고 증가만 하므로 비교하는 경우에 매우 유용합니다. if (1508367636000 < 1508367639600) {} 현재시간 timestamp 구하기 먼저 가장 빠른 방법으로 + 연산자를 new Date() 값 앞에 사용하는 것이 가장 빠르고 간편합니다. timestamp = + new Date(); timestamp = new Date().getTime..
![🚀 자바스크립트에서 [-1] 인덱스 사용하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FVtzqi%2Fbtr6Fh3ipbW%2Ffuxo2U6rK0XF73eVJZmFJ1%2Fimg.webp)
🚀 자바스크립트에서 [-1] 인덱스 사용하기
Array.prototype.at() 2022부터 표준 메소드로 채택되면서, 파이썬 같이 간편하게 음수 인덱스로 찾아가는 것이 가능해졌다. 메소드 at()의 추가는 성능적인 문제로 탄생했다기보다는 가독성면에서의 장점을 위해 추가된 기능이라고 한다. 기존 방법 // 마지막 값을 얻기 const arrays = ['a','b','c','d']; // array.length에서 1을 빼 마지막 인덱스 얻어서 사용 arrays[arrays.length - 1]; // 'd' // 음수 인덱스를 지원하는 slice메소드 간접 사용 arrays.slice(-2, -1); // 'd' 2022 표준 메소드 const arrays = ['a','b','c','d']; console.log(arrays.at(-1)); ..
🚀 CSS 애니메이션 재시작 하는 방법
CSS 애니메이션 재시작 엘리먼트.effect { animation: animation 1s linear } 이렇게 어떤 요소에 클래스로 만든 애니메이션을 넣고, 자바스크립트로 특정 상황에 애니메이션이 실행되게 했을 때, 그 특정 애니메이션 상황이 연속되면 애니메이션을 처음부터 다시 시작하고 싶으실 때가 있을 겁니다. 하지만 아래와 같이 단순히 class를 제거하고 다시 추가해도 애니메이션이 재시작 되지 않습니다. const target = 엘리먼트; target.classList.remove("effect"), target.classList.add("effect") 클래스를 붙이고 지우는 일은 사실 페이지의 많은 부분에 영향을 줄 가능성이 큽니다. 이런 변화를 바로 렌더링 하기에는 비용이 너무 크기 때..
🚀 자바스크립트에서 static 변수 사용하기
자바스크립트 static 변수 구현 우선 결론만 말하자면, C나 자바에 있는 static 변수 문법은 자바스크립트에서는 존재하지 않는다. 그러면 사용하지 못하냐는 질문은 그건 또 아니다. 간접적으로 구현해서 정적 변수처럼 사용할 수 있다. 전역 변수 사용하기 무식하게 전역변수를 static변수로 이용하는 방법이다. 가장 간편하지만 전역변수는 가급적으로는 쓰지 않는 것이 바람직 하다. var cnt=0; // 전역변수 function aa() { cnt++; console.log(cnt); } aa() // 1 aa() // 2 aa() // 3 aa() // 4 클로저를 이용한 구현 let static_value = (function static_func(value) { let i = value; ret..
🚀 자바스크립트에 sleep() & wait() 대기 함수 쓰기
자바스크립트 sleep(), wait() 대기 함수 보통 C언어, 자바, 파이썬에서 보면, 입력한 시간 만큼 코드의 실행을 멈추는 일반적인 기능으로 sleep()이나 wait() 같은 함수가 존재한다. 하지만 자바스크립트에선 따로 sleep()함수가 존재하지 않으니, 직접 개발자가 구현해주어야 한다. while문 활용 시간날짜를 얻는 함수 Date() 와 while문 조건으로 3초 지난걸 확인 function wait(sec) { let start = Date.now(), now = start; while (now - start < sec * 1000) { now = Date.now(); } } console.log(11) wait(3); console.log(22) Promise 객체 활용 우선 P..
🚀 자바스크립트 forEach() 에 break 거는 방법
자바스크립트 break Array.forEach() 는 기본적으로 break 문을 따로 지원하지 않는다. 만일 일반 for문의 break 구문을 forEach에 구현하고 싶다면 다음 3가지 방법이 존재한다. try catch문 안에서 forEach를 돌리고, 강제 throw에러로 루프를 벗어나는 방법 Array.some() 메소드를 쓰는 방법 Array.every() 메소드를 쓰는 방법 try catch - forEach는 return true / false 둘 다 continue로 작동된다. - forEach 자체의 return은 undefined 이다. - 따라서 리턴으로 break를 걸수가 없어 아예 예외처리를 통해서 예외를 throw하여 강제로 루프문을 벗어나게 하는 방법을 쓴다. var arr ..
🚀 버튼 눌러서 iframe 띄우기 코드
버튼 눌러서 iframe 띄우기 코드 html의 data-* 속성을 이용해서 미리 링크를 저장해놓고, 자바스크립트에서 src속성값을 data-src속성값으로 교체해주면 iframe에서 홈페이지 링크가 로드 된다. Button function postYourAdd () { var iframe = $("#forPostyouradd"); iframe.attr("src", iframe.data("src")); } $("button").on("click", postYourAdd);
