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

👉🏻유튜브 영상 렌덤으로 보이기 안녕하세요 트리플랩(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 {..

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

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

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