프로그래밍/NextJS

이 포스팅은 Next.js v13의 Docs 중 Rendering Fundamentals 관련 부분을 번역하여 정리한 내용을 담고 있습니다. [Next.js] Rendering Fundamentals Rendering은 작성한 코드를 UI(User Interface)로 변환합니다. React 18과 Next.js 13에는 애플리케이션을 렌더링하는 새로운 방법이 도입되었습니다. 이 페이지는 렌더링 환경, 전략, 런타임의 차이점과 이를 선택하는 방법을 이해하는 데 도움이 될 것입니다. Rendering Environments application 코드를 렌더링할 수 있는 환경에는 client와 server 두 가지가 있습니다. client는 application 코드에 대한 요청을 서버에 보내는 사용자 디바..

이슈 import Link from 'next/link'; // 버튼 컴포넌트 지금 바로 쿠폰 확인하기 아래와 같이 // → / 로 바뀌어서, 렌더링되어 링크 동작을 하지 않음. 원인 Next/Link 패키지를 까보자. // node_modules/next/dist/client/link.js: Link 컴포넌트 패키지 const { href , as } = _react.default.useMemo(()=>{ const [resolvedHref, resolvedAs] = (0, _router).resolveHref(router, hrefProp, true); return { href: resolvedHref, as: asProp ? (0, _router).resolveHref(router, asProp) ..

1. jest란? 💡 Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more! 출처: jest 공식 홈페이지 코드가 제대로 동작하는지 확인하는 Test case를 만드는 JS Testing Framework(페이스북이 개발)이다. 2. Setting up jest (with Rust Compiler) Next.js 12 버전부터 Next 내부에 Jest를 위한 설정이 built-in 되어 있다. 1. 패키지 설치 Jest를 셋업 하기 위해 jest, jest-environm..

[Emotion] CSS 속성 에러 해결 방법(with Next.js) 이슈 발생 아래와 같이 @emotion/react 모듈의 css 함수를 사용하면 type 에러가 발생한다. import styled from '@emotion/styled'; import { css } from '@emotion/react'; // ... Blog 더보기 에러내용 (ts.2322) Type '{ children: string; css: SerializedStyles; }' is not assignable to type 'DetailedHTMLProps'. Property 'css' does not exist on type 'DetailedHTMLProps'.ts(2322) 원인 @types/react/index.d.t..

[Emotion] emotion(with next v12) 세팅 방법 emotion 설치 yarn add @emotion/react @emotion/styled 참고: Emotion 공식 Doc SWC 컴파일러 설정 Next 12버전 부터는 Rust 컴파일러 기반의 웹 전용 오픈형 플랫폼 SWC를 사용하게 되면서, 기존 Next(v12 이전)Emotion을 사용하기 위해 필요하던 @emotion/babel-plugin 바벨 플러그인을 대신하여 SWC 컴파일러를 사용할 수 있다. (관련 Next Doc) // 기존 바벨 사용시 .babelrc { "presets": ["next/babel", "@emotion/babel-preset-css-prop"], "plugins": [] } 이를 위해 next.co..