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

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

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

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

안녕하세요 트리플랩(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 간단한 소개 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..

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

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

안녕하세요 트리플랩 입니다. 오늘은 별 모양 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..

안녕하세요 tripexlab(트리플랩)입니다. 오늘은 Nextjs App Router환경에서 사용자 device-check를 체크헤서 useContext로 컴포넌트 전역으로 사용하는 방법에대해서 이야기를 해보겠습니다. Nextjs App Router 참고: App Router 는 v13.4 버전부터 안정화가 되었습니다. // src/context/DeviceType.tsx 'use client'; import React, { createContext, useState, useEffect, useContext, ReactNode } from 'react'; // DeviceType를 생성합니다. const DeviceTypeContext = createContext(undefined); // DeviceT..