javascript/nextjs (6) 썸네일형 리스트형 [nextjs13] fetch API 무작정 fetch 메서드를 써보다가 뭔가 이상해서 공식 문서를 찾아봤다. https://nextjs.org/docs/app/api-reference/functions/fetch Functions: fetch | Next.js Using App Router Features available in /app nextjs.org nextjs 13 버전에서는 getStaticProps, getServersideProps 같은 불편한 표기가 사라졌다. 서버로부터 데이터를 가져오는 방식이 fetch API를 경유하도록 일관된 방식으로 변경되었으며, cache / next 옵션을 통해 기존 함수에 대응되는 기능을 구현할 수 있도록 변했다. force-cache / default: getStaticProps에 대응 no.. [nextjs] pre-rendering & getStaticProps · getServerSideProps Pre-Rendering 리액트 프레임워크를 이용하여 만들어진 웹페이지는 하나의 html 파일을 공유한다. index.html 파일은 body 내에 id가 'root'인 div 태그를 하나 가지고 있는데, React.createPortal을 사용하지 않는 이상 리액트에서의 모든 렌더링은 root 태그 안에서 수행된다. 따라서 리액트 기반 사이트의 초기 페이지 구성은 매우 단순하다. 에 'react' 라이브러리를 통해 관리되는 virtual DOM이 반영된다는 것은 알겠는데, 위의 는 무엇일까? 리액트 기반 페이지는 자바스크립트에 크게 의존한다. 기본적으로 react 라이브러리는 순수 자바스크립트 기능을 통해 DOM을 구성하며, 해당 내용을 react-dom 라이브러리를 통해 실제 웹사이트에 반영한다. 이.. [nextjs] File system routing https://nextjs.org/learn/basics/data-fetching nextjs 프레임워크가 리액트와 차별화되는 특징 중 하나는 서버측에서 페이지를 일부 생성하여 사용자에게 전달할 수 있다는 점이다. 이때 리액트에서 라우팅이 react-router 라이브러리에 의존하고, 및 컴포넌트에 의해 수행되었던 것과는 달리, nextjs는 파일 시스템 라우팅을 기본적으로 채택한다. 이 시스템에 대해 알아보자. nextjs의 페이지 nextjs는 파일 시스템 라우팅을 지원하며, 모든 페이지 컴포넌트들은 pages 폴더 내부에 존재한다. 파일 시스템 라우팅은 파일 시스템 상의 경로에 기반하여 사이트의 경로를 지정하는 방식으로, 웹사이트의 경로 ( 보통 path로 표현 ) 와 서버의 파일 시스템 상 상대 .. [nextjs] _app · _document · _error nextjs에는 이름 앞에 _ 이 붙는 특별한 컴포넌트들이 존재한다. _app · _document · _error 과 같은 컴포넌트들이 여기에 속하는데, 이들은 nextjs에서 기본적으로 제공하는 기능을 개발자의 필요에 따라 일부 변경해야하는 경우에 사용되며, 각각 페이지 초기화, html 문서 구조, 에러 페이지를 커스터마이징할 때 사용된다. 모든 파일은 pages/ 폴더 바로 안에 위치한다. _app https://nextjs.org/docs/advanced-features/custom-app _app.js 파일은 모든 페이지 컴포넌트에 대해 적용되어야 하는 요소를 초기화할 때 사용된다. 만약 해당 파일이 존재한다면, 모든 페이지 컴포넌트에 대해 _app 파일에 정의된 여러 설정들이 적용된다. 예컨.. [nextjs] nextjs에서 bootstrap 사용하기 https://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com 웹페이지의 디자인이 필요할 때 css 을 이용하여 모든 요소를 제작하는 것도 좋은 방법이겠지만, 해당 작업에 시간을 많이 투자할 수 없거나, css 및 브라우저 환경간의 차이를 반영한 디자인에 익숙하지 않다면 차라리 이미 존재하는 툴을 이용하는 것이 나을 것이다. 이때 부트스트랩을 이용하면 프론트엔드 환경의 디자인을 간단하게 처리할 수 있다. 부트스트랩은 반응형 + 모바일 디자인을 위한 css 및 js 파일을 제공하는 라이브러리로, 간단하게 웹을 디자인 하는 경우 미리 만들어져 있는 포맷을 가져다가 사용하면 되.. [nextjs] SSR을 위한 리액트 프레임워크 리액트는 상태 기반으로 렌더링 및 정보를 처리하기 위한 프레임워크로, 리액트 기반의 사이트는 하나의 html 파일에 대해 가상 DOM을 설정하고, 자바스크립트에 기반하여 해당 내용을 페이지 내에 반영하는 방식으로 동작한다. 리액트 페이지 주소를 처음 방문하면 클라이언트는 html 파일 하나와 가상 DOM을 구성하는 자바스크립트 객체를 얻게 된다. 이때 html 페이지는 사실상 아무런 내용도 가지지 않으므로 초기 페이지는 흰색을 띈다. 이후 가상 DOM이 자바스크립트 코드를 통해 실제 DOM과 대응되면, 우리가 아는 페이지를 볼 수 있게 되며, 리액트가 동작하게 된다. 이후 페이지는 갱신 없이 자바스크립트 코드 및 사용자의 반응에 따라 변경된다. 위와 같은 이유로 리액트 기반 페이지는 몇가지 제한점이 존재.. 이전 1 다음
