NextJS
1.[NextJS] 시작하기/프로젝트생성/기초/파일구조
라이브러리는 "내가" 불러와서 "내가" 사용하는 것프레임워크는 내 코드를 불러온다.NextJS 프로젝트를 생성하면 index.js 파일이 없다.하지만 React 프로젝트를 생성하면 ReactDOM.render() 이 부분이 항상 있다.리액트에서는 언제 React를 부를
2.[NextJS] 서버사이드 렌더링(SSR)
클라이언트 사이드 렌더링 CSR : React화면에 보이는 모든 UI를 클라이언트의 브라우저에서 만든다.html을 불러오면 그 후에 자바스크립트와 리액트 코드를 가져온다.즉 html만 불러왔을때는 화면에 아무것도 렌더링되지않고 흰화면이 뜬다.개발자도구>네트워크에 들어가
3.[NextJS] 버전 13 변경점, 업데이트 방법
참고https://velog.io/@rrrrrrrrrrrocky/Next.js-13%EB%B2%84%EC%A0%84-%ED%9B%91%EC%96%B4%EB%B3%B4%EA%B8%B0
4.[NextJS] Router from next/navigation
Next에서도 리액트와 마찬가지로 를 사용해서 라우팅을 시도하면 전체 애플리케이션이 새로고침되어서 속도가 느려진다.
5.[NextJS] CSS Module, Styles JSX
globals.css모든 페이지에 공통으로 적용특정 페이지에만 import 하여 class를 주고 싶다면 이름.module.clss 파일 생성components/NavBar.module.css사용할 때는 className에 {import 한 이름. 클래스명}으로 작성하
6.[NextJS] Custom App 전역적인 스타일링
jsx에 global을 추가하면 전역적으로 a태그가 적용된다./about 페이지로 이동하면 위의 a태그의 css는 적용되지않는다. 페이지가 바뀌면 렌더링 되는 컴포넌트가 달라지기 때문에 이 global은 적용되지않는다??리액트에서는 고려할 필요가없지만 넥스트에서는 고려
7.[NextJS] 자주쓰는 패턴, Layout
NextJS 최신버전에서는 프로젝트를 생성하면 app 폴더에 layout.js가 자동으로 생성된다. 그리고 그 안에는 이렇게 메타데이터를 설정하는 코드가 기본으로 들어있다.강의에서는 components폴더에 Seo.js를 따로 만들어서 next/head에서 제공하는 H
8.[NextJS] Fetching Data
<img>대신에 <Image>를 갖고있다. 하지만 이번강의에서는 다루지않는다.https://nextjs.org/docs/pages/api-reference/components/image사용할 DBhttps://www.themoviedb.or