Next.js

next.js를 설치하면 위와 같은 폴더 구조를 볼 수 있다. /app: 애플리케이션에 필요한 모든 경로, 구성 요소, 논리가 포함되어 있다. 주로 이곳에서 작업을 진행한다. /app/lib: 재사용 가능한 유틸리티 함수, 데이터 가져오기 함수 등 애플리케이션에서 사용

'/app'파일 안에 'global.css'파일이 있다. 보통 '/app/layout.tsx'파일에서 import해서 사용된다. 전역으로 공통된 스타일들을 지정할 수 있다. 예를 들어 color:"blue" 이런 식으로 글로벌 스타일을 지정하면, 모든 파일의 c

next.js는 구글 폰트에서 제공하는 폰트를 지원하는 'next/font/google' 패키지가 있다. Inter라는 구글 폰트를 사용하기 위해 가져오려면 이런식으로 가져올 수 있다. 또한 하위 집합을 설정할 수 있다. (예: subset서브셋은 폰트에서 특정 글꼴만

Next.js는 최상위 폴더 아래에 이미지와 같은 정적 자산을 제공할 수 있다. 보통 이미지들은 /public 폴더 안에 저장한다. 우리가 줄곧 사용한 img하지만 이렇게 하려면 아래 나와있는 것들을 수동으로 수행해야 한다. 다양한 화면 크키에서 이미지가 반응하는지 확

현재 app 폴더 안에 daschboard 폴더가 있고 그 안에 invoices폴더가 있다. 즉 비유하면 app이 할머니, daschboard가 엄마/ invoices가 손자기존에 app파일 안에 있는 page.tsx파일은 개발 시 홈페이지가 되고 경로는 '/'가 된

사용자가 요청한 URL에 따라 어떤 페이지를 보여줄지를 결정하는 과정Next.Js는 앱라우팅/페이지 라우팅을 사용하여 URL 경로와 페이지 파일을 직접 연결한다. 예를 들어서 사용자가 '/about'경로를 입력하면, Next.Js는 해당 경로와 맞는 페이지를 표시한다.

html태그인 a태그로 링크를 연결했지만, next.js에서는 Link라는 태그를 사용한다. 이렇게 a처럼 href에 경로를 집어넣으면 해당 경로로 이동할 수 있다. !!! 페이지를 새로고침 없이 탐색할 수 있다.이걸 클라이언트 사이드 네비게이션이라고 불리며, 사용

사용자에게 현재 어떤 페이지에 있는지 알려주기 위해 활성 링크를 표시할 수 있다. 사용자의 현재 경로를 가져와준다. usePathname()을 사용하기위해서는 client 컴포넌트로 전환해야 한다. "use client"를 파일 맨 위에 추가 한 후 usePathnam

"Application Programming Interface"의 약자로 프로그램끼리 소통할 수 있게 도와주는 도구 API는 애플리케이션 코드와 데이터베이스 사이의 중간 계층이다. 만약 구글 맵을 사용하려면, 구글 맵 API를 통해 지도를 불러와야 한다. 이렇게 제 3

요청이 순차적으로 이루어지는 방식즉 하나의 요청이 완료된 후에 다음 요청이 시작된다. 이 방식은 특정 요청이 완료된 후에만 다음 요청을 진행할 수 있는 경우 유용하다. 사용자의 프로필 정보를 가져오고, 그 프로필을 기반으로 사용자의 친구 목록을 가져오려고 한다. 이

여러 요청을 동시에 실행하여 성능을 개선하는 방식모든 요청을 동시에 보내고, 모든 요청이 완료될 때까지 기다린다. 이 방법은 데이터 요청이 서로 독립적일 때 유용하다. 가정 대시보드에 필요한 데이터가 여러가지 있다. 총 판매 수익최근 5개의 송장총 고객 수 이 데이터

next.js에서 404 페이지를 쉽게 만들 수 있다. 방법은 바로 'not-found'라는 이름의 파일을 만들어 주면 된다. 가장 최상위 경로에 생성하면 된다. 이런 식으로 페이지를 만들어주면 이상 경로로 접속했을 때 내가 만든 404페이지가 보여진다! 이렇게 use

스트리밍은 데이터를 준비되는 대로 작은 '조각'으로 나누어 서버에서 클라이언트로 점진적으로 전송하는 기술이다. 이렇게 하면 느린 데이터 요청이 전체 페이지를 차단하지 않고, 사용자는 모든 데이터가 로드될 때까지 기다리지 않고도 페이지의 일부를 보고 상호 작용할 수 있다

Next.js에서는 라우트 내에서 데이터베이스 쿼리와 같은 동적 함수를 호출하면 해당 라우트 전체가 동적으로 변한다. 대부분의 라우트는 완전히 정적이거나 동적이지 않는다. (예)이커머스 사이트 경우 제품 정보 페이지를 대부분을 정적으로 렌더링하고 싶지만, 사용자의 장바

이미지 미리보기 기능을 구현해 보았다. 일단 올릴 이미지 state하나, 미리보기 이미지 state하나를 만들었다. 그 다음 input에 들어갈 함수를 만들었다. 파일을 선택하게 된다면 e.target.files로 인해 file 변수에 선택한 파일들을 담고 있는 Fil

이렇게 코드를 작성했다. 인풋에 아무런 값이 적혀져 있지 않는 상태로 폼을 제출하게 될 경우 에러메시지가 나오도록 하고 싶은데 왜인지.. 적용이 안된다... 대체 왜지..?(분명 전에는 잘 만들었는데 말이다...ㅜ)이렇게 알림창이 뜬다!그런데 나는 오류메시지를 만들고

서버액션은 단순하게 말하면 비동기 함수이다. 함수인데 서버에서 실행되는 함수이다. next.js는 서버에서 실행되는 서버 컴포넌트, 브라우저에서 실행되는 클라이언트 컴포넌트로 구분지어져 있다. 파일 최상단에 use server라고 붙어있으면 서버 컴포넌트이다. use

stale-while-revalidate라는 전략에서 따온 것으로, HTTP 요청 데이터를 최신 상태로 유지하는 방법이다. 간단히 말해, 먼저 캐시된 데이터를 화면에 보여준 다음, 백그라운드에서 새 데이터를 가져와 업데이트하는 방식이다. SWR을 사용하면 컴포넌트가 자