안녕하세요 triplexlab(트리플랩)입니다. 오늘은 함수 합성의 기초 컨셉을 이해해 봅시다. 중첩된 고차 함수 예시 const title = "Learning Function Composition 1"; const starToArr = str => str.split(" "); const toLower = arr => arr.map(w => w.toLowerCase()); const joinWithDash = arr => arr.join("-"); const slug = joinWithDash(toLower(starToArr(title))) //중첩된 고차 함수 (가독성 문제, 유지보수 문제) console.log(slug); 결과) 👉 learning-function-composition-1 이렇게 ..

🏃‍♀️무한스크롤 (Infinity Scroll) UI 구현하기 안녕하세요 TriplexLab 입니다 :) 오늘은 무한스크롤 UI에 관해서 살펴 보도록 하겠습니다. 스크롤이 화면의 끝에 닿기전에 콘텐츠를 추가로 노출시켜 계속 스크롤하게 만드것이 무한스크롤 UI입니다. 보통은 ajax와 같은 서버통신 API를 사용해서 추가로 노출되는 콘텐츠를 로드하지만 본 예제에서는 특정 콘텐츠를 변수에 담고 있다가 데이터가 추가되는 시점에 노출시키는 방식으로 표현해볼 생각입니다. 모바일에서만 국한된 내용으로 오해할 수 있지만 점점 PC웹과 모바일웹의 경계가 모호해지고 있어 PC웹에서도 유용하게 사용 가능합니다. ✨ createDocumentFragment() 메소드 template를 만들어서 뿌리는 과장에서 create..

👉🏻유튜브 영상 렌덤으로 보이기 안녕하세요 트리플랩(TriplexLab) 입니다. 이번에는 흔하게 많이들 작업하시는 유튜브 영상을 렌덤으로 보이기 기능에 대해서 살펴보겠습니다. 👉🏻HTML 코드 유튜브 영상 렌덤으로 보이기 👉🏻CSS 코드 html,body {margin: 0; padding: 0;} .global.active::before { display: inline-block; content: ''; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); position: absolute; } .close-btn { width: 30px; position: absolute; right: 0px; top: -50px; } .center {..

👉 단축 평가 (short-circuit evaluation) 논리 계산법 이번에는 논리 연산자를 조금 더 유용하게 사용하는 방법에 대해서 배워보겠습니다. 우리가 이전에 연산자를 배울때, 다음과 사항을 잘 숙지하셨을겁니다. true && true // true true && false // false true || false // true false || true // true 논리 연산자를 사용 할 때에는 무조건 우리가 true 혹은 false 값을 사용해야 되는 것은 아닙니다. 문자열이나 숫자, 객체를 사용 할 수도 있고, 해당 값이 Truthy 하냐 Falsy 하냐에 따라 결과가 달라집니다. const dog = { name: '멍멍이' }; var getName = function(animal) ..

좌,우 버튼으로 Y축으로 슬라이드되면서 무한 반복(롤링)되는 방식입니다. html에서 아이템 모두 개수마다 노출되는것이 아니라, 비례해서 상대적으로 노출됩니다. See the Pen slider-loop by 소윤호 (@younhoso) on CodePen.

👉 Truthy and Falsy 이것은 자바스크립트 문법까지는 아니지만, 알아둬야 하는 개념입니다. Truthy: true 같은거... Falsy: false 같은거... 라고 이해를 하면 되는데요, 예를 들어서 다음과 같은 함수가 있다고 가정해봅시다. function print(person) { console.log(person.name); } const person = { name: 'John' }; print(person); 만약에 이러한 상황에서, 만약 print 함수가 다음과 같이 파라미터가 비어진 채로 실행됐다고 가정해봅시다. function print(person) { console.log(person.name); } const person = { name: 'John' }; print()..

안녕하세요 TriplexLab 입니다. 이번 시간부터 JavaScript에서 유용한 Tip정보를 예시와 함께 알려드리고자 합니다. 오늘은 삼항연산자에 대해서 먼저 이야기를 해보겠습니다. 👉🏻삼항연산자 첫번째로 배울 문법은, 삼항 연산자입니다. 이 문법은 ES6 문법은 아닙니다. 조건 ? true일때 : false일때 라인의 길이가 너무 길어진다면 다음과 같이 작성하기도 합니다. const array = []; let text = array.length === 0 ? '배열이 비어있습니다' : '배열이 비어있지 않습니다.'; console.log(text); 예시)👇🏻👇🏻 삭제 라인의 길이가 너무 길어진다면 다음과 같이 작성하기도 합니다. 버튼 클릭 엘리먼트에 토글 클래스를 핸들링한다. const $btn..

