전체 > 분류 전체보기 (68) NextJs 09: Next.js 글입력 작성과 캐시처리 안녕하세요. 각성한 데브키라입니다. JSON Server를 사용하여 Next.js에서 글 입력 기능을 구현하는 방법에 대해 설명하겠습니다. JSON Server는 REST API를 모의로 구현할 수 있는 간단한 방법을 제공합니다. 이를 통해 개발 중인 프런트엔드 애플리케이션에 백엔드가 없어도 데이터를 생성, 읽기, 업데이트, 삭제(CRUD)할 수 있습니다. fetch 함수에서 사용할 수 있는 캐시 옵션들은 다음과 같습니다. 이 옵션들은 요청 시의 캐싱 동작을 제어하는 데 사용됩니다. 이 포스팅에서는 no-store옵션을 사용하였습니다. 1. default: 브라우저의 기본 캐시 정책을 따릅니다. 명시적으로 캐싱 동작을 설정하지 않을 때 사용되는 기본값입니다.2. no-store: 어떠한 캐시도 사용하지 .. NextJs 08: Next.js를 활용한 동적 웹 콘텐츠 글보기 화면 실습 안녕하세요, 각성한 데브키라입니다. 현대 웹 개발의 핵심은 사용자 경험입니다. 이를 위해 Next.js를 활용한 동적 웹 콘텐츠 구현 방법을 실습을 통해 공유합니다. Next.js는 빠르고 유연한 웹 애플리케이션 개발을 가능하게 합니다.1. 서버의 구성VSCode의 터미널에서 9999번 포트를 사용하여 서버를 실행하였습니다. 서버가 실행되면, 자동으로 db.json 파일이 생성됩니다. 실습을 위해, 이 파일에 popics라는 항목을 추가하였습니다.또한, Node.js는 3000번 포트로 실행되었습니다.파일명: db.json{ "topics": [ {"id": 1, "title":"블랙핑크", "body":"블랙핑크 good!"}, {"id": 2, "title":"아이브", "body":"아.. NextJs 07: 서버컴포넌트 vs 클라이언트컴포넌트 안녕하세요, 각성한 데브키라입니다. 오늘은 Next.js에서 제공하는 서버 컴포넌트와 클라이언트 컴포넌트의 차이점에 대해 알아보고, 각각의 상황에서 어떻게 활용하는 것이 가장 효과적인지에 대해 이야기해보겠습니다.Next.js의 서버 컴포넌트특징렌더링 방법: 서버가 HTML을 렌더링 하여 클라이언트에 전송합니다.자바스크립트 요구사항: 클라이언트가 자바스크립트 파일을 받지 않으므로, 브라우저에서 자바스크립트가 비활성화되어도 페이지가 제대로 기능할 수 있습니다.사용 사례: 사용자 상호작용이 없는 정보 페이지에 주로 사용됩니다.장점1. 빠른 초기 로딩 속도: 서버에서 미리 렌더링된 HTML로 인해 초기 페이지 로딩이 빠릅니다.2. SEO 최적화: 서버 렌더링 페이지는 검색 엔진에 의해 더 잘 인식됩니다.3. 클.. NextJs 06: npx와 json-server 사용하기 안녕하세요. 각성한 데브키라입니다. 웹 애플리케이션을 개발할 때 백엔드 개발이 완료되기 전에 프론트엔드 개발을 진행해야 하는 경우가 있습니다. 이런 경우, "가짜" 데이터를 제공할 수 있는 간단한 서버가 필요합니다. json-server는 이 목적에 매우 적합한 도구입니다. 이 글에서는 json-server를 사용하여 간단하게 REST API를 구축하는 과정을 안내합니다.json-server란 무엇인가?json-server는 JSON 파일을 데이터베이스로 사용하여 가짜 REST API를 생성할 수 있게 해주는 Node.js 라이브러리입니다. 설치가 쉽고 몇 줄의 명령어로 서버를 시작할 수 있습니다.설치 및 실행npx를 사용하여 json-server를 설치하지 않고 실행할 수 있습니다. npx는 Node.. NextJs 05: 넥스트Js에서 정적 자원 사용하기 안녕하세요. 각성한 데브키라입니다. NextJs에서 정적 자원 즉 이미지 파일이나 미리 정의된 데이터파일 또는 템플릿 파일을 사용할때 public폴더를 사용하면 정적데이터를 사용하실수 있습니다.정적 파일과 동적 파일은 웹 개발에서 자주 언급되는 개념입니다. 이 둘의 차이점과 정적 파일을 사용하는 이유를 아래에서 설명하겠습니다.[ 정적 파일(Static Files)과 동적 파일(Dynamic Files)의 차이점 ]정적 파일(Static Files)- 정의: 서버에 미리 저장된 파일로, 서버에서 추가적인 처리 없이 그대로 클라이언트에 전달됩니다. HTML, CSS, JavaScript 파일, 이미지 등이 여기에 해당합니다.- 특징: 사용자의 요청이나 사용자의 입력에 따라 내용이 변경되지 않습니다. 모든 .. NextJs 04: Link태그와 <a> 태그의 차이점을 이해하고 라우팅 설정까지 안녕하세요. 각성한 데브키라입니다. 웹 개발을 하다 보면, 사용자를 한 페이지에서 다른 페이지로 이동시키는 링크를 자주 사용합니다. 이때, Next.js 프레임워크를 사용하는 경우 Link 컴포넌트와 일반 HTML 태그 중 어떤 것을 사용해야 할지 고민할 수 있습니다. 이 블로그 포스트에서는 두 방식의 주요 차이점을 살펴보고, 어떤 상황에서 각각을 사용하는 것이 좋은지 알아보겠습니다. 웹 애플리케이션의 사용성과 퍼포먼스를 최적화하는 것은 개발자에게 중요한 과제 중 하나입니다. Next.js는 이러한 과제를 해결하기 위해 효율적인 라우팅 시스템을 제공합니다. 특히, Link 컴포넌트를 통해 클라이언트 사이드 라우팅을 지원하며, 이는 전통적인 태그 방식과 비교했을 때 몇 가지 이점을 제공합니다.Next.. NextJs 03: NextJs서버 배포버전 빌드 안녕하세요. 각성한 데브키라입니다. 웹 개발 과정에서 개발 버전과 배포 버전의 차이는 사용자 경험과 웹사이트 성능에 직접적인 영향을 미칩니다. 개발 버전은 주로 개발자가 코드를 작성하고 테스트하는 과정에서 사용되며, 여러 디버깅 정보와 추가적인 리소스가 포함되어 있어 파일 크기가 큽니다. 반면, 배포 버전은 사용자에게 제공되는 최종 제품으로, 최적화를 통해 파일 크기를 줄이고 로딩 시간을 단축시키는 것이 중요합니다.배포버전 빌드의 중요성개발용 소스버전에서는 네트워크 리소스가 6.2MB를 차지하는 반면, 최적화된 배포용 서버 빌드는 단 330KB로 크게 줄어듭니다. 이 차이는 사용자가 웹사이트에 접속할 때 빠른 로딩 시간을 제공하고, 서버 부하를 줄이는 데 결정적인 역할을 합니다. 따라서, 개발 과정이 .. NextJs 02: NextJs프로젝트 불필요한 파일제거 안녕하세요. 각성한 데브키라입니다. Next.js를 처음 설치하면, 실제 프로젝트에서 사용하지 않을 수 있는 여러 샘플 파일들이 포함되어 있습니다. 이러한 불필요한 내용들을 제거하여 프로젝트를 깔끔하게 정리한 뒤, 최적화된 상태로 Next.js를 시작하는 방법을 알아보겠습니다.[ layout.js 원본 ]import { Inter } from "next/font/google";import "./globals.css";const inter = Inter({ subsets: ["latin"] });export const metadata = { title: "Create Next App", description: "Generated by create next app",};export default func.. 이전 1 ··· 3 4 5 6 7 8 9 다음
