Next.js
1.[NextJS] NextJS란 무엇이며, 왜 사용하는가?
NextJS란? NextJS는 React 프레임워크의 확장판이며, React 기반의 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우팅 등을 쉽게 구현할 수 있도록 도와주는 도구이다. NextJS의 필요성 NextJS는 클라이언트 측 단일 페이지
2.[NextJS] 페이지 & 파일 기반 라우팅
페이지 & 파일 기반 라우팅 파일 기반 라우팅 Next.js를 사용하면 애플리케이션의 다양한 페이지를 파일로 관리할 수 있다. 각 페이지는 page.js 라는 파일에 정의된다. 이 파일은 Next.js에게 페이지를 렌더링해야 한다는 것을 알려준다. 이것은 Next.
3.[NextJS] CSS Modules, Image 컴포넌트
CSS Modules 사용하기 Next.js에는 .module.css 확장자를 사용하는 CSS 모듈이 내장되어 있다. 이처럼 .module.css 를 확장자로 하는 파일을 추가하면 그 파일로부터 객체를 불러올 수 있고 이는 기본 빌드 프로세스 및 개발 서버에 의해
4.[NextJS] Server Component vs Client Component
CSR vs SSR Client-Side Rendering (CSR) 클라이언트 측 렌더링은 웹 페이지의 초기 요청 시 서버가 최소한의 HTML, CSS 및 JavaScript만 제공하고, 그 이후에 JavaScript가 실행되어 동적으로 콘텐츠를 가져오고 렌더링
5.[NextJS] SQLite 데이터베이스 설정, 데이터 불러오기, 오류 처리하기
📚 SQLite 데이터베이스 설정하기 1. better-sqlite3 설치 2. initdb.js 설정 3. initdb.js 실행 initdb.js 를 실행하면 meals.db 가 생성되고, 이는 사용할 SQL Lite 데이터베이스이다. 📚 NextJS
6.[NextJS] 이미지 피커 컴포넌트 만들기
📚 커스텀 이미지 피커 입력 컴포넌트 onClick 의 값으로 설정할 수 있는 이벤트핸들러는 서버 컴포넌트에서 사용할 수 없다. 클릭과 같은 상호작용은 브라우저, 클라이언트 컴포넌트에서 이루어지기 때문에 use client 지시어를 사용해 클라이언트 컴포넌트로 지정
7.[NextJS] 양식 제출 처리, 데이터베이스 저장하기, 양식 제출 상태 관리, 서버 액션 응답
📚 양식 제출 처리를 위한 서버 액션 form의 submit 제어는 기존의 리액트와 같이 form에 submit 속성을 추가하고 함수를 정의해 form이 제출될 때 실행하는 방식을 사용할 수도 있지만, NextJS의 경우 백엔드와 프론트엔드를 모두 갖고 있는 풀스택
8.[NextJS] 캐싱 구축 및 이해, 캐시 유효성 재확인 트리거, 메타데이터 추가
📚 NextJS 캐싱 구축 및 이해 개발 환경을 배포 환경으로 변경하기 위해 개발 서버를 종료하고, 다른 터미널에 npm run build 명령어를 입력하여 NextJS 어플리케이션이 배포 환경에서 동작할 수 있도록 준비한다. npm start 명령어로 최적화된