You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🚀 자바스크립트 16진수, 10진수, 8진수, 2진수 변환
자바스크립트 진수 변환하기 자바스크립트네선 toString() 과 parseInt() 를 이용해 손쉽게 숫자 진수들을 변환 할 수 있다. 10진수 ➜ 16진수 var dec = 123; var hex = dec.toString(16); // === "7b" 10진수 ➜ 2진수 var dec = 123; var bin = dec.toString(2); // === "1111011" 16진수 ➜ 10진수 var hex = "7b"; var dec = parseInt(hex, 16); // === "123" 16진수 ➜ 2진수 10진수로 바꿨다가 다시 2진수로 바꾼다 var hex = "7b"; var bin = parseInt(hex, 16).toString(2); // === "1111011" 2진수 ➜ ..
![🚀 console.log의 [ Object ] 를 객체로 출력하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FKFbzE%2FbtrAtafizGS%2FeVIrzb8CDma1hZ2DlUX2G0%2Fimg.png)
🚀 console.log의 [ Object ] 를 객체로 출력하기
콘솔 로그 [object Object] 출력하기 console.log 혹은 alert 로 이중, 삼중 객체로된 데이터를 응답받아 출력해보면 다음과 같이 [ Object ] 스트링으로 출력될 것이다. { eventVersion: '2.1', eventSource: 'aws:s3', awsRegion: 'ap-northeast-2', eventTime: '2022-04-25T10:21:51.904Z', eventName: 'ObjectCreated:Put', userIdentity: [Object], requestParameters: [Object], responseElements: [Object], s3: [Object] } 브라우저 콘솔탭에서는 객체 안의 객체를 볼수 있는 기능이 내장되어 있어 안의 객체..
🚀 이벤트 핸들러 등록 되어있는지 검사 방법
자바스크립트 이벤트 핸들러 등록 체크 만일 addEventListener 를 버튼을 누르거나 사용자 행동에 따라 동적으로 이벤트를 등록하는 로직을 사용할 경우, 처리를 잘못 할 경우 중복으로 이벤트 핸들러를 여러번 바인딩되어 이벤트 콜백이 여러번 발생되는 현상이 생길 수 있다. 이럴때 조건문으로 해당 엘리먼트 요소가 특정 이벤트 바인딩이 되어있는지 검사를 하고 분기를 할 필요가 있는데, 구글링을 해보면 getEventListeners() 라는 api 라는게 나온다. 하지만 getEventListeners() 는 크롬 개발자 도구 콘솔창 용 api지 자바스크립트 표준 메소드가 아니기 때문에 스크립트에서 사용할수가 없다. [ERROR] ⚠️ ReferenceError: getEventListeners is ..
🚀 Background 이미지 미리 로드 기법
background-image preload 이미지를 이용한 버튼이라던지, css의 백그라운드 이미지를 이용한 ui와 사용자가 상호작용할때, 만일 그 ui가 마우스hover같은 사용자 동작에 따라서 나중에 나타내는 형식이라면 이미지 로드되는동안 ui가 망가지는 현상이 있을 수가 있다. 따라서, css에 필요한 이미지 소스를 미리 불러오는 트릭을 소개해본다. 또한 이 방법은 브라우저에 미리 요청하기 때문에 동시에 비동기로 한꺼번에 다운로드하여 로딩 속도 향상이 있을수도 있다. /* body태그의 가상선택자를 이용한다 */ body::after{ /* 소스만 다운받고 화면은 나태내지 않는다. (숨김 처리) */ position:absolute; width:0; height:0; overflow:hidden;..
🚀 스크롤 기능은 살리고 스크롤바 만 가리기
스크롤바 가리기 스크롤 자체 기능은 놔두면서 스크롤바만 없애는 코드이다. /* 전체 가리기 */ body{ -ms-overflow-style: none; } ::-webkit-scrollbar { display: none; } /* 특정 부분 스크롤바 없애기 */ .box{ -ms-overflow-style: none; } .box::-webkit-scrollbar{ display:none; } See the Pen Hide the Scrollbar in CSS but Allow Scrolling (div) by HubSpot (@hubspot) on CodePen. [CSS] 🌟 스크롤 바(Scrollbar) 스타일링 💯 총정리 Custom Scrollbar 스타일링 유튜브 홈페이지를 보면 스크롤바가 ..
🚀 모듈 분리하면 DOMContentLoaded 작동 안되는 현상 해결
DOMContentLoaded 이벤트 외부 로드 html문서에 인라인으로 DomcontentLoaded 이벤트를 걸어놓으면 잘 작동한다. 하지만 자바스크립트 부분을 외부 모듈로 빼내면 이상하게 제대로 작동이 안되는 현상을 경험할 수 있을 것이다. 이럴땐 따로 document의 readyState를 검사해서 콜백을 실행해주는 식의 처리를 외부 모듈 자바스크립트에서 적용해 주어야 한다. // 기존의 인라인 DOMContentLoaded 이벤트 리스너 코드 window.addEventListener('DOMContentLoaded' function () { // 코드내용 }) var DOMReady = function(callback) { document.readyState === "interactive" |..
🚀 position fixed + absolute 같이 적용하는 법
position fixed + absolute 같이 적용하는 법 웹페이지를 만들때, 어떤 요소를 고정(fixed)했는데, 기본적으로 차지하고 있는 공간을 없애고(absolute) 완전히 자유로운 요소로서 다루고 싶을 때가 있다. 본 블로그의 우측하단 구독카드 엘리먼트 역시 이런식으로 구현되어있다. 우선 fixed와 absolute는 position의 개별속성으로서, 원래는 둘이 동시에 적용이 불가능하다. 하지만 트릭을 이용해서 둘의 합성을 구현할수 있다. 부모 엘리먼트를 fixed처리하고 그안의 자식 엘리먼트를 absolute처리하면 된다. /* 부모 엘리먼트 */ .position { position: fixed; height: 100%; } /* 자식 엘리먼트 */ .position .row { po..
🚀 스크롤 내려서 특정 영역 감지하기
스크롤 내려서 특정 영역 감지하기 제이쿼리를 이용해 스크롤을 내리면 이를 감지해서 이벤트를 한번 발생시키는 스크립트이다. 스크롤 내려서 파랑 영역이 나올때까지 내려보세요 function checkVisible( element, check = 'above' ) { const viewportHeight = $(window).height(); // Viewport Height const scrolltop = $(window).scrollTop(); // Scroll Top const y = $(element).offset().top; const elementHeight = $(element).height(); // 반드시 요소가 화면에 보여야 할경우 if (check == "visible") return ((..
🚀 자바스크립트 reduce() 에 break 거는 법
How to early break reduce() 자바스크립트의 reduce() 루프 고차함수를 중간에 break하는 방법이다. 일반적인 break문법은 고차함수에는 지원하지 않기 때문에, reduce의 반복조건을 범위밖 값으로 설정하는 식으로 끊어 내는 수 밖에 없다. const array = ['9', '91', '95', '96', '99']; const x = array .slice(0) // array를 복사한다. slice(0)하면 그대로 복사된다. .reduce((acc, curr, i, arr) => { if (i === 2) arr.splice(1); // 인덱스 1 이후의 모든 요소를 삭제한다. 따라서 더이상 순회할 요소가 없어서 break되는 원리이다 // 다만 기존 배열이 삭제될수 ..
🚀 async 함수 병렬 처리하여 최적화 하기
async 함수 병렬 처리 최적화 되지 않는 코드 getApple()과 getBanana() 라는 비동기 함수가 있고, 각 함수들은 1초를 기다리고 실행된다. 다음 코드는 await을 두번을 써서 2초를 기다리게 된다. 만일, getApple()과 getBanana() 비동기 함수가 서로 연관이 없다고 가정을 할때, 시간 낭비인 셈이다. function delay(){ return new Promise( (resolve, reject) => { setTimeout(() => resolve(), 1000); }) } async function getApple(){ await delay(); return "apple"; } async function getBanana(){ await delay(); retu..
🚀 자바스크립트 객체 끼리 값 비교하는 방법
객체 끼리 값 비교하기 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값이 같으면 그 값을 리턴한다.
