NextJS

해당 블로그는 Udemy Max 강사의 NextJS 강의 중 일부를 요약한 내용입니다. - https://www.udemy.com/course/nextjs-react-the-complete-guide/?couponCode=KEEPLEARNING 사용자가 "/some-route" 경로로 요청을 보냈다고 가정해보자. 순수 React에서 동작 방식 Response로 비어있는 HTML 파일과 JavaScript 코드를 전달하고, JavaScript 코드가 클라이언트에서 실행된다. JS 코드가 실행되면서 서버에서 데이터를 가져와 화면상에 무언가를 나타나게 된다. 랜더링이 클라이언트에서 시작되며, DOM 구조 이외에 필요한 모든 데이터는 클라이언트에서 다시 서버로 요청을 보내어 Load되기 때문에 시간이 걸릴 수 ..

1. 아래의 명령어를 입력하여, SQLite 패키지를 설치한다. npm install better-sqlite3 2. Root 경로에 파일을 생성하고 아래의 코드를 입력한다. 파일 이름은 "initdb.js"이라고 지었다. const sql = require('better-sqlite3'); const db = sql('meals.db'); const dummyMeals = [ { title: 'Juicy Cheese Burger', slug: 'juicy-cheese-burger', image: '/images/burger.jpg', summary: 'A mouth-watering burger with a juicy beef patty and melted cheese, served in a soft b..

바닐라 React 바닐라 React를 사용한다면 Client Component를 사용하는 것이다. React는 순수 Client 사이드 라이브러리이기 때문이다. NextJS NextJS는 풀스택 프레임워크이다. 프론트엔드뿐 아니라 백엔드를 가지고 있으며, 코드 또한 백엔드에서 실행된다. NextJS에서 모든 pages, layouts, components는 Server에서 랜더링된다. 이것이 React Server Components라고 불리는 이유이다. 서버 컴포넌트는 NextJS에서 기본 값으로 적용된다. 즉, NextJS에서 Component를 만들면 브라우저에서 실행되지 않고, 서버에서 실행된다는 것이다. 따라서 서버 컴포넌트에 console.log를 작성해보면 브라우저에서 실행되는 것이 아니기..

NextJS에서는 최적화된 이미지 컴포넌트를 별도로 제공한다. https://nextjs.org/docs/pages/api-reference/components/image Components: | Next.js Optimize Images in your Next.js Application using the built-in `next/image` Component. nextjs.org 상기 링크로 들어가보면 굉장히 많은 옵션이 존재하는데 해당 블로그에서는 필수 사용법만 정리하겠다. 기본 사용법 상기는 일반적인 img 태그 적용예시이다. 상기는 Next 이미지 컴포넌트를 적용한 예시이다. import에 'next/image'가 추가된 것을 확인할 수 있고, 'src' 구분이 삭제 되었다. 일반적으로 별도의 ..

NextJS14에서는 상기 이미지와 같이 [slug]라는 Dynamic Routes를 사용하였을 때 아래와 같은 문법으로 Route Parameter를 사용할 수 있다. export default function BlogPostPage({ params }) { return ( Blog Post {params.slug} ); }

NextJS14에서는 아래와 같은 예약된 파일 이름들이 있다. Reserved Filenames As you already learned, there are some reserved filenames when working with NextJS. Important: These filenames are only reserved when creating them inside of the app/ folder (or any subfolder). Outside of the app/ folder, these filenames are not treated in any special way. Here's a list of reserved filenames in NextJS - you'll, of course, lea..

NextJS에서 아래와 같이 anchor tag를 사용하여 페이지 이동 할 수 있다. 하지만, 이상적인 방법이 아니다. anchor tag를 사용하여 페이지 이동을 할 경우, 크롬 브라우저의 왼쪽 상단에 있는 새로고침 버튼이 잠깐 X로 변경되었다가 다시 돌아온다. 이는 완전히 새로고침된다는 신호이다. 새로고침이 된다는 것은 새로운 페이지가 backend에서 다운로드 된다는 신호이다. 이는 더 이상 SPA가 아니라는 뜻이다. 앞서 NextJS에서는 콘텐츠가 BackEnd에서 랜더링 된다는 것을 배웠다. 하지만, NextJS의 가장 훌륭한 점은 URL를 입력하는 것과 같이 처음 페이지를 방문할 때는 서버에서 랜더링 되고, 이미 페이지에 진입해 있다면 NextJS에서 제공하는 Link를 사용하여 SPA방식으로..

NextJS vs 순수 React 페이지 소스코드 비교 NextJS 14 프로젝트를 생성하고 'npm run dev'로 실행해보자. 그 후 페이지 소스를 확인해보면 아래의 스크린샷과 같이 실제 소스 콘텐츠를 볼 수 있다. 이는 화면에 표시는 정보가 그대로 NextJS에 나타난 다는 것이다. 하지만, 순수 React 앱에서는 이렇게 나오지 않는다. CRA 후 소스코드를 검사해보면 아래와 같이 빈 페이지와 스크립트만 나오며 실제 콘텐츠를 나타나지 않는다. 이러한 차이점이 발생하는 이유를 알기 위해서는 NextJS와 순수 React간의 랜더링 과정 차이를 이해해야 한다. 순수 React의 랜더링 과정 순수 React는 클라이언트 사이드 랜더링을 활용한다. 즉, React는 클라이언트 사이드 자바스크립트 라이브..

NextJS 프로젝트 생성 NextJS의 공식 홈페이지에 접속하면 최신 버전의 NextJS를 생성할 수 있는 명령어가 나온다. 터미널에서 프로젝트 생성을 원하는 폴더로 이동 후 'npx create-next-app@latest'를 입력하자. 입력하면 아래의 그림과 같이 Project 이름을 설정하는 화면이 나타난다. 원하는 이름을 설정하자. 프로젝트 설정을 하면 Yes or No로 몇가지 질문이 나타난다. 다음 타입스크립트 설정을 할 것인가 물어본다. (Yes) ESLint를 설정 할 것인가 물어본다. (Yes) Tailwind CSS를 설정할 것인가 물어본다. (NextJS 자체에 다양한 스타일이 존재하여 Tailwind에 전문가가 아니라면 비추천, Yes) 'src/' directory를 사용할 것인..

NextJS의 장점 NextJS는 React로 풀 스택 어플리케이션을 빌드 할 수 있게 만들어 준다. 이 과정에서 데이터 fetch와 렌더링은 더 쉽고 효율적으로 변한다. 파일 시스템 라우팅(File-based Routing)의 도움으로 경로를 설정할 수 있다. 이는 추가적인 코드 기반 구성이나 추가적인 패키지가 필요 없다는 것이다. NextJS가 서버에 있는 모든 페이지와 구성 요소를 렌더링한다는 것이다. 이말은 화면에 전송되는 콘텐츠, HTML 문서 등 최종적으로 화면에 그려지는 모든 콘텐츠를 이미 포함한다는 것이다. 이는 SEO에도 강점을 가진다. 1년 7개월차 프론트엔드 개발자의 일기 2023년 10월 26일 NextJS 14가 출시 되었다. 2023년 한해는 NextJS 13으로 SI 프로젝트를..