ALL
-
안녕하세요 트리플랩 입니다. 오늘은 별 모양 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 -
🏃♀️무한스크롤 (Infinity Scroll) UI 구현하기 안녕하세요 TriplexLab 입니다 :) 오늘은 무한스크롤 UI에 관해서 살펴 보도록 하겠습니다. 스크롤이 화면의 끝에 닿기전에 콘텐츠를 추가로 노출시켜 계속 스크롤하게 만드것이 무한스크롤 UI입니다. 보통은 ajax와 같은 서버통신 API를 사용해서 추가로 노출되는 콘텐츠를 로드하지만 본 예제에서는 특정 콘텐츠를 변수에 담고 있다가 데이터가 추가되는 시점에 노출시키는 방식으로 표현해볼 생각입니다. 모바일에서만 국한된 내용으로 오해할 수 있지만 점점 PC웹과 모바일웹의 경계가 모호해지고 있어 PC웹에서도 유용하게 사용 가능합니다. ✨ createDocumentFragment() 메소드 template를 만들어서 뿌리는 과장에서 create..
무한스크롤 (Infinity Scroll) UI 구현하기🏃♀️무한스크롤 (Infinity Scroll) UI 구현하기 안녕하세요 TriplexLab 입니다 :) 오늘은 무한스크롤 UI에 관해서 살펴 보도록 하겠습니다. 스크롤이 화면의 끝에 닿기전에 콘텐츠를 추가로 노출시켜 계속 스크롤하게 만드것이 무한스크롤 UI입니다. 보통은 ajax와 같은 서버통신 API를 사용해서 추가로 노출되는 콘텐츠를 로드하지만 본 예제에서는 특정 콘텐츠를 변수에 담고 있다가 데이터가 추가되는 시점에 노출시키는 방식으로 표현해볼 생각입니다. 모바일에서만 국한된 내용으로 오해할 수 있지만 점점 PC웹과 모바일웹의 경계가 모호해지고 있어 PC웹에서도 유용하게 사용 가능합니다. ✨ createDocumentFragment() 메소드 template를 만들어서 뿌리는 과장에서 create..
2023.12.10 -
👉🏻lazy load blur effec See the Pen lazy load blur effect by Jasmin Mehmedovic (@To_rn4D0) on CodePen. blur효과를 주어서 흐릿하게 보이다가 점점 선명해지게 보이는 효과🎉🎉 이것을 활용해서 Image Lazy라는 웹 성능 최적화 기술로도 같이 쓰일수 있습니다.
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라는 웹 성능 최적화 기술로도 같이 쓰일수 있습니다.
2023.12.02 -
👉🏻유튜브 영상 렌덤으로 보이기 안녕하세요 트리플랩(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 {..
유튜브 영상 렌덤으로 보이기👉🏻유튜브 영상 렌덤으로 보이기 안녕하세요 트리플랩(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 {..
2023.12.02 -
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
Roxo: Free HTML Template for Design AgenciesRoxo: 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
2023.12.02 -
Real Estate Landing Page Design 라이선스 FREE(프리): 개인 및 상업적으로 사용 가능 자세히보기 👉🏻다운로드 Real estate Landing page UI Kit | Figma Community Clean and very detailed Web UI kit. We created it for busy designers and Digital Design Agency. unique and amazing designed illustrations and components are included. We are using a 12-column Bootstrap grid with 1920px width. All symbols are organized and www.figma.com
Real Estate Landing Page DesignReal Estate Landing Page Design 라이선스 FREE(프리): 개인 및 상업적으로 사용 가능 자세히보기 👉🏻다운로드 Real estate Landing page UI Kit | Figma Community Clean and very detailed Web UI kit. We created it for busy designers and Digital Design Agency. unique and amazing designed illustrations and components are included. We are using a 12-column Bootstrap grid with 1920px width. All symbols are organized and www.figma.com
2023.11.24 -
Image Layer Animations with Clip-Path 라이선스 FREE(프리): 개인 및 상업적으로 사용 가능 자세히보기 👉🏻다운로드 GitHub - codrops/LayersAnimation: Some ideas for speedy page transition animations with layered images using clip-path. Some ideas for speedy page transition animations with layered images using clip-path. - GitHub - codrops/LayersAnimation: Some ideas for speedy page transition animations with layered images usin..
Image Layer Animations with Clip-PathImage Layer Animations with Clip-Path 라이선스 FREE(프리): 개인 및 상업적으로 사용 가능 자세히보기 👉🏻다운로드 GitHub - codrops/LayersAnimation: Some ideas for speedy page transition animations with layered images using clip-path. Some ideas for speedy page transition animations with layered images using clip-path. - GitHub - codrops/LayersAnimation: Some ideas for speedy page transition animations with layered images usin..
2023.11.06 -
안녕하세요 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 -
👉 단축 평가 (short-circuit evaluation) 논리 계산법 이번에는 논리 연산자를 조금 더 유용하게 사용하는 방법에 대해서 배워보겠습니다. 우리가 이전에 연산자를 배울때, 다음과 사항을 잘 숙지하셨을겁니다. true && true // true true && false // false true || false // true false || true // true 논리 연산자를 사용 할 때에는 무조건 우리가 true 혹은 false 값을 사용해야 되는 것은 아닙니다. 문자열이나 숫자, 객체를 사용 할 수도 있고, 해당 값이 Truthy 하냐 Falsy 하냐에 따라 결과가 달라집니다. const dog = { name: '멍멍이' }; var getName = function(animal) ..
03. 단축 평가 논리 계산법(논리 연산자)👉 단축 평가 (short-circuit evaluation) 논리 계산법 이번에는 논리 연산자를 조금 더 유용하게 사용하는 방법에 대해서 배워보겠습니다. 우리가 이전에 연산자를 배울때, 다음과 사항을 잘 숙지하셨을겁니다. true && true // true true && false // false true || false // true false || true // true 논리 연산자를 사용 할 때에는 무조건 우리가 true 혹은 false 값을 사용해야 되는 것은 아닙니다. 문자열이나 숫자, 객체를 사용 할 수도 있고, 해당 값이 Truthy 하냐 Falsy 하냐에 따라 결과가 달라집니다. const dog = { name: '멍멍이' }; var getName = function(animal) ..
2023.11.03 -
💅styled components 안녕하세요 triplexlab 입니다. 오늘은 styled components에 대해서 이야기를 해보도록 하겠습니다. 👉props로 style을 변경 class를 추가해서 style를 변경하고 싶은 상황이라고 가정하면 props로 전달해서 삼항연산자로 변경하면 될것 같다고 생각을 합니다. import styled from "styled-components"; const Sample = () => { return ( ) }; const ItemStyle = styled.div` padding: 16px; margin: 8px; background-color: ${(props) => props.completed ? "slateblue" : "aliceblue"}; `; ex..
styled components💅styled components 안녕하세요 triplexlab 입니다. 오늘은 styled components에 대해서 이야기를 해보도록 하겠습니다. 👉props로 style을 변경 class를 추가해서 style를 변경하고 싶은 상황이라고 가정하면 props로 전달해서 삼항연산자로 변경하면 될것 같다고 생각을 합니다. import styled from "styled-components"; const Sample = () => { return ( ) }; const ItemStyle = styled.div` padding: 16px; margin: 8px; background-color: ${(props) => props.completed ? "slateblue" : "aliceblue"}; `; ex..
2023.11.03 -
Ideas for Image Motion Trail Animations 👉🏻라이센스 FREE(프리): 개인 및 상업적으로 사용 가능 👉🏻다운로드 GitHub - codrops/MotionTrailAnimations: Some ideas for mouse/touch responsive image animations. Some ideas for mouse/touch responsive image animations. - GitHub - codrops/MotionTrailAnimations: Some ideas for mouse/touch responsive image animations. github.com
Ideas for Image Motion Trail AnimationsIdeas for Image Motion Trail Animations 👉🏻라이센스 FREE(프리): 개인 및 상업적으로 사용 가능 👉🏻다운로드 GitHub - codrops/MotionTrailAnimations: Some ideas for mouse/touch responsive image animations. Some ideas for mouse/touch responsive image animations. - GitHub - codrops/MotionTrailAnimations: Some ideas for mouse/touch responsive image animations. github.com
2023.11.03 -
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