# FE
FE 교육 2주차 TIL
CSS란? html이 뼈대 혹은 구조를 만드는 것이었다면 CSS는 그 구조에 살을붙이고 스타일링을 하는 것이다!! 추가적으로 css로 스타일링하는 것을 '먹인다' 는 표현을 쓴다고 한다!!! CSS를 적용하는 3가지 방법 인라인 스타일 위에는 html내에서
NextJS API: next/server
next/server는 미들웨어 및 Edge API 라우트에서 사용할 수 있는 서버 전용 도우미를 제공합니다.NextRequest 객체는 기존 Request 인터페이스를 확장하여 다음과 같은 추가 메서드와 속성을 가집니다.cookies - Request에서 쿠키를 담은
NextJS API: next/head
우리는 페이지 head에 요소를 추가하기 위한 내장된 컴포넌트를 노출합니다:head에서 중복된 태그를 피하려면 key 속성을 사용할 수 있습니다. 이렇게 하면 태그가 한 번만 렌더링되도록 보장합니다. 다음 예제와 같이:이 경우 두 번째 <meta property=
NextJS API: next/script
이 API 참조 페이지는 Script 컴포넌트에 사용 가능한 props를 이해하는 데 도움이 됩니다. 기능 및 사용법은 Optimizing Scripts 페이지를 참조하세요.다음은 Script 컴포넌트에 사용 가능한 props의 요약입니다.<Script /> 컴포
NextJS API: next/link
next/link로 클라이언트 측에서 페이지 이동을 할 수 있습니다.다음과 같은 파일이 있는 페이지 디렉토리를 고려해보세요.pages/index.jspages/about.jspages/blog/\[slug].js이러한 페이지로 링크할 수 있습니다.Link는 다음과 같은
NextJS API: next/router
어플리케이션의 모든 함수 컴포넌트에서 라우터 객체에 접근하려면, useRouter 훅을 사용할 수 있습니다. 다음 예제를 참고해주세요:useRouter는 React 훅으로, 클래스와 함께 사용할 수 없습니다. withRouter를 사용하거나 클래스를 함수 컴포넌트로 래
NextJS API: getStaticProps
getStaticProps라는 함수를 export하면 함수에서 반환한 props를 사용하여 페이지를 빌드 시에 프리렌더링할 수 있습니다:getStaticProps에서는 모듈을 import하여 데이터베이스에서 데이터를 가져와 서버쪽에서 코드를 직접 작성할 수 있습니다.
NextJS API: getStaticPaths
다이나믹 라우트를 사용하는 페이지에서 getStaticPaths라는 함수를 내보내면, Next.js는 getStaticPaths에서 지정된 모든 경로를 정적으로 프리 렌더링합니다.getStaticPaths 함수는 다음과 같은 필수 속성을 가진 객체를 반환해야 합니다.p
NextJS API - getInitialProps
참고: Next.js 13부터는 (베타) app/ 디렉토리를 도입합니다. 이 새 디렉토리는 컴포넌트 수준의 공간적 데이터 가져오기를 지원하며, 새로운 React use hook과 확장된 fetch Web API를 사용합니다. app/의 점진적 적용에 대해 자세히 알아보
NextJS: Custom Error Page
404 페이지는 매우 자주 액세스될 수 있습니다. 모든 방문에 대해 에러 페이지를 서버 렌더링하면 Next.js 서버의 부하가 증가하게 됩니다. 이로 인해 비용이 증가하고 느린 사용자 경험이 발생할 수 있습니다.위와 같은 문제를 피하려면 Next.js는 추가 파일을 추
NextJS: 커스텀 App & Document
참고: Next.js 13에서는 app/ 디렉토리(베타)를 도입합니다. 이 새로운 디렉토리는 레이아웃, 중첩 라우트 및 기본적으로 Server Components를 사용할 수 있습니다. app/ 안에서 레이아웃을 포함한 전체 애플리케이션의 데이터를 가져올 수 있으며,
NextJS: Custom Server
커스텀 서버예시커스텀 서버SSR 캐싱기본적으로 Next.js는 next start와 함께 자체 서버를 포함합니다. 기존 백엔드가 있는 경우에도 Next.js와 함께 사용할 수 있습니다(이는 커스텀 서버가 아님). 커스텀 Next.js 서버를 사용하면 사용자 정의 서버
NextJS: Static HTML Export
예제: Static Exportnext export는 Next.js 애플리케이션을 정적 HTML로 내보내서 Node.js 서버 없이 렌더링할 수 있게 합니다. 다음과 같은 지원되지 않는 기능이 필요하지 않은 경우에만 next export를 사용하는 것이 좋습니다.오직
NextJS: Auto Static Optimization
Next.js는 페이지가 데이터 요구사항이 없으면 (서버에서 데이터를 가져올 필요가 없으면) 정적(사전 렌더링 가능한) 페이지인 것으로 자동으로 간주합니다. 이 결정은 페이지에서 getServerSideProps와 getInitialProps가 없는 경우에 이루어집니다
NextJS: Depoyment
축하합니다! Next.js 애플리케이션을 프로덕션 환경에 배포할 준비가 되었습니다. 이 문서에서는 Next.js Build API를 사용하여 관리형 또는 자체 호스팅을 배포하는 방법을 보여줍니다.next build는 프로덕션을 위해 최적화된 애플리케이션의 버전을 생성합
NextJS: API Routes
예시:기본적인 API 라우트GraphQL을 이용한 API 라우트REST를 이용한 API 라우트CORS를 이용한 API 라우트API 라우트는 Next.js로 API를 구축할 수 있는 솔루션을 제공합니다.폴더 pages/api 내에 있는 모든 파일은 /api/\*로 매핑되
NextJS: Shallow Routing
예시: Shallow Routing얇은 라우팅(Shallow routing)은 getServerSideProps, getStaticProps, getInitialProps를 포함한 데이터 가져오기(fetching) 방법을 실행하지 않고 URL을 변경할 수 있도록 합니다