next.js

naxt.js 공훔엔 생산용 React 프레임워크라고 적혀있다.사실 이미 react도 프레임워크인데 프레임워크의 프레임워크가 말이 되냐? => 말이 된다. 프레임 워크라는 것은 단순히 라이브러리보다 기능이 많고 규칙이 명확한 것을 뜻한다.그럼 다시 React 프레임워크

우리가 http request로 어떠한 data를 가져올 때 useEffect 훅을 통하여 가져온다. 이를 통해 loading, error를 핸들링할 수 있기 때문이다.그런데 이때 useEffect의 특징을 다시 한 번 명확히 짚고 넘어가야한다. 그것은 컴포넌트 함수가

pages 밑에 반드시 api라는 이름으로 폴더를 만들어야 한다.파일 경로에 해당하는 url로 라우트에서 요청이 오면 그때 함수가 트리거 된다.API 라우트는 서버에서만 돌아기 때문에 디코드해도 클라이언트에게 노출되지 않는다. 요청 객체는 들어오는 요청에 관한 데이터를

작성 우선 배포에 앞서 SEO에 맞춰서 설정해주어야 한다. 자세한 내용은 전에 포스팅했던 Mordern HTML 를 참조바란다. 그럼이제 next.js에서 를 작성하는 법을 알아보자. 동적으로 작성하기 간단하게 동적표현식({ })과 props를 이용하여 작성할 수

URL에 민감한 정보를 가려주기위하여 다른 String으로 대체하여 보여주는 것네트워크 탭에 들어가보면 다음과 같은 화면을 볼 수도 있다. 이는 별로 좋지 못 한 코드이다.우선 마스킹을 하기전에 redirect부터 알아보자.nextConfig 파일에서 redirects

프로젝트가 거의 막바지에 다달았다. 진짜 많은 것들을 배웠고 포스팅 할게 많다. Next.js는 1차로 미리 Server Side에서 rendering한 Html 페이지를 로드하여 사용자에게 즉각 보여줌으로써 최대한 로딩속도를 줄이는데 그 목적이 있다.하지만 여기서 치

만약 JS만 사용할 것이라면 npm i styled-components추가로 TS를 사용하고 있다면 npm i @types/styled-components 를 추가적으로 설치해주자.통상 import 문과 FC(함수형 컴포넌트) 사이에 또는 export default 이

아마 내가 next.js로 작업하면 참으로 많이 본 화면 중 하나인 듯 하다.정말 다양한 이유로 아래와 같은 error가 뜬다.아래는 문제의 코드이다.저장 후 슬라이스에 남아있는 찌꺼기 데이터를 모두 삭제 후 DB에 저장된 데이터를 다시 로드하는 즉, "새로고침"을 구

클라이언트는 서버로부터 API를 통해 데이터를 받아온다.데이터가 클라이언트에 한 번 전해진 이상, 클라이언트는 해당 데이터가 최신 데이터인지 더 이상 알 수가 없다.이렇게 서버에서 클라이언트로 전해져 최신 데이터인지 알 수 없는, 즉 신선함을 잃은 데이터를 stale