전체 글27 Data Fetching - getServerSideProps getServerSideProps 페이지에서 getServerSideProps를 사용하면 해당 함수에서 반환된 데이터를 이용해 페이지를 미리 렌더링한다. export async function getServerSideProps(context) { return { props: {}, } } getServerSideProps는 언제 실행될까? getServerSideProps는 브라우저에서 실행되지 않고 서버에서만 실행된다. 페이지에서 getServerSideProps를 사용하는 경우 해당 페이지를 직접 요청하면 getServerSideProps가 실행되고 반환된 데이터로 사전 렌더링된다. 브라우저에서 next/link 또는 next/router를 통해 해당 페이지로 페이지 전환을 하게되면 Next.js는 .. 2022. 12. 26. Pages Next.js는 pages 폴더 안에 있는 파일 이름을 기반으로 라우팅한다. pages 폴더 안에는 .js, .jsx, .ts, .tsx 파일이 들어갈 수 있으며, 각 파일에는 React Component가 들어간다. 만약 about.js라는 파일을 만들었다면 www.domain.com/about으로 접근할 수 있다. 동적 라우팅(Dynamic Routes) Next.js는 동적 라우팅을 지원하는데 pages/posts/[id].js처럼 대괄호를 추가해서 파일명을 작성하면 동적라우팅이 가능하다. www.domain.com/posts/1로 접근할 수 있다. 사전 렌더링(Pre-rendering) Next.js는 기본적으로 모든 페이지를 사전 렌더링한다. 사전 렌더링이란, 클라이언트(브라우저)측에서 자바스크.. 2022. 12. 23. Next.js 시작하기 자동 설정 1. 설치 npx create-next-app@latest # or yarn create next-app # or pnpm create next-app 타입스크립트 사용시 npx create-next-app@latest --typescript # or yarn create next-app --typescript # or pnpm create next-app --typescript 설치시 대화형으로 설치가 진행되며, 비대화형으로 설치하기 위해 option을 추가할 수 있다. create-next-app [options] Options: -V, --version output the version number --ts, --typescript Initialize as a TypeScript proj.. 2022. 12. 23. CSR과 SSR(SSG) 브라우저의 렌더링 방식은 CSR과 SSR로 나뉜다. 렌더링 방식이란 화면에 그려지는 HTML을 누가 주체가되어 그려줄 것이냐하는 것을 의미한다. 1990년 중반까지는 모두 static 사이트 였다. 즉, 서버에 html 파일을 저장해놓고 브라우저의 요청에 따라 html 파일을 받아와서 화면에 보여주는 형태인데, 이를 MPA(Multi Page Application)라 한다. 이러한 형태의 문제는 페이지 내에서 다른 링크를 클릭하면 다시 html을 요청해서 받아와 페이지 전체를 업데이트 해야하기 때문에 화면의 깜빡임이 있다는 것이다. 이러한 문제를 해결하기 위해 나오게된 기술이 바로 SPA(Single Page Application)이다. CSR(Client Side Rendering) 클라이언트측에서 렌.. 2022. 12. 16. this this 키워드 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다. 함수를 호출하면 arguments와 this가 함수 내부에 전달되는데 둘 다 지역 변수처럼 사용할 수 있다. 단, this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. 바인딩이란 식별자와 값을 연결하는 과정을 의미한다. this 바인딩은 this(키워드로 분류되지만 식별자 역할을 한다)와 this가 가리킬 객체를 바인딩하는 것이다. 전역에서 this는 전역 객체 window를 가.. 2022. 11. 16. 브라우저의 렌더링 과정 브라우저의 렌더링 과정 HTML, CSS, JS, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 결합해서 렌더 트리를 생성한다. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환하여 실행한다. 이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있다. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합된다. 렌더 트리를 기반으로 HTML 요소의 레이아웃을 계산하고 브라우저 화면에 HTML 요소를 페인팅한다. 요청과 응답 브라우저의 핵심 기능은 필요한.. 2022. 11. 16. 이전 1 2 3 4 5 다음 728x90
