React/Next.js (3) 썸네일형 리스트형 Next.js 간단한 웹사이트 만들기 앞서 정리한 Next.js의 기본 정리를 기반으로 직접 사용해 간단한 웹사이트를 만들어 보자 첫 페이지 만들기 웹사이트는 세 페이지로 구성되어 있으며 시작 페이지 하나와 뉴스 목록을 보여주는 뉴스 페이지, 뉴스의 세부 정보를 보여주는 페이지로 구성되어 있다. 뉴스를 클릭하면 해당 뉴스의 내용이 전체 페이지에 뜨게 된다. 이런 구조를 만들려면 pages 폴더에서 세 개의 파일을 만들어야 한다. index.js : 루트 경로의 페이지 news.js : domain/news 요청에 해당하는 페이지 something.js : 하나의 뉴스를 클릭하면 보이는 뉴스 상세 페이지 여기서 파일 이름이 중요하다. index의 경우 특수해서 / 뒤에 아무것도 없을 때 해당 파일을 불러오지만, 다른 파일 이름은 경로의 이름으.. Next.js Data fetching Next.js에서 Data fetching Next.js에서 데이터를 가져오는 방법은 여러 가지가 있으며, 애플리케이션 사용 용도에 따라 방법을 선택해 사용하면 된다. 보통 리액트에서는 데이터를 가져올 때 useEffect 안에서 가져온다. 하지만 Next.js에서는 다른 방법을 사용해 가져온다. getStaticProps : Static Generation으로 빌드(build)할 때 데이터를 불러온다. (미리 만들어 준다.) getStaticPaths : Static Generation으로 데이터에 기반하여 pre-render 시 특정한 동적 라우팅을 구현한다. (예 : pages/post/[id].js) getServerSideProps : Server Side Rendering으로 요청이 있을 때 .. Next.js 기본 정리 Next.js 란 ? 리액트의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 간단한 프레임워크이다. CSR의 경우 브라우저가 서버에 요청을 보내고 응답으로 들어온 JS를 다운로드한다. 그다음 브라우저는 리액트를 실행시켜 로딩이 끝나면 화면에 렌더링이 된다. 또한 로딩 도중에는 크롤링이 불가능하기 때문에 검색 엔진에 최적화되지 못한다. 반면 SSR의 경우 서버에서 렌더링 준비된 HTML 파일을 브라우저로 보내준다. 때문에 브라우저에서는 별도의 로딩 없이 바로 렌더링이 가능하다. HTML을 바로 렌더링 한 뒤 JS를 다운로드하고 리액트를 실행시킨다. 일반적으로 리액트로 개발할 때 SPA(Sing Page Application)을 이용하며 CSR(Client Side Rend.. 이전 1 다음
