본문 바로가기

전체 글153

[Next.js] App Router에서 Client Component하위에 Server Component렌더링하기 일반적으로 Client Component에서 Server Component를 직접 호출할 수 없습니다. 그림으로 나타내면 아래와 같은 구조가 될 겁니다.  코드로 나타내면 아래와 같은 형태이구요. "use client";import { useEffect } from "react";import ServerComponent from "./server-component";export default function ClientComponent() { useEffect(() => { console.log("Client Component mounted"); }, []); return ( Client Component );} 서버 컴포넌트의 코드는 아래와 같습니다. c.. 2024. 10. 27.
Next.js 14 + tailwind에서 다크모드 설정하기 먼저 tailwind.config.js에서 darkMode 설정을 해줍니다. // tailwind.config.jsimport type { Config } from "tailwindcss";const config: Config = { darkMode: ["class"], content: [ "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { background: "var(--background)", foreground: .. 2024. 10. 3.
Next.js + jest 설정 시 react/swiper 해석이 안되는 이슈 Next.js에서 jest를 설정하던 도중 react-swiper 라이브러리 때문에 꾀나 애 먹었습니다. 먼저 swiper/css 를 해석하지 못하는 부분입니다. moduleNameMapper: { ...jestConfig.moduleNameMapper, "swiper/css": "identity-obj-proxy", }, css 모듈을 해석할 수 있도록 identity-obj-proxy 라이브러리를 사용해 주면 됩니다. 해당 문제가 해결되니, Cannot use import statement outside a module 에러가 발생합니다. 해당 부분에 대한 이슈를 검색해 보니 transformIgnorePatterns: ["node_modules/(?!(swiper|ssr-window|dom7)/)".. 2024. 4. 22.
[Next.js] Next/Image layout:fill과 sizes에 대해 import Head from "next/head"; import Image from "next/image"; const src = "https://i.namu.wiki/i/hJ1KU8XudUoCnAJaFnOGYDQSPOilQhEmve4Sv7usDD4mBCPf1bWEbEiN2y6HYaua2tZ9CfgV0ulrE4g4JOmOKGfrkfXxq028P3i_W-2cwK7jtlxeoHVGK7Dsu9wY1kDITXDsMGpxGj0QkpMlxWXfvw.webp"; export default function Home() { return ( ); } 위의 소스 코드와 같이 간단한 이미지를 next/image로 렌더링한다고 생각해 봅시다. 서버에 이미지 리소스를 요청할 때 w=384라는 쿼리 파라미터가 붙은 것을 확인할 .. 2024. 3. 18.

티스토리툴바