안녕하세요 트리플랩(TriplexLab) 입니다. 이번 포스터에서는 React 컴포넌트 - Star글이어서 Tabs에 관해서 이야기를 해보겠습니다.Tabs라고 하면 FE(프론트 개발자)가 흔히 많이 작업하는 기능중에 하나 입니다.보통은 이렇게 생겨습니다.그럼 바로 React 컴포넌트 - Tabs에 코드를 공유하겠습니다.Tabs 코드커스텀 훅으로 빼서 별도로 관리할 의도 입니다.// useTabs.tsximport { useState } from "react";import { useNavigate } from "react-router-dom";type TabProps = { queryKey: string; queryValue: string;};export default function useTabs({..

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

🎯무한 롤링 기능 안녕하세요 TriplexLab입니다. 오늘은 무한롤링 기능에 대해서 이야기를 해보겠습니다. 저 같은 경우에는 Swiper(v8.4.7)을 커스텀해서 기능을 완성할 수 있었습니다. 그리고 반응형으로 제작을 해야해서 마크업 상에서 PC, 모바일 둘 다 만들어 놓고 css 미디어쿼리를 사용해서 해상도가 PC일 때 PC버전 보여주고, 해상도가 모바일일 때 모바일 버전을 보여주는 방식을 택했습니다. 그렇다 보니 JS에서 Swiper인스턴스를 다음과 같이 두 번 호출했습니다. /** HISTORY 모바일 영역 */ new Swiper(".history-swiper.mo", { //... } /** HISTORY PC 영역 */ const historySwiperPc = new Swiper(".hi..

서비스 종료합니다.(2024 / 03 / 10) 그동안에 저의 스킨에 많은 관심과, 사랑을 보내주셔서 감사합니다. 사유: 정상적으로 스킨이 적용이 되어야 하는데 알 수 없는 이 유로 인해 스킨이 적용이 안 되는 이유와, 평소 티스토리 서버의 불안함(잔 버그) 등등의 이유로 인해 저의 스킨에서 문제가 있는가해서 많은 오해를 받았습니다. 이로 인해서 더 이상 유지보수하지 않기로 결정했습니다. 추후에는 다른 플렛폼에서 더 좋은 템플릿을 제작해서 공유하도록 하겠습니다. 😃😃 다시 한번 그동안에 저의 스킨에 많은 관심과, 사랑을 보내주셔서 감사합니다. TriplexLab SKIN(v1.2) TriplexLab 블로그는 2021.10.02(토)에 최초로 리뉴얼 작업이 진행되었고 현재 지금까지 운영해가고 있습니다. ..

👉이미지 슬리이드 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..

🖱자바스크립트 현재의 스크롤바 위치 가져오는 방법 안녕하세요 TriplexLab입니다. 오늘은 자바스크립트 현재의 스크롤바 위치 가져오는 방법에 관해서 살펴보도록 하겠습니다. 👉만들어볼 예제 잠깐 하단의 영상을 봐주세요 👉유튜브 영상[링크참고] 영상을 보시면 아시겠지만 브라우저 스크롤 위치에 맞게 파란 바가 같이 채워지는 모습을 확인할 수 있습니다. 이것은 생각보다 간단해요. 😃 😃 👉 소스코드 정리 (function() { const $ = (ele) => document.querySelector(ele) let maxScrollValue; const resizeHandler = () => { maxScrollValue = document.body.offsetHeight - window.innerHei..

popup 끝나는 날짜 설정하여 자동으로 내리기 안녕하세요 TriplexLab 입니다. 오늘은 popup을 끝나는 날짜 설정에 관해서 이야기를 해보도록 하겠습니다. 먼저 제가 지난 포스트 중에서 아래와 같은 내용으로 팝업을 컨트롤 하는것에 관해서 이야기를 했었습니다. 아래 링크를 참고 하세요:) jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 ⚙️ jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 안녕하세요 TriplexLab입니다 :) 오늘은 jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 에 관해서 살펴 보겠습니다.(자바스크립트 cookie) 레 triplexlab.tistory.com 이번 시간에는 popup을 등록하고, 오늘 하루 그만 보기 설정까지 했다면, 좀더 나아가서 끝나..

난수 생성하기 (랜덤 숫자, Random Number) 안녕하세요 TriplexLab입니다. 오늘은 이미의 숫자를(랜덤숫자 배열)을 받아 배열에 누적 시키는 방법에 관해서 살펴 보도록 하겠습니다. 아래 코드를 보면 myHistory, otherHistory 각 배열에 랜덤의 숫자들이 클릭 할때마다 누적되는 모습을 확인 할수 있습니다. 누적 여기서 중요한 사실을 이야기 한다면 위 코드는 새로운 배열들의 원소값들이 변하는것이지, 참조하는 주소값은 변하지 않고 그대로 입니다. 테스트 코드 👇 실제로 myHistory변수값을 prev변수에 넣고, myHistory.push()다음에 console.log(prev === myHistory)를 비교해보면 결과는 true가 나옵니다. (이것은 원소들이 같다고 true..

[React] Props 2차 배열 활용하기 안녕하세요 오늘은 2차 배열을 활용하기 관점에서 이야기를 해보도록 하겠습니다. 아래 예시는 React에서 Props 처리하는 예시입니다. App.js 파일에서 Dice라는 컴포넌트에서 Props속성들을 주고 있고, Dice.js 파일에서 그 Props속성들을 받아오고 있습니다. //App.js import Dice from "./Dice"; function App() { return ( ) } export default App; 👉 2차 배열 활용하기 근데 Dice.js파일에서 각각 이미지들을 import 해와서 객체와 배열을 활용해서 'DICE_IMAGES'라는 변수에 정리를 했습니다. 자 이렇게 정리를 해두면 Props를 활용해서 함수 내부에서도 src라는..

🚉 ngrok 사용법 안녕하세요 TriplexLab입니다. 오늘은 ngrok에 관해서 이야기해보도록 하겠습니다. 먼저 ngrok은 로컬에서 작업 중인 것을 안전한 터널을 통해 외부에 공유하려고 할 때 쓰면 유용한 도구입니다. 요즘 재택근무가 잦아지면서 현재 로컬에서 작업하던 것을 외부에 공유해줘야 하는 상황이 많이 있습니다. 이런 상황일 때 사용하면 정말 좋습니다. 👉 ngrok 설치 해당 사이트에 방문해서 회원가입 및 로그인을 해주세요. 아래 링크에 들어가서 보시면 운영 체제별로 zip으로 압축한 패키지를 제공하므로 다운로드하여서 압축을 해제하고 PATH에 걸린 폴더에 넣은 후에 사용하면 됩니다. ngrok - secure introspectable tunnels to localhost dashboar..

안녕하세요 TriplexLab입니다. 오늘은 로컬 스토리지(localStorage)를 이용해서 검색어 기능을 만들어보겠습니다. 로컬 스토리지(localStorage) 로컬 스토리지에 관한 자세한 설명은 제가 작성한 글을 참고해주세요. 👇👇 [JavaScript]로컬스토리지, 세션스토리지, 쿠키 정리 🙋‍♂️ 로컬 스토리지, 세션 스토리지, 쿠키 차이점 안녕하세요 TriplexLab 입니다. 오늘은 로컬 스토리지, 세션 스토리지, 쿠키 차이점에 관해서 하나씩 살펴보도록 하겠습니다. 🍪 Cookie 📌 쿠 triplexlab.tistory.com 이것은 CRUD 중에서 C와 D에 해당되는 내용입니다. 음 개인적으로 간단한 이런 검색 기능 같은 경우에는 로컬 스토리지를 이용해서 만들어도 괜찮을 것 같네요. 프..

✨ slider custom 안녕하세요 TriplexLab 입니다. 오늘은 제가 slider를 응용해서 만든 slider custom에 관해서 살펴보도록 하겠습니다 :) 저도 이 슬라이스 애니메이션은 웹써칭을 하다가 우연히 발견한 애니메이션 입니다. ✍️ slider custom 코드 TriplexLab Front Developer Blog * { margin: 0; padding: 0; list-style: none; } @keyframes slidein { 0% {left: 45%;opacity: 0;} 100% {left: 50%;opacity: 1;} } @keyframes slidein2 { 0% {right: 45%;opacity: 0;} 100% {right: 50%;opacity: 1;} ..