Next.js 배포 방법 크롬 개발자 도구(F12)에서 Network 탭을 열고 refresh(F5)를 하면 아래 resource 용량이 나온다. 6.5MB는 매우 큰 용량이다. 그리고 콘솔창을 보면 개발에 필요한 여러 정보가 출력이 되는데 이건 비효율적이고 보안상의 문제가 있을 수 있다. 따라서 용량을 더 작게 줄이고 불필요하나 메시지를 출력하지 않는 실서버에 최적화된 버전이 필요하다. { "name": "next-app", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "..

Next.js 기본 구조 Next.js에서 기본적으로 제공되는 샘플 앱이 존재할 것이다. /src/app/layout.tsx - 기본적인 웹페이지의 골격을 구성한다. // /src/app/layout.tsx import './globals.css' import type { Metadata } from 'next' import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) export const metadata: Metadata = { title: 'Create Next App', description: 'Generated by create next app', } export default function Root..

Next.js 설치 및 실행 순서 IDE 준비 Node.js 설치 Next.js 프로젝트 설치 아래 4개 중 자신의 상황에 맞는 코드 입력하여 실행한다. 나는 pnpm을 기존에 설치해둬서 pnpm으로 처리했다. npx create-next-app@latest yarn create next-app pnpm create next-app bunx create-next-app 프로젝트 세팅 여기서 중요한 것은 Next.js 13 버전에서 새로 나온 App Router를 Yes로 해주는 것이다. 나머지는 사용 유무에 따라 선택해주면 된다. 나는 마지막 것을 제외하고 모두 Yes 선택. What is your project named? my-app Would you like to use TypeScript? No ..

Next.js - React 기능을 기반으로 한 Full Stack Web Application Framework Web Application - 웹앱을 만드는 도구라는 의미이다. Framework - 웹앱을 만드는 데 필요한 큰 틀은 Next.js가 이미 만들어뒀고 규칙에 맞게 코드를 작성하면 준수한 웹앱이 만들어진다는 의미이다. Full Stack - 프론트엔드, 백엔드 기능을 모두 가지고 있다. (프론트엔드 - React, 백엔드 - Express.js와 비슷한 형식의 시스템) -> React와 백엔드를 통합하기 위해 복잡하고 부자연스러운 과정 거치지 않아도 된다. SSR Next.js는 기본적으로 SSR을 지원한다. JS 기반의 애플리케이션은 JS로 동작하기 때문에 JS를 다운로드한 후에 브라우저..

1.2.1 Virtual DOM 리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것이다. 1.2.1.1 DOM이란? DOM은 Document Object Model의 약어로 객체로 문서 구조를 표현하는 방법이다. 주로 XML이나 HTML로 작성한다. 웹 브라우저는 이 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용한다. DOM은 트리 형태이기 때문에 CRUD가 가능하다. DOM은 과연 느릴까? DOM은 동적 UI에 최적화되어 있지 않다. HTML은 정적이며, 자바스크립트로 동적으로 만들 수 있다. 규모가 큰 웹앱에서 DOM에 직접 접근하여 변화를 주면 성능 이슈가 발생한다. 이를 두고 "요즘 자바스크립트 엔진은 매우 빠른 반면, DOM은 느리다"라고 한다. 하지만 실제로 DOM 자체는..

자바스크립트 관련 프레임워크들(Backbone.js, Derby.js, Ember.js, Ext.js, Knockback.js, Sammy.js, PureMVC, Vue.js)은 주로 MVC(Model-View-Controller) 아키텍쳐, MVVM(Model-View-View Model) 아키텍쳐를 사용하며, AngularJS는 MVW(Model-View-Whatever) 아키텍처로 애플리케이션을 구조화한다. MVC, MVVM, MVW 등과 같은 여러 구조가 지닌 공통점은 모델(Model)과 뷰(View)가 있다는 것이다. 모델은 애플리케이션에서 사용하는 데이터를 관리하는 영역, 뷰는 사용자에게 보이는 부분, 컨트롤러는 프로그램이 사용자에게서 어떤 작업을 받으면 모델 데이터를 조회하거나 수정하고, 변..