👉🏻image를 Blob 객체 url로 바꾸어 img 띄우기 오늘은 Blob 객체를 local window에서만 사용하는 url로 바꾸어 html의 img 태그의 src 속성에 사용해보는 시간을 가져보겠습니다! 👉🏻createObjectURL Blob 객체를 url로 만들때는 URL.createObjectURL() 이 메소드를 사용합니다. URL.createObjectURL() 메소드는 주어진 객체를 가리키는 URL을 DOMString으로 변환하는 기능을 합니다. 해당 URL은 자신을 생성한 창의 document가 사라지면 함께 사라집니다. 👉🏻revokeObjectURL createObjectURL를 통해 만들어진 url는 해당 브라우저가 존재한 상태에서 revokeObjectURL 메소드로 url을 ..

JavaScript - 배열의 하위 배열 까지 합치는 방법 flatMap() flatMap는 배열 내부의 하위 배열을 쉽게 합칠 수 있는 유용한 메서드입니다. 이것은 API연결시 데이터가 2중배열, 3중배열으로 값들이 들어올때 유용하게 가공할수 있는 메소드 입니다. 👉🏻예시1) const alphabets = ['a', 'b', 'c']; const fruits = ['apple', 'banana', 'cherry']; const flatMappedWord = alphabets.flatMap((alphabet, index) => [alphabet, fruits[index]]); console.log(flatMappedWord) // [ 'a', 'apple', 'b', 'banana', 'c', 'che..

👉이미지 슬리이드 JS(fade) 안녕하세요 TriplexLab 입니다 :) 오늘은 이미지 슬리이드 JS(fade)대해서 살펴보도록 하겠습니다. 이미지 페이드 효과 #banner {position: relative; width: 1200px; margin: 0 auto; text-align: center; overflow: hidden; height: 360px; } #banner img {width: 100%; display: block;} #banner h2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10; background: rgba(255,255,255,0.5); border-radiu..

Promise Chaining 프로미스 체인 쓰는 이유(Promise 동작원리) 안녕하세요 TriplexLab 입니다. 오늘은 Promise Chaining을 왜 사용하는지 주제로 이야기를 해보도록 하겠습니다. 🎯 then 메소드 뒤에는 계속해서 then 메소드를 연달아 붙일수 있는 사황 아래코드를 자세히 보면 console.log('Start!'); fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .then((result) => { const users = JSON.parse(result); return users[0]; }) .then((user) => { console.log(user); ..

⏰ 사용자 시간 지정(예약 기능) 안녕하세요 TriplexLab 입니다. 오늘은 사용자 시간 지정 기능에 관해서 살펴보도록 하겠습니다 :) 이게 무슨 기능인지 감이 안오시는 분들을 위해서 캡처 사진 공유합니다. 위와 같이 사용자가 직접 원하는 시간을 설정할수 있는 기능 입니다. 위에 캡처본은 비록 라이트모드, 다크모드를 변경하는 것만 할수 있지만 코딩을 다루는 저희로써는 이것을 활용해서 할수 있는 것이 많습니다 :) ✨ 사용자 시간 지정(예약 기능) 활용 예시 적절한 예시는 아니지만 비슷한 응용 예시는 다른 링크를 참고해주세요 👇👇 jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 안녕하세요 TriplexLab입니다 :) 오늘은 jquery 레..

👨‍💻 스크롤 방향 감지하기(마우스 스크롤 위아래) 안녕하세요 TriplexLab입니다 :) 오늘은 javascript 스크롤 방향 감지하기에 관해서 간단하게 정리하겠습니다. ✍️ 스크롤 방향 감지하기 코드 * { margin: 0; padding: 0; box-sizing: border-box; } .clearfix::after { content: ''; clear: both; display: block;} .navInner {width: 100%; position: fixed; top: 0; background-color: #fff; padding: 20px; box-sizing: border-box; transition: top 0.4s ease-in-out;} .logo {float: left;}..

🎯 퍼포먼스 사이드 메뉴 html+scss 안녕하세요 TriplexLab 입니다 :) 오늘은 퍼포먼스 사이드 메뉴에 관해서 살펴보도록 하겠습니다. TRIPLEXLAB Spealers Headphones Televisions Accessories TRIPLEXLAB/CONTENTS /* css reacet */ body, h1, h2, h3, ul, li { margin: 0; padding: 0; } li { list-style-type: none; } a { color: inherit; text-decoration: none; } img { vertical-align: top; } /* css layerout */ .l__wrapper { max-width: 1200px; margin: 0 auto; ..

안녕하세요 TriplexLab 입니다. :) 오늘은 메소드 체이닝에 관한 예제를 살펴보도록 하겠습니다. 메소드 체이닝은 jQuery를 사용하시는 분이라면 다 아실거에요. 메소드를 연속적으로 이어서 사용할수 있다는 사실요 저는 javascript에서 사용자가 정의한 메소드를 체이닝 기법으로 사용하는 방법에 대해서 정리해봤습니다. var account = { id : "", //this.id은 즉 this == account 같은 말 그 밑에 id 곳에 값을 저장 4) password : "", //this.password은 즉 this == account 같은 말 그 밑에 password 곳에 값을 저장 7) setId : function(myId){ //인자로(myId) 념겨 받은 값 2) this.id..

JavaScript 타이밍 제어하기 안녕하세요 TriplexLab 입니다. JavaScript 타이밍 제어하는 메서드에 관해서 살펴보겠습니다. 🎯 JavaScript 타이밍 종류 속성 설명 setTimeout 설정 해놓은 Time 이 지나고 난후에 실행한다. clearTimeout clearTimeout는 setTimeout을 취소 시킬수 있다. setInterval 설정 해놓은 Time 동안 계속 반복한다. clearInterval clearTimeout는 setInterval을 취소 시킬수 있다. requestAnimationFrame requestAnimationFrame는 setInterval를 보안한 것이다. cancelAnimationFrame cancelAnimationFrame는 reque..