본문 바로가기
분류 전체보기
 (410)
[Next.js] 사전 렌더링 시 데이터 가져오기 // 사전 렌더링 시 데이터 가져오기 - 초기에 반환하는 HTML 코드에 데이터가 있는 페이지를 사전 렌더링해야 Next의 의미가 있다. > SEO 향상! - Next.js의 사전 렌더링 방법 두 가지 Static Generation Server-side Rendering // Static Site Generation (SSG) - production 용으로 build하는 시점에 사전 렌더링된다. - 항상 다시 생성하는 것이 아니라 cache하고 다시 사용하기 때문에 빠르다. - page 컴포넌트에 데이터를 가져와서 추가해야 한다면 page 컴포넌트 파일 안에서 getStaticProps 함수를 export 해야 한다. > Next는 Promise 반환을 기다린다. export async function..
[Next.js] 라우팅(Routing) // 라우팅, Routing- 페이지 간의 이동- 경로명은 파일명과 일치한다.   ▪ index.js 파일은 일반적으로 root page 역할을 한다.('/')   ▪ index.js 파일을 제외하고 다른 파일 이름은 경로 이름으로 사용된다.- pages 하위의 index.js  > /- pages 하위의 news.js  > /news- 중첩 경로는 디렉토리를 생성하하여 디렉토리명/파일명으로 경로가 사용된다.- pages 하위의 news 하위의 index.js > /news- pages 하위의 news 하위의 edit.js > /news/edit// 동적 라우팅- 파일명에 [] 를 사용하면 동적 페이지로 사용된다.- pages 하위의 news 하위의 [newsID].js  import { useRoute..
[Next.js] Next.js란? // Next.js - React의 기능을 강화해주는 fullstack 프레임워크 - 서버 사이드 렌더링(SSR) > 서버에서 React 컴포넌트를 사전 렌더링할 수 있다. > SEO 향상 - SPA을 제공하여 서버에 요청이 오면 single page에 동적으로 사전 렌더링을 거쳐 콘텐츠를 포함한 초기 페이지를 보여준다. - 클라이언트 사이드와 서버 사이드를 혼합한다. - 코드 기반이 아닌 파일, 폴더 기반 라우팅을 제공한다. - React 프로젝트에 백엔드 코드를 쉽게 추가할 수 있다.(Node js) 1. Node.js 설치 - https://nodejs.org/en Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript en..
[리액트(React)] Tanstack Query(React Query) // Tanstack Query - 서버 상태 관리를 용이하게 해주는 라이브러리 - React Query로 알려져 있었다. - 리액트 앱 내부에서 서버에 HTTP 요청을 간편하게 보낼 수 있게 해준다. - HTTP 요청을 직접 전송하는 로직이 내장된 것이 아니라, 요청을 관리하는 로직을 제공해준다. - 공식 문서: https://tanstack.com/query/latest/docs/framework/react/overview Overview | TanStack Query Docs tanstack.com - 서버에서 가져온 데이터를 cache 처리하고 메모리에 저장해서 필요할 때 다시 사용할 수 있다. 1. 설치 npm install @tanstack/react-query 2. Tanstack query..
[리액트(React)] 배포(Deploying) // 배포, Deploying - 실제 사용이 가능하도록 서버에 올리는 과정 1. 테스트하기 2. 코드 최적화하기 // Lazy Loading - 특정 코드를 필요할 때만 로딩한다. - 특정 컴포넌트를 나중에 불러온다. - 컴포넌트가 렌더링되기 전 import 가 먼저 되어야 한다. 1) root 파일에서 당장 필요하지 않은 import문을 삭제한다. - 컴포넌트 재정의 import { lazy, Suspense } from 'react'; const 컴포넌트명 = lazy(() => import('컴포넌트path')); element: ( ), - loader 함수 재정의 loader: () => import('컴포넌트path').then((module) => module.loader()), 3. pr..
[리액트(React)] 인증(Authentication) // 인증, Authentication - 보호가 필요하고, 아무나 접근해서는 안 될 때 사용한다. - 특정 백엔드 resources에 접근할 때, 접근권한이 주어지기 전에 인증(허가)을 받아야 한다. - 사용자 자격 증명을 server로 보내면 server에서 검증 후 결과를 반환한다. ~ Server-sede Sessions / Authentication Tokens - 프론트엔드와 백엔드를 분리하는 경우에는 Authentication Token을 사용한다. 클라이언트에서 서버에 사용자 자격 증명을 전송한다. 서버에서 사용자 자격 증명을 받은 후 Authentication Token을 생성한다. - Token을 생성한 백엔드만이 해당 Token의 유효성을 확인하고 검증할 수 있다. 생성한 Token을..
[리액트(React)] Router - useFetcher // useFetcher - action이나 loader를 트리거하지만 실제로 속한 페이지로 이동하지 않을 때 사용한다. - action이나 loader를 트리거하지만 route 전환은 이루어지지 않는다. const fetcher = useFetcher(); const { data, state } = fetcher; - fetcher 객체는 action이나 loader 의 결과를 받는다. import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import EditEventPage from './pages/EditEvent'; import ErrorPage from './pages/Error'; import EventDetailPag..
[리액트(React)] Router - action - route에서 데이터를 가져오는 것이 loader라면, 보내는 것은 action이다. * loader: https://sorrel012.tistory.com/393 참고 [리액트(React)] Router - loader // loader() - 서버에서 데이터를 가져온 후 컴포넌트를 렌더링할 수 있게 도와주는 react-router의 기능 - react-router 버전 6 이상을 사용해야 한다. 1. 데이터를 가져오는 페이지(컴포넌트)의 route definitio sorrel012.tistory.com 1. 데이터를 보내는 페이지(컴포넌트)의 route definition에 adction property를 추가한다. { path: 'url', element: , action: () => { //..

티스토리툴바