nextJS
![[NextJs14] 글꼴 설정방법 ( google font )](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F8x3eW%2FbtsFoEKIF96%2Fky8KjZybcC6vceoZke9H2k%2Fimg.png)
[NextJs14] 글꼴 설정방법 ( google font )
NextJs에서 구글 폰트를 사용하기 위한 방법으로는 크게 두가지 정도가 있었다. 예를들어 배달의 민족의 JUA체를 사용한다고 생각해보자. 1. global.css 사용 처음에는 구글 폰트에서 제공하는 대로 HTML태그나 CSS를 넣어주는 방법이다. //global.css body { margin: 0; font-family: "Jua", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } // import "styles/globals.css"..
![[React] Deep Dive 모던 리액트(29) Next.js 서버 컴포넌트](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb5g3iJ%2FbtsEY9pKMej%2FVk18qnm4S3ea0CK4ZrfXpK%2Fimg.png)
[React] Deep Dive 모던 리액트(29) Next.js 서버 컴포넌트
리액트 서버 컴포넌트 리액트 18에서 도입된 리액트 서버 컴포넌트는 서버 사이드 렌더링과는 완전히 다른 개념이다. 둘다 '서버'라는 단어가 들어있는데 어떤게 다른 것인지 알아보자! 리액트의 컴포넌트라는 개념에 대해 한번 더 생각해보자. 리액트의 모든 컴포넌트는 클라이언트에서 작동하며, 브라우저에서 JS 코드 처리가 이루어진다. 웹사이트를 방문하면 리액트 실행항 코드를 다운로드하고 리액트 컴포넌트 트리를 만든 후 DOM에 렌더링한다. 서버 사이드 렌더링의 경우 서버에서 DOM을 만들어오고, 클라이언트에서 만들어진 DOM을 기준으로 하이드레이션을 진행한다. 이런 구조는 지금까지 Next.js,리액트에서 제공하는 서버사이드 렌더링 흐름이었다. 해당 구조의 한계점은 무엇일까? 1. JS번들크기가 0인 컴포넌트를..
![[React] Deep Dive 모던 리액트(22) Next.js 개발환경 구축](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FciaLTN%2FbtsEkC7sUfl%2FW0yfDTHSls3h7KrOr4G2A1%2Fimg.png)
[React] Deep Dive 모던 리액트(22) Next.js 개발환경 구축
create-react-app과 create-next-app은 리액트 애플리케이션과 Next.js 애플리케이션을 손쉽게 만들 수 있는 CLI도구이다. 이번에는 직접 프로젝트 파일들을 하나씩 설정해보며 개발환경에 대해 이해해보자. cra는 2023년 이후 유지보수되지 않을 가능성이 크다고 한다. CRA개발자 팀이 리액트 애플리케이션을 만드는 보일러플레이트가 아닌 리액트 기반 프레임워크를 제안하는 런처 형태로 변경될 예정이라고 한다. create-necxt-app 없이 하나씩 구축해보기 모든 Node.js프로젝트는 package.json을 만드는것으로부터 시작한다. 폴더를 하나 만들고 아래 명령어를 통해서 package.json을 만들어 보자. npm init (단순하게 프로젝트 이름만 설정해주고 나머지는 ..