revalidate : 60초마다 서버에서 데이터를 새로 받아옵니다.notFound : true로 설정하면 페이지가 404 오류를 반환합니다. 그에 따라 404 오류페이지로 이동합니다. (데이터 페칭에 실패할 경우 필요)redirect : 사용자를 다른 페이지로 보낼

next build 스크립트는 다음 Next.js 프로젝트를 배포할 때 실행하는 스크립트다.가장 마지막에 실행될 이 next build 명령어가 페이지를 사전 생성합니다.npm run build 명령어를 실행하고, 아래 사진처럼 ⏺으로 되어있는 것은 SSG(정적 측면

기존 React 데이터 페칭의 문제점 처음에 텅 빈 HTML을 반환 서버에서 데이터를 받아오느라 지연시간이 있음. Next.js가 페이지를 준비하고 사전 렌더링하는 방식 Next.js는 사전 렌더링이라는 개념을 이용하여 기존 React 데이터 페칭의 문제점을 해결합

React.FC FC는 Function Component의 줄임말입니다. React 타입의 일부입니다. > 결론적으로 FC 타입은 사용하지 않아도 됩니다. 오래되었다. 권장하지 않는다. 원래는 기본적인 App Component 였었습니다. 요점은 함수형 컴포넌

Exhaustiveness Check가능한 모든 옵션을 다 썼는지 확인하기 위해 사용됩니다.Type nevernever type은 어디든 할당됩니다.하지만 never에는 어떤 타입도 할당할 수 없습니다.이러한 특징은 에러 핸들링으로 사용할 수 있습니다.모든 Type

discriminated unions모든 타입의 공통된 속성에 판별자를 추가합니다.사용함으로써 특정 타입의 속성에 접근할 수 있습니다.지정한 타입의 속성을 넣어주면 잘 작동하지만,지정한 타입의 판별자가 다를 경우 TS에서 에러를 발생시킵니다.

typeof guardstypeof를 이용하여 타입을 좁힐 수 있습니다.주로 명확하지 않은 타입이 있을 때 사용합니다.(예로 유니온 타입이 있음)이것을 보다 명확하게 타입을 좁힙니다.만약, typeof guard 방식을 사용하지 않고 코드를 아래와 같이 작성하게되면.r

문제 해결 방법 해당 ESLint 에러는 return에 무조건 반환값이 들어와야함.에 근거하여 발생하는 에러입니다. 아무것도 return하지 않으려고 기존에 return;으로 끝냈었으나, 이렇게 처리함으로써 eslint 에러가 발생했습니다. return null

TS에서 매우 중요한 제네릭이다.여러 타입에서 사용할 수 있는 재사용 함수나 재사용 클래스를 정의할 수 있게 해주는 특수 기능 or 특수 구문이다.제네릭(Generics)은 클래스 또는 함수에서 사용할 타입(Type)을, 그 클래스나 함수를 사용할 때 결정하는 프로그래

!모양의 연산자다.코드 줄 뒤에 느낌표!를 붙임으로써 절대 null이 되지 않는다고 Typescript에게 알리는 것이다.아래 예시 코드에서 btn.addEventListener()는 const btn = document.getElementById("btn")!의 단언

(Mac M1 환경입니다.)tsc --init으로 ts 환경설정을 할 때 아래와 같은 오류를 마주하셨나요?zsh: command not found: tscbrew install typescriptnpm i typescript -g하나씩 해보시고 tsc --version

렌더링 시에 검색 input에 포커싱을 맞추고 싶어서 사용하였는데,log로 찍으면 어떤 값이 나올지 궁금해서 찍어봤다.렌더링 하면 input에 포커싱은 되지만 출력 결과는 undefined를 출력하는 것이었다..이게 무슨 상황인가 싶어서 주석으로 없애고 지우고를 반복해

먼저 이해 하고 넘어가야 하는 내용 웹사이트를 방문하면 일반적으로 도메인 이름 뒤에 경로를 붙혀져있는 것을 볼 수 있습니다. /home 처럼 말이죠. /home 경로에 있으면, 웹사이트의 home에 해당하는 페이지를 로딩합니다. 동일한 개념으로 /login 경로에

들어가기에 앞서 > 리듀서 함수는 순수함수여야만 하며, 사이드 이펙트가 없고 동기식으로 작동되어야 합니다. 즉, 리듀서 함수는 이전 상태 및 작업인 리덕스 리듀서의 경우에 Input이 꼭 필요하며, Output을 반환합니다. > Input(Olid State + A

Redux-Toolkit은 Redux의 몇 가지 특징을 단순화한 것이다. store 파일에 createSlice 또는 createReducer를 import해줘야 합니다. (여기 createSlice와 저것의 차이를 학습하고 정리하기. createSlice의 기능

매우 중요합니다.Redux의 state를 다루는 것에 있어 간단한 규칙이다.Redux로 작업할 때 절대 기존의 State를 변형해서는 안 된다. (store에 있는 initalState)매우 중요한 한 줄이다.대신에, 새로운 state 객체를 반환하여 항상 재정의한다

문제 풀이 과정 log 찍었을 때

https://gurtn.tistory.com/191

업로드중..참고블로그<부제 : Modal 뜨면 Scroll 막기>참고블로그Tablet View부터 Icon을 클릭 시, Filter를 띄워야했습니다.문제 1. 필터를 켜놓고 Tablet => Web view로 크기를 늘리면 Filter가 사라지지 않았습니다.해결