어이 당신. 혹시 nextjs에서 styled-component를 사용하기 위해 죄다 use client를 박고 있지 않은가?용기를 가지고 tailwindcss로 마이그레이션을 진행하다 reset css가 둘이 달라서 레이아웃이 다 뭉개지지 않는가?바로 그게 접니다. tailwind의 base layer에서 초기화 해주지만 reset css와 스타일이 조금씩 다르다때문에 base를 재적용하고 덮어씌웠다/* global.css */@tailwind base;@tailwind components;@tailwind utilities;@layer base { /* Reset styles */ html, body, div, span, applet, object, iframe, h1, h2, h..

https://panda-css.com/docs/overview/getting-startedSSR환경에서 css-in-js를 쓰면 안되는 이유출처: https://pozafly.github.io/css/explore-how-to-apply-modern-css/https://hj-devlog.vercel.app/blog/서버컴포넌트에서의 CSShttps://www.joshwcomeau.com/react/css-in-rsc/next localfont 제대로 지원안합니다.tailwindcss, cssmodule 쓰세요 허참next/localfont 제대로 지원 안함 레퍼런스도 없음2주일 전에 스택오버플로우 이슈로 고치고있다고 써있고 그냥 눈물줄줄https://stackoverflow.com/questions/..

자바스크립트 딥다이브 책을 읽다가 흥미로운 점을 찾아 정리한다. 일단 C에서 얕은 복사는 그냥 포인터(메모리 주소)를 넘겨주는 것이다.때문에 js에서도 얕은 복사란 아래를 의미하는 줄 알았다.let original = { a: 1, b: { c: 2 } };let shallowCopy = original;shallowCopy.a = 3;console.log(original.a); // 3 하지만 책에서 얕은 복사란 아래를 의미한다.let original = { a: 1, b: { c: 2 } };let shallowCopy = { ...original };shallowCopy.a = 3;shallowCopy.b.c = 4;console.log(original); // { a: 1, b: { c: 4 }..

streaming SSRdynamic rendering으로 빌드된 페이지에서 10초 걸리는 api를 서버에서 호출하면 사용자의 첫 로드가 그만큼 느려진다. 이를 해결하기 위해 nextjs13 이상부터는 async component, suspense를 사용해 쉽게 streaming SSR을 적용할 수 있다.import { Suspense } from 'react';import SlowComponent from './SlowComponent';export default function Home() { return ( Welcome to my page Loading slow component...}> );}// app/SlowComponent.jsa..

프론트엔드에서 신규 기능을 개발하다 보면 목업 데이터를 만들어 사용하곤 했다. 근데 react-query같이 서버상태관리 라이브러리를 붙이는 상황에선 목업 데이터를 사용하기 좀 번거롭다.이전 mejai 프로젝트에선 친절한 백엔드팀원이 목업 api를 만들어 주어 아주 편하게 사용했지만, 이는 팀원이 일을 두번 하게 되는 방법이었다. 이를 해결해 보자. next.js는 자체 서버에서 api를 관리할 수 있다. api를 만들고 해당 엔드포인트로 요청을 보내면 next.js서버에서 서버리스로 핸들러가 호출되어 작동한다.핸들러를 만드는 방법 또한 매우 간단하다.API 라우트 파일 생성: 프로젝트의 pages/api 폴더 안에 새 파일을 생성한다. 예를 들어, user.js라는 이름으로 파일을 만든다.목업 데이터 ..