export async function getStaticPaths() { // 동적페이지에 필요한 함수이고 어떤 동적 매개변수 밸류의 어떤 페이지가 프리 제너레이트 되어야 하는지 말해준다. // 모든 페이지를 실행한다. 따라서 모든 미트 업 id 밸류가 데이터를 패치하고 미트업의 프랍을 리턴하도록 한다. return { fallback: false, // 특정 path를 정의하는 것 paths: [ { params: { meetupId: "1", }, }, { params: { meetupId: "2", }, }, ], }; } export async function getStaticProps(context) { // 라우터는 컴포넌트 함수에서만 사용이 가능하다. // 여기서는 리액트 훅을 사용할 수 없..

IP 주소: 기기 자체의 주소가 아니라 기기와 연결된 네트워크 끝 단의 주소이다. IPv4:123.123.123.123 처럼 0.0.0.0 부터 255.255.255.255 까지의 숫자가 네 마디로 구분되는 방식이 현재 주로 사용하는 IPv4 방식이다. 하지만 다양한 모바일 기기가 만들어지면서 IPv4 방식의 주소가 고갈되면서 고안된 방법이 IPv6방식이다. IPv6: 0~F 로 표현하는 16진수를 4자리 숫자 8개로 표현한다. 거의 무한 개라고 보면 된다. 공인 IP 주소 : 지구상 어느 것과도 중복되지 않는 고유 IP 주소이다. 인터넷 서비스 제공업체에 의해 희사나 개인에게 부여된다. 어떤 IP와 중복이 안되기 때문에 웹사이트 같은 서버를 찾기 위한 용도로 사용된다. 사설 IP 주소 : IPv4 방식..

지정된 이름이며 NextJS가 찾는다. getStaticProps 와 차이점이라면 이 함수는 빌드 프로세스 중에는 실행되지 않는다는 것이다. 하지만 배열 다음에 서버에서 실행된다. export async function getServerSideProps(){ //fetch data from an API return{ props: } } 이 객체는 리턴한다. 프랍 프로퍼티로 왜냐하면 이 함수는 여전히 페이제 컴포넌트에 프랍을 받기 때문이다. 그리고 여전히 api에서 데이터를 패치한다. 여기에는 revalidate를 쓸 수 없다. 요청이 들어 올 때마다 실행되기 때문이다. 그래서 시간을 지정할 필요가 없다. 여기서 할일은 context 매개변수로 한다. 콘텍스트 변수에서 요청 객체에 접속할 수 있다. 그리고..

export async function getStaticProps(){ return{ props: } }; 이대로 두면 새로운 데이터가 업데이트 되지가 않아서 매번 다시 빌드하고 배포해야 한다 이걸 막기 위해서 revalidate 를 쓴다. export async function getStaticProps() { return { props: { meetups: DUMMY_MEETUPS, //데이터가 자주 변한다면 }, revalidate:10 (초단위) // 여기에 숫자가 설정되어 있으면 페이지는 빌드 프로세스 중에 바로 생성되지 않는다. 오래된 페이지를 대체한다. 데이터 업데이트 빈도에 따라서 설정하면 된다. }; }

사전 렌더링 기능, 이 내장된 프로세스에는 단점이라고 하자면 사전렌더링한 페이지는 컴포넌트가 첫 번째 렌더링 사이클을 마친 이후의 스냅샷을 콘텐츠로 갖고 있다 . 중요한 데이터가 손실된 상태이다. NextJS에서 이러한 부분을 방지하기 위해 설정을 해야한다 이를 위해 NextJS페이지 렌더링 방법을 제어하는 데 사용할 수 있는 두가지 형태의 사전 렌더링을 제공한다. 정적 생성, 서버 사이드 렌더링이 있다. 서로 다른 시점에서 코드가 실행한다. 정적생성 : 일반적으로 사용하는 접근법이다. 프로덕션용으로 빌드하는 시점에 렌더링을 한다. 기본적으로 요청이 서버에 도달했을 때 서버에서 즉각적으로 페이지를 사전 렌더링하지 않는다. 대신에 개발자가 프로덕션용 사이트를 빌드할 때 사전 렌더링을 한다. 즉 사이트가 배..

웹 브라우저: 웹사이트 열람, 웹사이트를 열어 인터넷 서핑을 하는데 사용되는 소프트웨어 HTML: 요소를 가져다 놓는 마크업 언어이다. '' 안에 글자가 들어간 body,div,h1.. 같은 요소를 태그라고 한다. 각 태그는 웹 페이지 화면에 놓일 요소를 뜻한다. 기본 역할은 단순히 웹 페이지에 어떤 요소를 어떻게 놓을지 배치하는 설계도이다. 프로그래밍 언어가 아닌 마크업 언어로 분류된다. * 마크업 언어? 문서나 데이터의 구조를 표현하는 데 사용되는 언어 CSS: 요소를 꾸미는 스타일 언어 HTML코드를 예쁘게 꾸며 주는 것이 CSS이다. 특정 요소들의 디자인 속성을 지정해 주는 역할만 담당하기 때문에 스타일 언어로 불린다. *CSS는 HTML과 같은 마크업 언어가 실제로 표시되는 방법을 기술하는 스타..