private 레포지토리에 접근하기 위해 설정을 해주어야한다. 1. AWS EC2에서 ubuntu를 연결하고 위 코드를 입력한다. "코멘트 입력" 부분은 자유롭게 작성하면 된다.(따옴표 포함) 그러면 아래의 문구와 함께 키를 시각적으로 보여준다. The key'

1. 초기 세팅 1) 지역(region)을 설정 우리가 빌린 컴퓨터가 있는 곳(데이터 센터) 주요 사용자들의 위치와 데이터 센터가 가까울 수록 속도가 좋아진다. 즉 내가 한국에 있다고 무조건 한국으로 선택할 필요없이 타겟의 위치로 설정 2) 인스턴스 시작 클

zustand를 설치한다.src/store/useStore.tscreate 함수가 호출될 때, 내부적으로 set(업데이트 함수)과 get(현재 상태를 읽는 함수)을 자동으로 주입해 준다.객체로 업데이트단순 대입얕은 병합함수 콜백으로 업데이트이전 상태(state)를 참고

1. 소개 > next.js app router에서 context api를 사용하는 법은 typescript와 같이 소개한다. 2. 코드 소개 1) context 파일 생성 MyContext.tsx 인터페이스(타입) 정의 data : 데이터의 타입을 명시

window npm i -g vercelmac ossudo npm i -g vercel명령어vercel loginvercel 로그인 수단을 선택하여 로그인명령어vercel아래 질문들이 나온다.계정확인어떤 계정에 배포할지 (내가 가입한 vercel 선택)이미 존재하는

검색엔진 결과 페이지(SERP)에서 더 높은 순위에 표시되도록 최적화하는 과정Metadata를 설치해준다.index 컴포넌트(page) 위에 metadata를 아래와 같이 작성해준다.그러면 메타 태그를 내용에 맞게 채워넣어준다. 여기서 openGraph는 sns에 들어

모든 웹 용량에서 이미지가 가장 많은 용량을 차지하는 이미지를 최적화이미지 컴포넌트 활용이미지는 webP나 AVIF 등 경량화된 포맷을 활용하는 것이 아니라 jpeg나 png를 사용한다.필요한 이미지부터 보여주고 추가적으로 랜더링하는 것이 아닌 당장 필요없는 이미지까지

특정 조건일 때 원래 페이지가 아닌 다른 페이지를 랜더링하게 설정하는 기술사용자가 특정 경로로 접속해 새로운 페이지를 요청할때 페이지를 가로채서 다른 페이지를 대신 랜더링한다.초기접속요청이 아닐때만 인터셉팅이 된다.즉, 사용자가 초기 접속이 아닌 클라이언트 방식(lin

하나의 화면에 여러개의 페이지를 병렬로 랜더링 시켜주는 패턴고급 라우팅 패턴 중 하나로 sidebar 나 feed 등 여러 페이지(page.tsx에 작성되는 페이지 컴포넌트)를 병렬로 랜더링 시켜준다.소셜네트워크나 대시보드 등에 구축parallel 폴더를 만들어준다.폴

1. 개요 > 브라우저에서 호출 할 수 있는 서버에서 실행되는 비동기 함수 서버액션을 활용하면 api를 만들필요없이 함수 하나만으로 브라우저에서 Next 서버측에서 실행되는 함수를 직접 호출할 수 있다. 2. 활용 특정 폼 특정 양식에서 사용 예시 input

오류 발생 시 미리 만들어둔 오류페이지를 보여주는 것에러가 발생한 대상과 같은 위치에 에러가 발생했을 때 보여줄 페이지 컴포넌트인 error.tsx(jsx)를 만들어준다. (하위 폴더까지 적용)error.tsxuse client로 클라이언트 페이지로 설정(서버나 클라이

스트리밍 : 서버에서 클라이언트로 데이터를 넘겨야할 때 보내야할 데이터가 크거나 준비시간이 오래걸릴 때 데이터를 여러개의 조각으로 나눈 후 하나씩 전송한다. 데이터가 모두 불러와지지 않은 상태에서도 먼저 불러올 수 있는 컴포넌트를 불러오고 나중에 랜더링이 오래걸리는 페

브라우저에 저장되는 캐시로 페이지 이동의 효율성을 위해 페이지의 일부 데이터를 캐싱여러 개의 페이지가 공통된 레이아웃을 사용하면 브라우저에서 여러번 같은 내용을 요청하는 비효율 성이 있다.이를 해결하기 위해 클라이언트 라우터 캐시를 만들어 페이지에 접속하려할 때 RSC

강제로 특정 페이지를 static 또는 dynamic 페이지로 설정하는 등 페이지의 동작을 강제로 설정약속된 이름의 변수를 설정하고 값을 설정해서 내보내면 페이지의 설정을 강제로 조정할 수 있는 기능 - 라우트 세그먼트 옵션특정 페이지의 유형을 강제로 static, d

1. 개요 > Next 서버측에서 빌드타임에 특정 페이지의 랜더링 결과를 캐싱하는 기능 캐싱된 특정 페이지를 다시 요청하면 캐시에 저장된 내용을 전송한다.

1. 개요 > 여러 api 요청 중 중복으로 발생하는 요청을 캐싱해서 한반만 요청 수 있게 자동으로 데이터 페칭을 최적화 동일한 api호출이 반복되면 리퀘스트 메모이제이션으로 캐싱하여 동일한 요청에 대응한다. 데이터 캐시와는 다르다 여러 요청에 대한 중복에 대해서

fetch 메서드를 활용해 불러온 데이터를 Next 서버에 보관하는 기능(캐싱)fetch메서드의 두번째 인수에 객체 형태로 설정하여 사용가능하다. (axois 등에서는 불가)

앱 라우터에서 데이터를 가져오는 방법getServerSideProps, getStaticProps 등등 특수한 함수를 사용데이터 드릴링으로 props를 넘겨줘야하는다는 문제점이 있는데 앱라우터에서 개선데이터가 필요한 컴포넌트에서 직접 데이터를 페칭한다.데이터를 불러올

기존 페이지 라우터 방식과 비슷하지만 서버 컴포넌트라는 개념이 추가되어 방식이 변경된다.앱 라우터 js 번들에는 클라이언 컴포넌트만 포함되어 서버 컴포넌트는 포함이 되지않아 서버 컴포넌트로 구성된 RSC Payload도 함께 전달해주어야한다.link를 import 해주

1. 개요 > 오직 서버측에서만 실행되는 컴포넌트 기존 next.js는 js bundle을 브라우저로 넘길 때 'react hook, 이벤트 핸들러' 등 상호작용이 있는 컴포넌트와 상호작용이 없는 컴포넌트 둘 다 넘긴다. 상호작용이 없는 컴포넌트는 굳이 브라우저에