🙋‍♂️ 자바스크립트 fetch, then, catch [Promise] 이해하기(Promise 동작원리) 안녕하세요 TriplexLab입니다. 오늘은 Promise관해서 살펴보도록 하겠습니다. ♻️ fetch함수의 동작 흐름 해석하기 fetch함수는 Promise객체를 리턴합니다. 나중에 Promise객체 상태가 -> fulfilled 상태가 되었을 때 then함수에다가 콜백을 등록할 수 있습니다. 그리고 실제로 Promise객체 상태가 -> fulfilled 상태가 되면 등록한 콜백이 실행이 되는 것이고, 그 작업 성공 결과가 콜백의 파라미터(response)로 넘어오는 것입니다. 🙋🏽‍♀️ Promise 객체는 왜 등장했을까? 사실 Promise 객체가 등장하기 전에도 비동기적인 처리를 할 수 있는..

[ScrollMagic] 스크롤매직 라이브러리 안녕하세요 TriplexLab 입니다. 오늘은 스크롤매직 라이브러리 관해서 간단한 인터렉션을 만들어 봤습니다. 바로 스크롤에 반응하는 애니메에션 동작 입니다. #start { height: 100vh; } .content { width: 170px; position: absolute; top: 50%; left: 10%; transform: translate(-50%, -50%); } .content img {width: 100%;} .info { height: 100vh; background-color:cornflowerblue; } .footer { height: 100vh; background-color:yellowgreen; } (function(){..

👋 반응형 웹의 미디어 쿼리 (Media Query) 와 Viewport 안녕하세요 TriplexLab 입니다. 오늘은 미디어 쿼리를 사용할때 max-width와 min-width의 차이점에 대해서 말씀드릴게요. /** 반응형 만들때 min-width기준으로 css 작성하는 기준을 설명합니다. min-width는 모바일의 해상도가 가장 우선으로 읽혀야 합니다. */ /** 모바일의 해상도 기준 */ @media screen and (min-width: 320px){ .bg1 { width: 100px; height: 100px; background-color: red; } } /** 테블릿 해상도 기준 */ @media screen and (min-width: 768px){ .bg1 { backgroun..

Chart.js 플러그인 소개[Plugins | Chart.js] 안녕하세요 TriplexLab입니다. 오늘은 Chart.js 라고 하는 플러그인을 사용해서 데이터 시각화에 대해서 살펴보도록 하겠습니다. 👇 공식 사이트입니다. 한번 들어가셔서 설명서 보면 좋을것 같습니다. Chart.js | Chart.js Chart.js (opens new window) Installation You can get the latest version of Chart.js from npm (opens new window), the GitHub releases (opens new window), or use a Chart.js CDN (opens new window). Detailed installation instruct..

이벤트 위임 (Event Delegation) 안녕하세요 TriplexLab입니다 :) 오늘은 이벤트 위임에 관해서 살펴보도록 하겠습니다. ✍️ 이벤트 위임 코드 다음 코드는 이벤트를 핸들러를 등록하고, 클래스를 토글 하는 코드입니다. 근데 아래 코드는 한 가지 문제가 있습니다. //이벤트 위임 (Event Delegation) (function() { const list = document.querySelector('#list'); for (let item of list.children) { item.addEventListener('click', function(e) { e.target.classList.toggle('done'); }); } })(); 다음과 같이 엘리먼트를 새로 추가하게 되면 이벤트..

UI/UX 디자인 아이디어 공유 ​Product Stock Screen by Netguru Mobile Design, UI / Visual Design, Product Design

Javascript의 prototype 정리 안녕하세요 TriplexLab입니다. 오늘은 Javascript의 prototype 관해서 살펴보도록 하겠습니다. 🎯 OOP 계념 Javascript가 2015부터 class문법이 추가되면서 class문법 관해서 많은 공부를 하다가, 계념이 어느 정도 잡폈을때즘 Javascript의 prototype라는 문법도 있다라는 사실을 뒤늦게 알게 되었습니다. (햔 3년전즘인가 Javascript는 prototype 기반의 언어다 라고 들은 기억이 있긴 하는데... 그땐 필요성은 못 느끼고, 이해하기 힘들어서 그냥 넘어간 것 같네요...) 그래서 최근에 class(객체)기반의 패러다임이 이해가 어느 정도 되니깐, 저절로 prototype 쪽도 이해가 되는 것 같습니다...

Javascript Typing Animation 안녕하세요 TriplexLab 입니다. Typing Animation 오늘은 Javascript Typing Animation에 관해서 살펴보도록 하겠습니다. 프론트개발자분들이 응근히 자주 사용하는 Typing Animation 코드를 소개합니다. Typing Animation 코드 @keyframes cursor { to { border-color: transparent; } } .txt { display: table-cell; vertical-align: middle; border-right: 0.05em solid #F81857; animation: cursor 0.5s ease infinite; } const content = 'javascript..

이벤트 기획전 페이지 안녕하세요 TriplexLab 입니다. 오늘은 이벤트 기획전 페에지에 관해서 살펴보도록 하겠습니다. 참고로 이번에 다룰 내용에는 예전에 올려놓은 이야기들과 조금 종복된 내용이 있습니다. 자세한 내용은 아래 링크를 확인 해주시면 됩니다. 스크롤 방향 감지하기 안녕하세요 TriplexLab입니다 :) 오늘은 javascript 스크롤 방향 감지하기에 관해서 간단하게 정리하겠습니다. * { margin: 0; padding: 0; box-sizing: border-box; } .clearfix::after { content: ''; clear: bo.. triplexlab.tistory.com jquery 이벤트 연결하기(event binding) 안녕하세요 TriplexLab 입니다 :..

유튜브(Youtube) 영상 비율에 마쳐 반응형으로 만들기 안녕하세요 TriplexLab 입니다. 오늘은 유튜브(Youtube) 영상 컨텐츠를 16:9비율에 마쳐 반응형으로 만드는 방법에 대해서 살려보도록 하겠습니다. 먼저 유튜브로 가셔서 퍼오고 싶은 영상를 퍼옵니다. 그리고 하단 처럼 수정합니다. ✍️ 유튜브 영상 비율 코드 padding-bottom 계산식은 height / width * 100 입니다. /* 비디오 컨텐츠를 16:9비율에 마쳐 반응형으로 만들기 */ .video {position: relative; margin: 0 auto; max-width: 900px; width: 100%;} .video > div{ width: 100%; padding-bottom: 56.25%;} /* p..

Javascript 말줄임 처리하기 안녕하세요 TriplexLab 입니다 :) 오늘은 간단하게 javascript로 말줄임 처리하는 방법에 대해서 살펴보겠습니다. ✍️ Javascript 말줄임 처리 코드 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta reprehenderit consequatur Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta reprehenderit consequatur Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta reprehenderit consequatur Lorem ipsum d..

jQuery rateYo 별점 안녕하세요 TriplexLab입니다 :) 오늘은 별점 매기는 플러그인 jQuery rateYo에 대해서 간단하게 소개하겠습니다. rateYo 별점 설명 rateYo은 이것 jQuery 기반의 플러그인입니다. jQuery가 먼저 로딩한 후에 rateYo가 로딩되어야 합니다. RateYo!, A jQuery Star Rating Plugin Hacks - The Radioactive Options You need to be extra careful with these options. If not used properly, the plugin may not function as expected starSvg: String, default: Star SVG This option c..