트리플랩 | TriplexLab

Effect를 이용한 데이터 페칭

안녕하세요 트리플랩입니다.오늘은 ReactJS를 사용하면서 네트워크 요청하면서 버그처럼 보였던 상황을 공유하고, 공식문서에서는 어떻게 해결하는지 살펴보겠습니다.공식문서에 있는 예시 입니다.아래 예시는 ReactJS만 사용하는 경우에 Effect를 이용한 데이터 페칭 하는 과정에서 비동기(네트워크) 요청에 버그가 생길수 있는데다음과 같이 해결할수 할수 있다라는 예시 입니다.문제(버그) 상황 See the Pen Untitled by TriplexLab (@TriplexLab) on CodePen.위에 select 박스를 연속으로 변경해서 데이터를 불러온다고 가정하면 이거 버그인데 라고 인지 할수 있을것 입니다.만약 프레임워크를 사용하고 있다면 프레임워크의 데이터 페칭 메커니즘을 이용하는 것이 Eff..

Tab Slider 기능

안녕하세요 트리플랩입니다.오늘은 평소에 자주 보시는 네이버 Tab Slider기능에 관해서 살펴보겠습니다.아래 GIF를 보시면 사용자가 탭을 클릭할때마다 메뉴들이 좌우로 슬라이드가 되는 것을 확인 할수 있습니다.이것을 리액트기반으로 만들어서 공유할려고 합니다.!!코드 공유import { useRef, useState } from 'react';import clsx from 'clsx';import { TabSliderPageStyled } from '@/styles/pageStyled/TabSliderPageStyled';const items = [ '쇼핑라이브', '징보기', '원뿔딜', '책방', '선물샵', '도착보장', '패션뷰티', '쇼핑', '홈', '뉴스', '스포츠', ..

마우스 오버 효과

안녕하세요 트리플랩입니다.오늘은 마우스 호버중에 재미 효과를 가지고 왔습니다!GSAP 사용GSAP는 자바스크립트 애니메이션 라이브러리 입니다.아래 코드에서 JS가 마우스 움직임의 감지하는 엔진입니다.참고하시면 될것 같습니다.👍👍 See the Pen 마우스 오버 효과 by TriplexLab (@TriplexLab) on CodePen.코드 공유위에 코드를 파일로 제공합니다. 필요하신분들은 다운받아가세요 👇👇👇

타입스크립트 live Countdown Timer

👉타입스크립트 live Countdown Timer기능 만들기 타입스크립트를 사용해서 live Countdown Timer기능을 만들어 보겠습니다.! 타입스크립트에서 DOM에 접근할때 짧은 '$'로 접근하기위해서 함수를 만들었습니다.(제이쿼리 처럼 사용) const $ = (select: string): Element[] => { return Array.from(document.querySelectorAll(select)); }; 👉전체코드 공유 여기서 주의깊에 봐야한것은 template라는 기본 템플릿 변수에서 {{__countdown__}}라는 특수문자?를 썼는데 이 부분에서 특정 템플릿을 넣을수가 있습니다. template = template.replace('{{__countdown__}}', ti..

Middleware & NextAuth.js(로그인 구현)(next - v14.1.0)

안녕하세요 트리플랩입니다. 👉 NextAuth.js? 개발자들이 복잡한 인증 로직을 구현하지 않고도 빠르고 안전하게 사용자 인증을 구현할 수 있도록 도와준다. 👉 src/app/api/auth/[...nextauth]/route.ts에 초기화 세팅 Options providers: 공급자에는 다음과 같은 기본 옵션 세트가 제공됩니다. pages: 사용자 정의 로그인, 로그아웃 및 오류 페이지를 생성하려는 경우 사용할 URL을 지정합니다. 지정된 페이지는 해당 내장 페이지를 재정의합니다. callbacks: 콜백은 작업이 수행될 때 발생하는 작업을 제어하는 데 사용할 수 있는 비동기 함수입니다. 콜백은 데이터베이스 없이 액세스 제어를 구현하고 외부 데이터베이스 또는 API와 통합할 수 있으므로 특히 JSO..

React Query 커스텀하기

안녕하세요 트리플랩입니다. 정말 오래간만에 글을 쓰는것 같네요~ 부지런히 작성해야 하는데ㅠ 회사일이 바쁘다 보니.. 이렇게 설명절 연휴에 작성하게 되네요ㅎㅎ 이번 포스트는 React Query 커스텀에 대해서 이야기를 해볼까 합니다. 참고로 우리팀은 react-query: v5를 사용합니다. useCustomQuery를 만들어서 사용하는 이유를 간단히 설명하면 shopby라는 이커머스 쇼핑몰 오픈 API를 사용합니다.(헤드레스 기반) 이곳 API를 사용해 보신 분들은 아시겠지만 Parameters로 정말 많은 옵션값들을 서버에 보낼수가 있습니다. 그런데 이것을 useQuery로 서버에 요청을 하다보면 다음과 같이 Parameters의 길이가 보기 힘들게 길어질것 입니다. const { data: mult..

Framer Slider part

안녕하세요 트리플랩(TriplexLab) 입니다. [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map 사실 React에서 key가 변경 하면 위와 같은 코드로 순회하는 로직은 필요가 없어 집니다. 👉 수정 전 코드 {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => i === visible ? ( {i} ) : null )} 여기서 주의 깊게 봐야할것은 React js는 key를 바꾸면 component를 re-render를 해준다 입니다! 새로운 component가 생겼다고 생각하는 것 입니다. 그래서 React js는 이전 것을 없에버리고 새 것을 보여주는것이죠! 👉 수정 후 코드 {visible} 👉 전체 코드 공유 import styled from "styl..

Framer motion Variants

Framer 간단한 소개 Framer는 팀이 제품 경험의 모든 부분을 디자인하는 데 도움이 되는 올인원 도구입니다. 프론트개발자 관점에서 Framer의 motion API는 정말 짱입니다.! 👍👍 너무 쉽게 모션, 애니메이션을 컨트롤할수 있습니다. 그리고 무엇 보다 React.JS 기반입니다.!! Documentation | Framer for Developers An open source, production-ready motion library for React on the web. www.framer.com Variants 예제코드 Variants은 컴포넌트가 가질 수 있는 미리 정의된 시각적 state입니다. const variants = { visible: { opacity: 1 }, hidde..

JavaScript Functional Programming

안녕하세요 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 이렇게 ..

Free Tech Store Template for Figma

Free Tech Store Template for Figma 라이선스 FREE(프리): 개인 및 상업적으로 사용 가능 👉🏻다운로드 E-Commerce UI Kit | Figma Community ⚙️ Components Based 🎨 Color Styles -- Autolayouts 📱 Responsive Elevate your e-commerce design projects to new heights with our meticulously crafted Figma E-Commerce UI Kit. This comprehensive kit is a must-have for designers and developers look www.figma.com

React 컴포넌트 - Tabs

안녕하세요 트리플랩(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({..

네트워크 통신 및 캐싱 구현

✨네트워크 통신 및 캐싱 구현 안녕하세요 TriplexLab 입니다. 오늘은 최근에 과제를 진행하면서 경험했던 거를 말씀드리고자 합니다. 👉🏻네트워크 통신 먼저 네트워크 통신은 하단에 영상 처럼 입력란에 특정 텍스트를 입력하는 시점에 네트워크(서버랑)통신하는것를 말합니다. 👉🏻문제인식 근데 여기서 문제가 있습니다. 매번 텍스트를 입력할때 마다 네트워크 통신을 하면 서버에 불필요한 요청을 여러번 하게 되는것이고, 서버입장에서는 부담되는 일을 하는것입니다. 👉🏻문제해결 캐싱처리를 해서 브라우저 메모리에 입시로 저장해놓고 같은 텍스트가 있다면 네트워크 통신을 하지 않는것이 목표였습니다. 처음에는 이것을 저는 localStorage에 저장할때 생각을 했지만 여기서는 new Map()을 사용했습니다. 하단 영상을..

React 무한 스크롤(Offset-based)

React 무한 스크롤(Offset-based) 안녕하세요 TriplexLab 입니다. 오늘은 Intersection Observer API를 활용해서 React 무한 스크롤(Offset-based)에 관해서 이야기를 하겠습니다. (다음 내용은 프론트 입장에서 무한 스크롤기능을 구현하는데 초점을 둔 내용입니다.) 코드를 보기 앞서 무한 스크롤에는 크게 2가지 방법이 있습니다. Offset-based, Cursor-based 입니다. 👉🏻 Offset-based 📌 장점 offset, limit 을 사용한 쿼리 이용 (MySQL 기준) 페이지 단위로 구분 직관적이고 구현도 간단합니다. 📌 단점 데이터 중복 문제(사용자가 동시에 컨텐츠를 생성 또는 삭제을 할경우에 중복) 성능 저하 문제 성능 저하 문제는 둘..

URLSearchParams 유틸리티 메서드에 관해서

안녕하세요 TriplexLab 입니다. 오늘은 URLSearchParams 유틸리티 메서드에 관해서 이야기를 해보도록 하겠습니다. URLSearchParams은 URL의 쿼리 문자열 받아서 처리하는 고마운 메소드 입니다. 바로 사용예시 확인해 봅시다. 😃😃 예시코드)👇🏻 // api/request.js const apiFetchHandler = async (url) => { try { const response = await fetch(url); if (!response.ok) { throw new Error('데이터를 불러오는데 실패했습니다.'); } const body = await response.json(); console.log(body); return body; } catch (e) { con..

Free Financial Website Design Template

Free Financial Website Design Template 라이선스 FREE(프리): 개인 및 상업적으로 사용 가능 👉🏻다운로드 Banking Company Website UI Template Design in Dark Theme ( FREE Editable ) | Figma Community YourBank - Bank Website Template YourBank is your ultimate bank website template, designed to provide a secure, informative, and user-friendly online experience for your customers. It's the key to elevating your bank's online p..

React 컴포넌트 - Star

안녕하세요 트리플랩 입니다. 오늘은 별 모양 React component를 만들어서 공유해 보겠습니다. 보통 서비스를 만들다 보면 리뷰 컴포넌트 같은 곳에서 별점등 많이 구현하시잖아요? 해당 컴포넌트를 공유합니다. // useStarRating.tsx import React, { useState } from "react"; import star_active from "../assets/images/star_active.svg"; import star_default from "../assets/images/star_default.svg"; export interface StarRatingProps { totalStars: number; activeStars: number; size?: number; } c..

무한스크롤 (Infinity Scroll) UI 구현하기

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

lazy load blur effect

👉🏻lazy load blur effec See the Pen lazy load blur effect by Jasmin Mehmedovic (@To_rn4D0) on CodePen. blur효과를 주어서 흐릿하게 보이다가 점점 선명해지게 보이는 효과🎉🎉 이것을 활용해서 Image Lazy라는 웹 성능 최적화 기술로도 같이 쓰일수 있습니다.

유튜브 영상 렌덤으로 보이기

👉🏻유튜브 영상 렌덤으로 보이기 안녕하세요 트리플랩(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 {..

Roxo: Free HTML Template for Design Agencies

Roxo: Free HTML Template for Design Agencies 라이선스 FREE(프리): 개인 및 상업적으로 사용 가능 👉🏻다운로드 Roxo - Agency Template for Startups Roxo makes it easier to get a perfect technology website off the ground for your agency. staticmania.com

TriplexLab SKIN

TriplexLab Git Repository

Front Developer Blog

일반 HTML 파일에 include/imports 하는 방법

Middleware & NextAuth.js(로그인 구현)(next - v14.1.0)

Next.js의 CORS 문제 해결

Latest Story

Free・Resources

웹 코딩 입문 이야기

ECMAScript 2015+

Web・API

ETC

티스토리툴바