genesis

model transformprivate setupModels() { const geoBox = new THREE.BoxGeometry(1) const material = new THREE.MeshStandardMaterial() const box = new THREE.Mesh(geoBox, material) const matrixS = new THREE.Matrix4().makeScale(.5, .5, .5) const matrixR = new THREE.Matrix4().makeRotationX(THREE.MathUtils.degToRad(45)) const matrixT = new THREE.Matrix4().makeTranslation(0, 2, 0) box...

1. 이게 가장 중요하다설정 > 시스템 > 가능한 경우 그래픽 가속 사용 체크부터 하자 2. 설정https://r3f.docs.pmnd.rs/getting-started/introductionnpm install three @types/three @react-three/fibernpm을 설치하면 된다.next.config.mjs에 들어가서 /** @type {import('next').NextConfig} */const nextConfig = { transpilePackages: ["three"],};export default nextConfig; 다음과 같이 추가하면 된다. 3. 예시 https://r3f.docs.pmnd.rs/getting-started/examples 여기 접속 후 glb 파일을..

js 없이 작동하는 방법으로 @keyframes scale-in-center { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(1); opacity: 1; }}.scale-in-center { -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation-timeline: view(); animation-range: entry 0% cover 40%;} ..

{ "GH": "가나", "GA": "가봉", "GY": "가이아나", "GM": "감비아", "GG": "건지섬", "GP": "과달루페", "GT": "과테말라", "GU": "괌", "VA": "교황청", "GD": "그레나다", "GE": "그루지야", "GR": "그리스", "GL": "그린랜드", "GW": "기네비소", "GN": "기니", "ZY": "기타주소", "NA": "나미비아", "NR": "나우루 공화국", "NG": "나이지리아", "SS": "남수단", "ZA": "남아프리카공화국", "NL": "네덜란드", "NP": "네팔", "NO": "노르웨이", "NF": "노퍽제도", "NC": "뉴 켈레도니아", "NZ": "뉴질랜드", "NU": "니우에", "NE": "니제르..

접속 수를 체크하기 위해 간단한 로그 저장을 남기기로 했다. 그러기 위해 ip를 가져와오고 저장하는 것으로import { headers } from 'next/headers'const header = headers()const ip = (header.get('x-forwarded-for') ?? '127.0.0.1').split(',')[0]이런 방법으로 ip를 가져와서 log에 남겨주니 성공적으로 저장 되었다.

nextjs로 프로젝트를 하면서 몇가지 팁을 정리하려합니다. 물론 미래의 제가 보기위해서.. 1.shadcnhttps://ui.shadcn.com/docs/installation/next Next.jsInstall and configure Next.js.ui.shadcn.comshadcn 설치nextjs는 tailwind를 권장하는 프레임워크이면서 동시에 shadcn이라는 component를 제공한다. 이걸 베이스로 디자인 시스템을 꾸리면 보다 쉽게 프로젝트를 시작할 수 있다.  2. next-authoauth는 역시 이걸 쓰는게 가장 빠르다. /app/api/auth/[...nextauth]/route.tsimport NextAuth from 'next-auth';import KakaoProvider ..

'use client';import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious,} from "@/components/ui/pagination"import { useCreateQueryString } from "@/hooks/use-create-query-string";import Link from "next/link"import { usePathname, useRouter, useSearchParams } from 'next/navigation'import { useCallback } from "react";export d..

편리한 기능을 하나 찾아 저장한다. https://www.npmjs.com/package/json-server json-server [](https://github.com/typicode/json-server/actions/workflows/node.js.yml). Latest version: 0.17.4, last published: 3 months ago. Start using json-server in your p www.npmjs.com json server를 간단하게 만들어주는 것으 db.json이라는 파일을 만든 후 { "pos..

git rm -r --cached . 종종 .gitignore를 늦게 적용할때가 있다. 그럴때 이걸 쓰면 적용된다.

빨간줄이 계속 지속된다면 이미지처럼