왕가's history

명령어를 통해 프로젝트 생성하게 되면 사진과 같은 구조를 가지게 될 것입니다. 추가 옵션으로 사진과 같이 설정해 주었습니다. Next 13 버전부터 생긴 app router를 사용해보려고 합니다. (이전 버전 까지는 보통 pages를 활용하여 라우팅을 했습니다.) npx create-next-app@latest 이렇게 생성된 폴더 구조에서 생성된 파일을 보겠습니다. Layout.tsx 타입스크립트로 설치했기 때문에 tsx파일입니다. 해당 파일은 기본적이 프로젝트, 웹페이지의 골격이라고 보시면 됩니다. _app이랑 비슷한가? 싶습니다. import './globals.css' import type { Metadata } from 'next' import { Inter } from 'next/font/goo..

공홈을 보면서 하나씩 정리해 나가보려 합니다. 그 시작인 Next.js 설치부터 시작해 보겠습니다. https://nextjs.org/ 일단 제일 먼저 Node.js가 설치 되어있어야 합니다. React개발자면 당연히 설치 돼있을 것으로 생각 듭니다.(16.8 버전 이상이라고 안내되어 있네요) 자동설치 npx create-next-app@latest 위 명령어를 입력하면 제일 최신 버전의 Next.js가 설치됩니다. What is your project named? my-app Would you like to use TypeScript? No / Yes Would you like to use ESLint? No / Yes Would you like to use Tailwind CSS? No / Yes W..

next.js는 React 개발자라면 반드시 알아야 하는 프레임 워크입니다. 순수 React는 오히려 안 쓰고, React에 Next.js를 얹어서 주로 개발환경을 구성한다고 보시면 됩니다. 그러면 Next.js란 무엇인지부터 해서 같이 공부를 하려고 합니다. 이미 프로젝트 진행할 때 계속해서 사용하고는 있지만, 딱히 공부를 해서 알고서 사용하기보다는 그때그때 맞춰서 찾아보고 했던 터라 이번기회에 정리할 겸 공부할 겸 겸사겸사 하고 싶었습니다. Next.js란? React로 만든 서버 사이드 렌더링(SSR) 프레임 워크입니다. 정확히는 SSG에 구분될 것입니다. CSR인 React환경에서 SSR기능을 구사할 수 있게 해 줍니다. SSR의 특색을 구현할 수 있기 때문에, 만약 리소스가 큰 페이지가 있거나,..