[FedEx] 스터디

Next.js는 자바스크립트 웹 프레임워크 ,리액트에는 없는 SSR, SSG, ISR 등 제공React는 기본적으로 클라이언트 사이드에서만 동작→ 따라서 SEO(검색 엔진 최적화)의 효과를 거의 볼 수 없음.→ 브라우저가 전체 웹 애플리케이션 번들을 다운로드 하고 그

코드 구성과 데이터 불러오기 디렉토리 구조 구성 create-next-app으로 Next.js 애플리케이션을 처음 만들면 생기는 디렉토리 구조 > next-js-app node_modules/ package.json pages/ public/ s

CSS-in-JS 라이브러리.Next.js의 내장 기능이기 때문에 패키지를 설치할 필요 없이 프로젝트를 시작하고 바로 사용할 수 있음.→ 동적인 CSS 규칙을 만들 수 있음, 다른 컴포넌트에 영향을 주거나 충돌을 일으키지 않음.모든 컴포넌트에 적용할 CSS 규칙을 만들

Next.js는 자체 서버를 제공하기 때문에 별도의 서버를 준비하고 실행할 필요가 없음.하지만 Next.js는 커스텀 웹 서버에서도 웹 애플리케이션을 쉽게 실행할 수 있도록 직관적인 API를 제공.정말 커스텀 서버가 필요할까?Next.js 웹 애플리케이션을 기존 서버에

테스트는 개발에서 필수 과정이며 세 단계로 나눌 수 있다.단위 테스트코드의 각 함수가 제대로 작동하는지 확인하기 위한 테스트E2E 테스트사용자 상호 작용을 흉내내서 특정 작동이 발생했을 때 적절한 응답을 하는지 확인하기 위한 테스트통합 테스트서로 구분되어 있는 영역이

리액트 , 앵귤러, 뷰 같은 프레임워크가 UI를 훨씬 쉽고 간단하게 구현할 수 있는 환경을 제공해 주었으나검색 엔진으로 웹 사이트 검색 결과와 색인 정보를 수집하는 도구는 오히려 원활하게 작동하기 어려워짐.→ 사용자와 상호 작용을 통해 자바스크립트로 렌더링되는 경우가

Vercel, Netlify, Heroku 같은 클라우드 플랫폼→ 배포 과정이 거의 표준화되어 있으며 누구나 접근이 쉽도록 간소화AWS, Azure, DigitalOcean 같은 클라우드 서비스 제공 업체→ 배포 과정 전체를 완전히 제어할 수 있도록 지원Vercel에

Next.js 13에서는 app/ 디렉토리를 도입하여 Next.js의 라우팅 및 레이아웃 경험을 개선레이아웃: 경로 간에 UI를 쉽게 공유할 수 있음스트리밍: 로딩 상태를 표시하고 렌더링되는 UI 단위로 스트리밍서버 컴포넌트데이터 가져오기현재 app/ 디렉토리는 베타

v12에서는 페이지 단위로 렌더링 방식을 규정→ getStaticProps(), getServerSideProps() 함수를 통해 SSG(+ ISR), SSR 여부를 결정v13에서는 서버 컴포넌트, 클라이언트 컴포넌트 개념이 도입서버 컴포넌트는 서버상에서만 동작하는 컴

→ revalidate옵션만 붙혀주면 된다!export const revalidate = false ← 기본값페이지 컴포넌트 상단에 export const revalidate = 3; 이라고 선언해주면해당 페이지는 3초에 한번씩 다시 generate한다.(엄청 간단하네