ETC
유닉스 커맨드 라인과 그 밖에 유용한 TIP들을 공유합니다.
-
👉타입스크립트 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) 입니다. 이번 포스터에서는 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 -
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 -
안녕하세요 트리플랩 입니다. 오늘은 별 모양 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..
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..
2023.12.10 -
안녕하세요 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..
Nextjs device-check useContext안녕하세요 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..
2023.11.05 -
Next.js CORS 문제 해결 Next.js 공식문서에서 CORS 문제 해결 방법을 살펴보면 다음과 같습니다. next.config.js설정파일에서 rewrites메소드를 사용하라고 예시가 있습니다. //next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, async rewrites() { return [ { source: '/api/:path*', destination: `API주소/:path*`, }, ]; }, }; module.exports = nextConfig; 실무에서 썼던 코드 공유 그럼 위에 예시 코드를 참고로 해서 바로 실무에서 썼던 코드 공유해 드립니다. 참..
Next.js의 CORS 문제 해결Next.js CORS 문제 해결 Next.js 공식문서에서 CORS 문제 해결 방법을 살펴보면 다음과 같습니다. next.config.js설정파일에서 rewrites메소드를 사용하라고 예시가 있습니다. //next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, async rewrites() { return [ { source: '/api/:path*', destination: `API주소/:path*`, }, ]; }, }; module.exports = nextConfig; 실무에서 썼던 코드 공유 그럼 위에 예시 코드를 참고로 해서 바로 실무에서 썼던 코드 공유해 드립니다. 참..
2023.11.03 -
👉🏻Next 13.5v 에서 GlobalStyle 및 theme style 적용하기 안녕하세요 트리플랩입니다 :) 오늘은 NextJS 13에서 GlobalStyle 및 theme style 적용하는 방법에 대해서 이야기를 해보겠습니다. 일단 공식문에서 styled-components.tsx을 설정하는 방법을 참고했습니다.(하단 링크 참고) // src/lib/styled-components.tsx 'use client' import React, { useState } from 'react' import { useServerInsertedHTML } from 'next/navigation' import { ServerStyleSheet, StyleSheetManager } from 'styled-compo..
NextJS 13.5v 에서 GlobalStyle 및 theme style 적용하기👉🏻Next 13.5v 에서 GlobalStyle 및 theme style 적용하기 안녕하세요 트리플랩입니다 :) 오늘은 NextJS 13에서 GlobalStyle 및 theme style 적용하는 방법에 대해서 이야기를 해보겠습니다. 일단 공식문에서 styled-components.tsx을 설정하는 방법을 참고했습니다.(하단 링크 참고) // src/lib/styled-components.tsx 'use client' import React, { useState } from 'react' import { useServerInsertedHTML } from 'next/navigation' import { ServerStyleSheet, StyleSheetManager } from 'styled-compo..
2023.10.18 -
안녕하세요 TripexLab 입니다. 오늘은 Next JS에서 Node의 API를 사용하는 방법에 대해서 살펴보겠습니다. NextJS는 React 기반(문법)의 프레임워크로 유명합니다. React기반의 함수형 컴포넌트를 사용해서 웹앱서비스를 만들수 있죠. 그리고 NextJS는 app 폴더 하위에 있는 모든 컴포넌트들은 기본적으로 서버컴포넌트 이므로(서버에서 동작함) 서버에 있는 파일을 읽고, 쓰고를 할수 있고 서버에 있는 경로도 접근이 가능합니다. 👉🏻NextJS 컴포넌트는 기본적으로 서버 사이드 렌더링(SSR) 합니다. 예를들어서 다음과 같이 비즈니스 로직을 보면 "path"와 "fs/promises"에 접근해서 가져올수가 있습니다. // src/service/posts.ts import { readF..
Next JS에서 Node.js API 사용안녕하세요 TripexLab 입니다. 오늘은 Next JS에서 Node의 API를 사용하는 방법에 대해서 살펴보겠습니다. NextJS는 React 기반(문법)의 프레임워크로 유명합니다. React기반의 함수형 컴포넌트를 사용해서 웹앱서비스를 만들수 있죠. 그리고 NextJS는 app 폴더 하위에 있는 모든 컴포넌트들은 기본적으로 서버컴포넌트 이므로(서버에서 동작함) 서버에 있는 파일을 읽고, 쓰고를 할수 있고 서버에 있는 경로도 접근이 가능합니다. 👉🏻NextJS 컴포넌트는 기본적으로 서버 사이드 렌더링(SSR) 합니다. 예를들어서 다음과 같이 비즈니스 로직을 보면 "path"와 "fs/promises"에 접근해서 가져올수가 있습니다. // src/service/posts.ts import { readF..
2023.09.29