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 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

2023.12.03

안녕하세요 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.03

👉🏻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 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

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

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..

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

👉 단축 평가 (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) ..

💅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..

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

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; 실무에서 썼던 코드 공유 그럼 위에 예시 코드를 참고로 해서 바로 실무에서 썼던 코드 공유해 드립니다. 참..