072DATA

Next.js에서 라우팅Next.js에서 페이지 이동을 하는 방법은 파일(폴더) 기반 라우팅임먼저 구조와 요소에 대해서 알아야 함구조와 요소Tree계층 구조를 시각적으로 보기 위한 규칙 (위 -> 아래)임DOM Tree도 같은 구조를 가짐, 큰 틀SubTreetree의 한 부분임. root부터 시작하고 leaf들에 이르기까지의 범위Roottree 또는 subtree의 첫 번째 부분임. root layout처럼 가장 첫 번째 노드, 요소Leafchildren이 없는 마지막 노드, 요소URL 관련 용어 정리URL은 크게 도메인과 Path 부분으로 나뉨URL Segment슬래시로 분류된 URL path의 한 부분임URL Path, Pathname앞에 있는 도메인을 제외한 뒷 부분에 있는 전체임File Syst..

Next.js: High-Quality 웹 애플리케이션High-Quality란?성능SSR(서버 사이드 렌더링) 및 SSG(정적 사이트 생성)를 통해 초기 로드 시간 단축코드 스플리팅과 이미지 최적화로 런타임 성능 향상코드 스플리팅 예시*import React, { Suspense, lazy } from 'react';const LazyComponent = lazy(() => import('./LazyComponent'));function App() { return ( Loading...}> ); } export default App;SEO ->  Search Engine Optimization (웹..

오늘은 TypeScript를 학습하는 과정에서 TodoList를 만들었으며 그 과정을 기록해도록 하겠습니다. 프로젝트 세팅 TypeSript 프로젝트 생성은 생략하며, 먼저 API 요청을 하기위해서 JSON 서버를 Install 합니다npm install json-server  설치를 완료한 뒤 root 경로에 db.json 파일을 추가하여 키와 값을 입력합니다, 형식은 아래와 같습니다!{ "todos": [ { "id": "1", "text": "할 일 1", "completed": false } ]}  또 원할한 프로젝트 구현을 위하여 json-server 명령어를 .pakage.json의 scripts에 추가합니다 "scripts": { //... ..

타입이란?타입은 값의 속성이나 메서드를 참조하는 방법 주요 타입boolean: 참/거짓을 표현number: 숫자 값string: 문자열 값Array: 배열object: 객체any: 아무거나 -> 치트키 같은 존재 사용하면 사실상 js가 되어버림커스텀 타입 선언타입은 기본 제공 타입 외에도 사용자 정의 타입을 선언할 수 있음 type Profile = { id: string; name: string; age: number; isMarried: boolean;} 함수의 타입 선언함수의 매개변수와 반환 값에도 타입을 선언할 수 있음 function add(a: number, b: number): number { return a + b;}const sum: number = add(1, 2);  타입 별..

타입스크립트란?타입스크립트 -> 자바스크립트를 기반으로 한 정적 타입 언어  타입스크립트의 주요 특징  정적 타입 시스템 -> 프로그램이 실행되기 전에 모든 변수와 함수의 타입을 확인하고 고정하는 방식 컴파일 타임에 모든 변수와 표현식의 타입을 확인하고 고정하여 런타임 오류를 방지함함수의 매개변수와 반환 값에 타입을 명시하여 잘못된 타입의 데이터가 전달될 경우 컴파일러가 이를 감지하고 오류를 발생시킴자바스크립트의 상위 집합:자바스크립트의 모든 기능을 포함하고 있기에 자바스크립트 코드가 타입스크립트에서 그대로 동작함자바스크립트로 트랜스파일되며 모든 브라우저에서 실행될 수 있는 자바스크립트 파일을 생성함향상된 개발 경험:코드 자동 완성, 실시간 오류 감지, 리팩토링 지원 등 다양한 도구를 통해 개발 경험을 ..