Study/Next (10) 썸네일형 리스트형 mongoDB next.js with MongoDB mongo DB 웹사이트에서 클러스터를 생성한다. 이 때 클러스트는 DB를 호스팅할 서버를 말한다. mongodb를 사용하기 위해 프로젝트에 mongodb 패키지를 설치한다(문서). yarn add mongodb # or npm install mongodb 설치된 mongodb 라이브러리를 통해 서버 측에서 동작하는 코드로 클러스터에 접근, 데이터를 저장하고 불러올 수 있다. 다시 웹사이트로 돌아가서, 처음 단계에서 생성한 클러스터의 connect 버튼을 클릭하면, 프로젝트와 클러스터를 연결할 방법을 선택할 수 있다. 화면에 체크된 옵션을 선택하면 connetion url을 확인할 수 있다. Security/Network Access 탭에서 DB에 접근 가능한 IP .. API route what is API route? 웹 사이트를 단순한 html 페이지 이상으로 만들기 위해서는 API가 필요하다. API는 웹 서버가 외부로 노출하는 URL을 말한다. 이 때 API는 사용자의 요청에 대해 html 페이지를 반환하는 것 이상의 역할을 한다. JSON 형식의 데이터로 응답 사용자의 데이터를 DB에 추가/삭제/수정 하는 등의 작업 후 그 결과로 응답 이 외에도 어떤 API를 구축하냐에 따라 다양한 작업을 수행할 수 있다. Next.js는 어플리케이션 내에 API를 구축할 수 있게 해주고, 어떤 요청이 들어왔느냐에 따라 다른 작업을 수행할 수 있게 해 준다. how to add api? pages 폴더 내에 api 폴더를 만든다. api 폴더 내에 생성하는 파일, 폴더명의 규칙은 pages 폴.. what is _document.js? before start _document.js에 대해 알아보기 전에, _app.js가 무엇이었는지 간단히 정리해 보자. _app.js는 next.js 어플리케이션의 shell(껍질)이다. // pages/_app.js import Layout from '../components/layout/layout'; import '../styles/globals.css'; function MyApp({ Component, pageProps }) { return ( ); } export default MyApp; next.js에 의해 는 자동으로 렌더링 해야 할 페이지 컴포넌트가 된다. 모든 페이지 컴포넌트에 적용해야 하는 스타일링, Head 태그 등을 여기에서 설정할 수 있다. 즉, 어플리케이션 html 페이지의 .. optimization with <head> & <image> head & meta html 페이지는 크게 ) } export default MyApp Head 태그는 jsx 코드 상에 위치하기만 하면 된다. 어디에 코드를 위치시켜야 하는지는 관계 없다. main page 뿐만 아니라, 모든 페이지 컴포넌트에서 Head 태그를 사용할 수 있다. jsx 문법을 이용해서 Head 컨텐츠를 dynamic value로 설정할 수 있다. 모든 페이지에 공통적으로 적용할 Head는 _app.js 파일에서 return 할 수 있다. next.js는 하나의 컴포넌트에 존재할 수 있는 여러 개의 Head를 하나로 병합하고, 이 과정에서 생길 수 있는 충돌도 해결해 준다. _document.js로 html 전체 틀 구성하기 document.js는 무엇이고, 언제 사용할까? image.. client side data fetching 언제 client side에서 data fetching을 할까? next.js를 사용한다고 해서 항상 모든 데이터를 미리 렌더링(pre-rendering) 해야 하는 것은 아니다. 아래와 같은 경우에는 사용자가 페이지에 방문했을 때 data fetching을 하는 것이 적절하다. 매우 잦은 빈도로 변경되는 데이터 ex) stock data 미리 데이터를 준비해서 화면에 렌더링하는 순간, 그 데이터는 구식이 된다. 사용자 개인에게만 특정되어있는 데이터 ex) 장바구니, 프로필 SEO와 관계 없음 대시보드 페이지의 부분적인 데이터 모든 데이터를 한 번에 받아오고 페이지를 준비하면, 서버에 부하가 생길 수 있음 client 측에서 데이터를 받아올 때에는 이전처럼 useEffect 훅을 사용할 수 있으며, ta.. pre-rendering data fetching & pre-rendering | React vs. Next React.js에서 데이터를 받아오는 방식과 문제점은 다음과 같다. useEffect 내부에서 필요한 데이터를 backend api에게 요청한다. 성공적으로 받아온 데이터를 state로 업데이트한다. 데이터를 화면에 보여준다. 결론 | 사용자는 html 코드와 js 코드를 한 번에 받아오고, js 코드가 실행되면 동적으로 html을 구성한다. 문제점 js가 실행되어야 데이터를 받아올 수 있다는 것은, 온전한 페이지를 보여줄 때 까지 시간 지연이 발생한다는 것을 의미한다. 뿐만 아니라 최초의 html 코드(page source에서 확인할 수 있는 html 코드)에는 동적으로 생성되는 데이터가 포함되어 있지 않기 때문에, S.. how useRouter works how it works 어떤 컴포넌트 내부에서 useRouter 훅을 사용하면, 그 컴포넌트는 두 번 렌더링 된다. 컴포넌트 함수가 JSX 코드를 첫번째로 렌더링 한 뒤에, useRouter를 실행시키기 때문이다. 따라서 컴포넌트가 첫번째로 렌더링 되는 시점에서는 router 데이터에 접근할 수 없는 상태이다. example export default function EventSlugPage() { const router = useRouter() const { slug } = router.query console.log(slug) if (!slug) return loading... const [selectedYear, selectedMonth] = slug const eventList = getEvent.. what is _app.js? _app.js import '../styles/globals.css' function MyApp({ Component, pageProps }) { return } export default MyApp next.js 프로젝트를 생성하면, pages 폴더 내에 _app.js라는 파일이 위와 같이 생성되어 있는 것을 알 수 있다. 이 파일은 root component 역할을 한다. 즉 page 컴포넌트를 렌더링하기 위한 입구가 되기 때문에, 모든 페이지에 공통으로 적용해야 할 코드를 이 파일에서 작성할 수 있다. example code // 1. _app.js import Layout from '../components/layout/layout' import '../styles/globals.css' func.. 이전 1 2 다음
