Next.js14

next는 개발자 경험이 매우 좋음좋다라는건 따로 하나하나 셋팅하지 않아도 지원하는 기능의 규칙만따른다면 적은 코드로 많은 것을 지원해주기 때문여기서 리액트가 라이브러리인 이유를 찾을 수 있다.리액트는 개발자가 원하는 아키텍쳐로 개발자가 주체가되어 사용함넥스트는 즉,

리액트는 수동적으로 라우팅을 해주었다면 넥스트느 파일시스템을 통해 생성한다.app의 하위 폴더로 원하는 폴더명을 생성하고 그 안에 page.tsx 파일을 생성하여 export default로 UI(컴포넌트)를 내보냄으로써생성한 폴더명으로 Route가 생성됨!! 폴더만

사용자가 최초 HTML을 본 뒤의 어떤 일이 발생할까?react가 클라이언트에서 활서화되는 과정 이것을 hydration이라고 함프리렌더된 초기 html이 브라우저에 전달되고나면 즉시 react와 모든것을 load하여비로소 interactive해진다. 새로고침없이도 페

재사용하는 요소들이 있다. 100페이지가 넘는다면 100번을 복붙할 수는 없다.예를들면 footer라던지, 네비게이션이라던지 말이다.기본적으로는 레이아웃이 먼저 렌더되고 url로 인식한 컴포넌트를 렌더하게 됨그리고 무조건 root 레이아웃(html,body가 포함된)을

route group(logical group) : (폴더이름) url을 바꾸지 않고 그룹핑 해줌단 rootlayout과 non-found 파일은 app 폴더에 있어야함메타데이터도 중첩이 가능하지만 실제로는 병합이됨 마치 동일한 인터페이스명을 작성하면 자동 병합되는것과

url에 들어간 변수 데이터를 가져오려면?서버컴포넌트라면 서버에서(backend)에서만 실행되기때문에 터미널에서만 log를 확인해 볼 수 있고브라우저의 개발자도구에서 보면 log를 확인할 수 없다. 새로고침을 하더라도 말이다.아래 이미지처럼 서버에서는 새로고침을 했기

외부라이브러리나 서드파티없이 데이터 페치하는법 또는 평범한 리액트앱에서 fetch하던 방법또는 리액트 쿼리를 사용한다던가 멋진 라이브러리를 사용한다고해도 데이터 페치해오는것은항상 클라이언트에서 일어났기때문에 로딩이 보여지는 공통점이 있다.이말은 곧 브라우저가 API에게

두개의 api를 await 하고 있을 때 첫번째가 20초걸리고 두번째가 0.5초가 걸린다하더라도 총20.5초가지난뒤에야 데이터를 볼 수 있음 (직렬적,순차적)아래 이미지처럼 각각의 데이처패치 함수에 await를 걸고 log에 시간을 찍어확인하면 각각 순차적으로 실행됨을

반드시 "use client"를 사용해야함에러가 나면 모든 어플리케이션이 고장나면 안되기때문에 해당 페이지가 속한 폴에 error페이지를 놓으면 해당 페이지에서 발생한 error에 대해서 핸들링 할 수 있다.