🎦 Video Gallery Easy Tutorials 안녕하세요 TriplexLab 입니다. 이번 시간에는 Video Gallery의 간단한 쉬운 예제를 가져왔습니다. 섬네일을 클릭하면 해당 영상이 활성화되어서 나오는것 입니다. How To Make A Video Gallery Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta maiores, accusamus eum voluptatem ipsam tempora Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta maiores, accusamus eum voluptatem ipsam tempora Lorem ipsum dolor..

👉🏻스크롤 메뉴(Scroll Menu) 구현해보기 안녕하세요 TriplexLab 입니다. 이번에는 흔하게 많이들 작업하시는 스크롤 메뉴에관해서 살펴보도록 하겠습니다. 👉🏻참고링크 먼저 내 글중에서 마우스 이벤트 위치 관한글이 있는데 이것 보시고 이이서 글 보시면 이해하는데 도움이 될것 같습니다. MouseEvent 위치프로퍼티 정리 🖱 Event 위치프로퍼티 정리 안녕하세요 TriplexLab 입니다. 마우스 이벤트(MouseEvent) 객체에는 마우스 포인터의 위치와 관련된 다양한 프로퍼티들이 있는데요. 주로 아래와 같은 프로퍼티들이 자주 triplexblog.kr // scrollMenu.js class ScrollMenu { constructor(el) { this.el = el; this.$$ =..

Drag & Drop Vanilla Javascript(JS 드래그 앤 드롭) 안녕하세요 TriplexLab 입니다. 🧑‍🎄🧑‍🎄 오늘은 다음과 같이 Vanilla Javascript로 Drag & Drop기능에 관해서 살펴보도록 하겠습니다. Drag & Drop Vanilla Javascript 👉HTML HTML CSS JavaScript React Vue Next JS 👉CSS body, div { margin: 0; } .container { background-color: #f3f5f7; padding: 2rem; border-collapse: collapse; } .container:nth-child(n+2){ margin-top: 1rem; } .draggable { height: 82px;..

🖱 Event 위치프로퍼티 정리 안녕하세요 TriplexLab 입니다. 마우스 이벤트(MouseEvent) 객체에는 마우스 포인터의 위치와 관련된 다양한 프로퍼티들이 있는데요. 주로 아래와 같은 프로퍼티들이 자주 사용됩니다. 프로퍼티 설명 clientX, clientY 마우스 포인터의 브라우저 표시 영역에서의 위치 pageX, pageY 마우스 커서의 문서 영역에서의 위치 offsetX, offsetY 마우스 포인터의 이벤트 발생한 요소에서의 위치 screenX, screenY 마우스 포인터의 모니터 화면 영역에서의 위치 1️⃣ clientX, clientY client 프로퍼티는 말 그대로 클라이언트 영역 내에서 마우스의 좌표 정보를 담고있는데요. 클라이언트 영역이란 이벤트가 발생한 순간에 브라우저가 ..

👨‍💻 [JavaScript] 배열을 유용하게 활용하는 10가지 방법 안녕하세요 TriplexLab 입니다. 이번 시간에는 객체 배열에서(key-value)에서 유용하게 활용하는 10가지 방법에 관해서 정리해보겠습니다. 이번 포스트는 다음 링크를 참고 했습니다. [Javascript] 15가지 유용한 map, reduce, filter 아래 글을 번역 및 요약한 글. dongmin-jang.medium.com 다음과 같은 데이터가 있다고 가정해봅시다. const datas = [ { id: 1, type: "ko", name: '비빔밥', price : '8,000' }, { id: 2, type: "ko", name: "삼계탕", price : "12,000" }, { id: 3, typ..