폴리프레임

jsx 에서 중괄호는 변수나 JS 수식을 담는 것입니다. 그러나 그대로 {}를 표기 해야 할 때가 있습니다. 이때는 다음 처럼 사용합니다.const MyComponent = () => { return ( {"{"} This is a literal curly brace {"}"} );};즉, 또 다른 {" "}로 감싸는 것입니다.아래는 와 같은 의 경우는 HTML 에서 이미 많이 사용하고 있습니다.const MyComponent = () => { return ( <div>Hello, World!</div> );};

Next.js 2024. 6. 20. 10:12

변화 : app 밖의 root 폴더 안- components 폴더 생성 (빈 폴더)- lib 폴더 생성 ( utils.ts 안에 function cn() export 함)- components.json 파일- package.json 의 dependencies 에 5개 추가class-variance-authority,clsx,lucid-react,tailwind-merge,tailwindcss-animate참고 : shadcn/ui 설치 후PS D:\ai\ai-sdk> npx shadcn-ui@latest init                           √ Which style would you like to use? » Default                       ? Which color..

Next.js 2024. 6. 19. 08:50

defaultValue vs. value / Controlled vs. UncontrolledIf you're using state to manage the value of an input, you'd use the value attribute to make it a controlled component. This means React would manage the input's state.However, since you're not using state, you can use defaultValue. This means the native input will manage its own state. This is okay since you're saving the search query to the U..

Next.js 2024. 5. 13. 14:31

이 훅들은 Next.js 13 이후 버전에서 도입된 새로운 라우팅 기능을 활용하여 경로 이름과 검색 매개변수를 쉽게 조작할 수 있게 해줍니다."use client"import { useSearchParams, usePathname, useRouter } from 'next/navigation';// 여기서는 App Router 사용시이며, next/router 것 아님. 이것은 Pages Router 사용 할때export default function SearchParamsComponent() { const [searchParams, setSearchParams] = useSearchParams(); const pathname = usePathname(); const router = useRout..

Next.js 2024. 5. 13. 13:55

Next.js Tutorial에서 사용한 방법이 매우 이상적이여서, fonts 관리는 고민 없이 아래처럼 분리해 두는 것이 좋습니다..//app>ui>fonts.tsimport { Inter, Lusitana } from 'next/font/google'export const inter = Inter({ subsets: ['latin'] })export const lusitana = Lusitana({ weight: ['400','700'], subsets: ['latin'], })//+++++++// app>layout.tsximport '@/app/ui/global.css' // 별도 ui 폴더 관리도 괜찮을 듯import {inter} from '@/app/ui/fonts' {chil..

Next.js 2024. 5. 13. 04:55

컴포넌트가 default export 로 했는지, named export 로 했느지에 따라서 import 하는 방식은 달라집니다.file: ../screens/Wheel.jsimport React from 'react';import { View, Text } from 'react-native';const Wheel = () => { return ( Wheel Screen );};export default Wheel;위의 경우는 default export 의 경우입니다. 따라서 다음처럼 import 합니다.import Wheel from "../screens/Wheel";Default export된 모듈은 중괄호 {} 없이 import 해야 합니다. 만약 screens 폴더의 i..

Next.js 2024. 4. 28. 16:32

현재 버전은 Next.js 14.1.4 이며, 초기 설치시 디폴트 폴더구조와 설치과정입니다. npx create-next-app@latest PS D:\next14\template20240328> npx create-next-app@latest Need to install the following packages: create-next-app@14.1.4 Ok to proceed? (y) √ What is your project named? ... . √ Would you like to use TypeScript? ... /Yes √ Would you like to use ESLint? ... / Yes √ Would you like to use Tailwind CSS? ... / Yes √ Would ..

Next.js 2024. 3. 28. 21:01

Next.js에서 컴포넌트를 사용할 때 발생할 수 있는 레이아웃 시프트(Layout Shift) 문제는 이미지의 로딩 및 레이아웃 위치 조정과 관련이 있습니다. Next.js의 컴포넌트는 이미지가 로딩되는 동안 레이아웃 시프트 문제가 발생할 수 있습니다. 즉, 이미지가 로딩 중에 다른 콘텐츠를 밀어내거나 레이아웃을 변경 할 수 있습니다. 이는 사용자가 예상치 못한 레이아웃 변경을 경험하게 만들고, 이로 인해 혼란스러운 사용자 경험을 야기할 수 있습니다. 몇 가지 주의 사항을 고려하여 레이아웃 시프트를 방지할 수 있습니다 1. 이미지의 가로 및 세로 크기를 width 및 height 속성을 통해 명시적으로 지정하면, 이미지가 로딩되는 동안에도 레이아웃이 깨지지 않습니다. 2. layout="responsi..

Next.js 2023. 10. 31. 20:50