서녕이네 개발단지

Next.js 13이 2022년 10월에 컨퍼런스에서 다시 발표됐다고 한다. (디렉토리 구조, getServerSideProps 등 Next 정체성이 대거 바뀜) Next 개발팀은 13버전 업을 통해 좀 더 제한없이 동적으로 동작하는 기반을 마련하고자 했다는 게 주요 컨셉이다. 🖐🏻 주요 변경사항 app/Directory(beta) : 쉽고, 빠르고, 적은 클라이언트 JS Layouts(레이아웃) React Server Components (리액트 서버 컴포넌트) Streaming (스트리밍) Data Fetching Turbopack(alpha) : Rust 기반. Webpack 보다 700배, Vite보다 10배 빠른 번들러 새로운 next/image(stable) : 더 빨라진 Lazy Loadin..

NextJS란? - Next.js는 리액트로 만드는 서버사이드 렌더링(SSR) 프레임워크다. - Next.js는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로, 리액트에 없는 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 증분 정적 재생성(ISR)과 같은 다양하고 풍부한 기능을 제공한다. ⚠️ React에는 한 가지 큰 문제점이 있는데, 바로 리액트는 기본적으로 클라이언트 사이드에서만 작동한다는 점이다! 사용자의 웹 브라우저에서만 실행되기 때문에 리액트를 사용한 웹 애플리케이션은 검색 엔진 최적화(SEO)의 효과를 거의 볼 수 없으며❌, 첫 화면에 웹 애플리케이션을 제대로 표시하기 위해 애플리케이션 실행 초기에 성능 부담이 생긴다. 웹, 앱을 완전히 표시하려면~ 브라우저가 전체 웹..

ReactNode ReactNode는 TypeScript에서 React 컴포넌트에서 반환될 수 있는 모든 종류의 노드(node)를 나타내는 타입이다. React 컴포넌트의 렌더링 결과로 JSX요소, string, number, array, boolean, null, undefined 등이 포함될 수 있는데, 이러한 모든 데이터 타입을 대표하는 것이 ReactNode이다. ReactNode는 children 속성의 타입으로 가장 많이 사용하는 타입이다. import React, { ReactNode } from "react"; interface Component { children: ReactNode; } const ComponentProps: React.FC = ({ children }) => { ret..

React.FC란? Function Component 타입의 줄임말로, React + Typescript 조합으로 개발할 때 사용하는 타입이다. 함수형 컴포넌트 사용 시 타입 선언에 쓸 수 있도록 React에서 제공하는 타입이다. React 18버전 이전까지 FC 사용을 지양했던 이유는? 1. children React.FC를 사용하면 컴포넌트 props는 type이 ReactNode인 children을 암시적으로 가지게 된다. type TagName = { name: string; }; const Tag: React.FC = ({ name }) => ( {name} {children} ); 👉🏻 타입스크립트를 쓰는 이유중 하나가 정확한 타입을 지정 해주면서 JS코드의 안전성을 향상 시키는 부분인데, F..