ALL
-
👉타입스크립트 live Countdown Timer기능 만들기 타입스크립트를 사용해서 live Countdown Timer기능을 만들어 보겠습니다.! 타입스크립트에서 DOM에 접근할때 짧은 '$'로 접근하기위해서 함수를 만들었습니다.(제이쿼리 처럼 사용) const $ = (select: string): Element[] => { return Array.from(document.querySelectorAll(select)); }; 👉전체코드 공유 여기서 주의깊에 봐야한것은 template라는 기본 템플릿 변수에서 {{__countdown__}}라는 특수문자?를 썼는데 이 부분에서 특정 템플릿을 넣을수가 있습니다. template = template.replace('{{__countdown__}}', ti..
타입스크립트 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..
2024.03.09 -
안녕하세요 트리플랩입니다. 👉 NextAuth.js? 개발자들이 복잡한 인증 로직을 구현하지 않고도 빠르고 안전하게 사용자 인증을 구현할 수 있도록 도와준다. 👉 src/app/api/auth/[...nextauth]/route.ts에 초기화 세팅 Options providers: 공급자에는 다음과 같은 기본 옵션 세트가 제공됩니다. pages: 사용자 정의 로그인, 로그아웃 및 오류 페이지를 생성하려는 경우 사용할 URL을 지정합니다. 지정된 페이지는 해당 내장 페이지를 재정의합니다. callbacks: 콜백은 작업이 수행될 때 발생하는 작업을 제어하는 데 사용할 수 있는 비동기 함수입니다. 콜백은 데이터베이스 없이 액세스 제어를 구현하고 외부 데이터베이스 또는 API와 통합할 수 있으므로 특히 JSO..
Middleware & NextAuth.js(로그인 구현)(next - v14.1.0)안녕하세요 트리플랩입니다. 👉 NextAuth.js? 개발자들이 복잡한 인증 로직을 구현하지 않고도 빠르고 안전하게 사용자 인증을 구현할 수 있도록 도와준다. 👉 src/app/api/auth/[...nextauth]/route.ts에 초기화 세팅 Options providers: 공급자에는 다음과 같은 기본 옵션 세트가 제공됩니다. pages: 사용자 정의 로그인, 로그아웃 및 오류 페이지를 생성하려는 경우 사용할 URL을 지정합니다. 지정된 페이지는 해당 내장 페이지를 재정의합니다. callbacks: 콜백은 작업이 수행될 때 발생하는 작업을 제어하는 데 사용할 수 있는 비동기 함수입니다. 콜백은 데이터베이스 없이 액세스 제어를 구현하고 외부 데이터베이스 또는 API와 통합할 수 있으므로 특히 JSO..
2024.02.29 -
안녕하세요 트리플랩입니다. 정말 오래간만에 글을 쓰는것 같네요~ 부지런히 작성해야 하는데ㅠ 회사일이 바쁘다 보니.. 이렇게 설명절 연휴에 작성하게 되네요ㅎㅎ 이번 포스트는 React Query 커스텀에 대해서 이야기를 해볼까 합니다. 참고로 우리팀은 react-query: v5를 사용합니다. useCustomQuery를 만들어서 사용하는 이유를 간단히 설명하면 shopby라는 이커머스 쇼핑몰 오픈 API를 사용합니다.(헤드레스 기반) 이곳 API를 사용해 보신 분들은 아시겠지만 Parameters로 정말 많은 옵션값들을 서버에 보낼수가 있습니다. 그런데 이것을 useQuery로 서버에 요청을 하다보면 다음과 같이 Parameters의 길이가 보기 힘들게 길어질것 입니다. const { data: mult..
React Query 커스텀하기안녕하세요 트리플랩입니다. 정말 오래간만에 글을 쓰는것 같네요~ 부지런히 작성해야 하는데ㅠ 회사일이 바쁘다 보니.. 이렇게 설명절 연휴에 작성하게 되네요ㅎㅎ 이번 포스트는 React Query 커스텀에 대해서 이야기를 해볼까 합니다. 참고로 우리팀은 react-query: v5를 사용합니다. useCustomQuery를 만들어서 사용하는 이유를 간단히 설명하면 shopby라는 이커머스 쇼핑몰 오픈 API를 사용합니다.(헤드레스 기반) 이곳 API를 사용해 보신 분들은 아시겠지만 Parameters로 정말 많은 옵션값들을 서버에 보낼수가 있습니다. 그런데 이것을 useQuery로 서버에 요청을 하다보면 다음과 같이 Parameters의 길이가 보기 힘들게 길어질것 입니다. const { data: mult..
2024.02.09 -
안녕하세요 트리플랩(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 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..
2024.01.20 -
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..
Framer motion VariantsFramer 간단한 소개 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..
2024.01.20 -
안녕하세요 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 이렇게 ..
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 이렇게 ..
2024.01.13 -
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
Free Tech Store Template for FigmaFree 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
2024.01.13 -
안녕하세요 트리플랩(TriplexLab) 입니다. 이번 포스터에서는 React 컴포넌트 - Star글이어서 Tabs에 관해서 이야기를 해보겠습니다. Tabs라고 하면 FE(프론트 개발자)가 흔히 많이 작업하는 기능중에 하나 입니다. 보통은 이렇게 생겨습니다. 그럼 바로 React 컴포넌트 - Tabs에 코드를 공유하겠습니다. Tabs 코드 커스텀 훅으로 빼서 별도로 관리할 의도 입니다. // useTabs.tsx import { useState } from "react"; import { useNavigate } from "react-router-dom"; type TabProps = { queryKey: string; queryValue: string; }; export default function ..
React 컴포넌트 - Tabs안녕하세요 트리플랩(TriplexLab) 입니다. 이번 포스터에서는 React 컴포넌트 - Star글이어서 Tabs에 관해서 이야기를 해보겠습니다. Tabs라고 하면 FE(프론트 개발자)가 흔히 많이 작업하는 기능중에 하나 입니다. 보통은 이렇게 생겨습니다. 그럼 바로 React 컴포넌트 - Tabs에 코드를 공유하겠습니다. Tabs 코드 커스텀 훅으로 빼서 별도로 관리할 의도 입니다. // useTabs.tsx import { useState } from "react"; import { useNavigate } from "react-router-dom"; type TabProps = { queryKey: string; queryValue: string; }; export default function ..
2023.12.31 -
✨네트워크 통신 및 캐싱 구현 안녕하세요 TriplexLab 입니다. 오늘은 최근에 과제를 진행하면서 경험했던 거를 말씀드리고자 합니다. 👉🏻네트워크 통신 먼저 네트워크 통신은 하단에 영상 처럼 입력란에 특정 텍스트를 입력하는 시점에 네트워크(서버랑)통신하는것를 말합니다. 👉🏻문제인식 근데 여기서 문제가 있습니다. 매번 텍스트를 입력할때 마다 네트워크 통신을 하면 서버에 불필요한 요청을 여러번 하게 되는것이고, 서버입장에서는 부담되는 일을 하는것입니다. 👉🏻문제해결 캐싱처리를 해서 브라우저 메모리에 입시로 저장해놓고 같은 텍스트가 있다면 네트워크 통신을 하지 않는것이 목표였습니다. 처음에는 이것을 저는 localStorage에 저장할때 생각을 했지만 여기서는 new Map()을 사용했습니다. 하단 영상을..
네트워크 통신 및 캐싱 구현✨네트워크 통신 및 캐싱 구현 안녕하세요 TriplexLab 입니다. 오늘은 최근에 과제를 진행하면서 경험했던 거를 말씀드리고자 합니다. 👉🏻네트워크 통신 먼저 네트워크 통신은 하단에 영상 처럼 입력란에 특정 텍스트를 입력하는 시점에 네트워크(서버랑)통신하는것를 말합니다. 👉🏻문제인식 근데 여기서 문제가 있습니다. 매번 텍스트를 입력할때 마다 네트워크 통신을 하면 서버에 불필요한 요청을 여러번 하게 되는것이고, 서버입장에서는 부담되는 일을 하는것입니다. 👉🏻문제해결 캐싱처리를 해서 브라우저 메모리에 입시로 저장해놓고 같은 텍스트가 있다면 네트워크 통신을 하지 않는것이 목표였습니다. 처음에는 이것을 저는 localStorage에 저장할때 생각을 했지만 여기서는 new Map()을 사용했습니다. 하단 영상을..
2023.12.29 -
React 무한 스크롤(Offset-based) 안녕하세요 TriplexLab 입니다. 오늘은 Intersection Observer API를 활용해서 React 무한 스크롤(Offset-based)에 관해서 이야기를 하겠습니다. (다음 내용은 프론트 입장에서 무한 스크롤기능을 구현하는데 초점을 둔 내용입니다.) 코드를 보기 앞서 무한 스크롤에는 크게 2가지 방법이 있습니다. Offset-based, Cursor-based 입니다. 👉🏻 Offset-based 📌 장점 offset, limit 을 사용한 쿼리 이용 (MySQL 기준) 페이지 단위로 구분 직관적이고 구현도 간단합니다. 📌 단점 데이터 중복 문제(사용자가 동시에 컨텐츠를 생성 또는 삭제을 할경우에 중복) 성능 저하 문제 성능 저하 문제는 둘..
React 무한 스크롤(Offset-based)React 무한 스크롤(Offset-based) 안녕하세요 TriplexLab 입니다. 오늘은 Intersection Observer API를 활용해서 React 무한 스크롤(Offset-based)에 관해서 이야기를 하겠습니다. (다음 내용은 프론트 입장에서 무한 스크롤기능을 구현하는데 초점을 둔 내용입니다.) 코드를 보기 앞서 무한 스크롤에는 크게 2가지 방법이 있습니다. Offset-based, Cursor-based 입니다. 👉🏻 Offset-based 📌 장점 offset, limit 을 사용한 쿼리 이용 (MySQL 기준) 페이지 단위로 구분 직관적이고 구현도 간단합니다. 📌 단점 데이터 중복 문제(사용자가 동시에 컨텐츠를 생성 또는 삭제을 할경우에 중복) 성능 저하 문제 성능 저하 문제는 둘..
2023.12.29 -
안녕하세요 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..
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..
2023.12.24 -
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..
Free Financial Website Design TemplateFree 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..
2023.12.20