반응형 React/Next.js8 [Next.js] Next.js에서 redux-persist 사용 새로고침하면 리덕스가 초기화 되는 걸 해결하기 위해서 redux-persist를 사용해서 새로고침해도 리덕스가 초기화 되는 현상을 막아주었다. 우선 redux-persist 모듈을 깔아주고. 아래와 같이 설정해주었다. yarn add redux-persist or npm install redux-persist //persistMiddleware.ts import { REHYDRATE } from 'redux-persist/lib/constants'; import { Middleware } from 'redux'; const persistMiddleware: Middleware = (store) => (dispatch) => async ( action, ) => { if (action.type === RE.. 2022. 2. 24. [Next.js] Next.js + Redux + TypeScript 사용중 state값 proxy로 나올때 해결법 import { current } from '@reduxjs/toolkit' ... extraReducers: (builder) => { builder.addCase(logIn.fulfilled, (state, action) => { console.log(current(state)) }); }, console.log(state)했을 때 proxy값으로 나오면 import {current} 해서 아래처럼 입력해주면 값이 제대로 나온다. 2022. 2. 17. Next.js + TypeScript 사용하기 ! 처음 실행은 npx나 yarn을 사용해서 TypeScript를 이용한 프로젝트를 설정해 줄 수 있다. npx create-next-app@latest --ts # or yarn create next-app --typescript https://nextjs.org/docs/basic-features/typescript Basic Features: TypeScript | Next.js Next.js supports TypeScript by default and has built-in types for pages and the API. You can get started with TypeScript in Next.js here. nextjs.org 2022. 2. 10. [Next.js] Next.js에서 Head 설정하는 방법 💡 Next.js에서 Head 설정하기 우선 아래와 같이 import 시켜준다. import Head from "next/head"; 전체적으로 이름을 정해주려면 우선 _app.js파일로 가서 아래와 같이 지정해준다. 메타태그 또한 같이 지정가능하다. 메타태그는 검색엔진을 검색할 때 중요한 태그가 되니 되도록이면 넣어주도록 하자. 그러나 페이지마다 다른 Head title 설정이 가능하다. import Head from "next/head"; import { getFeaturedEvents } from '../helpers/api-util'; import EventList from '../components/events/event-list'; function HomePage(props) { return .. 2022. 1. 17. useSWR 사용하기. useSWR은 먼저 캐시로부터 데이터를 반환한 후 fetch 요청을 하고 최종적으로 최신화된 데이터를 가져올 수 있다. 또한 useSWR은 한 줄의 코드로 프로젝트 내에서 데이터 가져오기 로직을 단순화 할 수 있다. Next.js에서 만든 팀이 만들었기 때문에 공식문서가 자세하고 편하게 되어있다. 공식문서에 따르면 빠르고, 가볍고, 재사용 가능한 데이터 가져오기 내장된 캐시 및 요청 중복 제거 실시간 경험 전송 및 프로토콜에 구애받지 않음 SSR / ISR / SSG support TypeScript 준비 React Native yarn add swr or npm install swr 자세한 예제는 아래의 공식 문서에서 확인하면 된다. 한글화가 잘 되어 있기때문에 문제 없이 볼 수 있다. https://.. 2022. 1. 17. [Next.js] Pre-Rendering 💡Pre-Rendering이란? Next.js에서는 기본적으로 모든 페이지를 미리 렌더링 한다. Pre-rendering이야 말로 Next.js에서 가장 중요한 개념이라고 할 수 있는데 Next.js는 클라이언트에서 JavaScript로 모든 작업을 수행하는 대신 각 페이지에 대해 미리 HTML을 생성할 수 있다. • 두 가지 형태의 사전 렌더링 Next.js에서는 Static Generation(정적 생성)과 Sever-side Rendering(SSR)의 형태로 두 가지 방법의 사전 렌더링 방식이 존재한다. 🎈 Static Generation(정적 생성) Static Generation은 Next.js에서도 성능상의 이유로 SSR보다 권장하고 있는 방식이고, 또한 많은 사람들이 사용하는 방식이다. 정.. 2022. 1. 12. 이전 1 2 다음
