next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Defining Routes 경로 생성 폴더를 만들고 page.js, page.jsx, page.tsx 등을 넣어라 UI 만들기 page.js내에 리액트 컴포넌트를 추가하고 export default로 내보내기 Path Group 규칙 ()로 묶어서 생성. 이름은 별 의미 없음. 다른 URL path랑 겹치면 안됨 여러 루트 레이아웃을 탐색하면 전체 페이지 로드가 발생함.(다중 루트 레이아웃 시)) URL 구조에 영향을 주지 않고 경로 구성 ex) /(marketing)/about/page.js 특정 경로 세그먼트에 레이아웃 적용 ex) /(marketing)/layout.js 애플리케이션을 분할하여 다중 루트 레이아웃 만들기 ex) /의..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Fundamentals 용어 트리 : 부모 및 자식 컴포넌트가 있는 컴포넌트 트리, 폴더 구조 하위트리 : 새 루트(첫번째)에서 시작하여 리프(마지막)에서 끝나는 트리의 일부 루트 : 루트 레이아웃 같은 트리 또는 하위 트리의 첫번째 노드 리프 : 자식이 없는 하위 트리의 노드 URL 세그먼트 : 도메인이 아닌 /로 구분된 URL 경로의 일부 URL path : 도메인 뒤에 오는 URL의 일부 (세그먼트로 구성) app 디렉토리 새 라우터는 app 디렉토리에서 동작 기존 pages 경로와 함께 사용가능하나 URL path가 겹치면 안됨 기본적으로 컴포넌트는 서버 컴포넌트임. 클라이언트 컴포넌트를 사용할수도 있음. ( “use client”..

typescript 핸드북 학습내용 정리 https://typescript-kr.github.io/pages/the-handbook.html 네임스페이스와 모듈 모듈 사용하기 모듈에는 코드와 선언 둘 다 포함 될 수 있음 모듈은 모듈로더에 대한 의존성이나 ES모듈이 지원하는 런타임을 가지고 있음 Node.js의 경우 모듈이 기본이 기본적인 방법임 모듈 사용을 권장함 네임스페이스 사용하기 네임스페이스는 코드를 구성하는 TS만의 고유한 방법 전역 네임스페이스에서 JS 객체로 이름 붙여짐 모듈과 달리 여러개의 파일을 포괄할 수 있으며, --outFile을 사용해 연결할 수 있음. 네임스페이스와 모듈의 위험성 /// 를 사용한 모듈 모듈 파일을 참조하기 위해 import 문 대신 /// 구문을 사용하는 실수 i..

typescript 핸드북 학습내용 정리 https://typescript-kr.github.io/pages/the-handbook.html 네임스페이스 첫번째 단계 단일 파일 검사기 interface StringValidator { isAcceptable(s: string): boolean; } let lettersRegexp = /^[A-Za-z]+$/; let numberRegexp = /^[0-9]+$/; //정규식 검사기 class LettersOnlyValidator implements StringValidator { isAcceptable(s: string) { return lettersRegexp.test(s); } } //우편번호 검사기 class ZipCodeValidator imple..

typescript 핸드북 학습내용 정리 https://typescript-kr.github.io/pages/the-handbook.html 모듈 해석 모듈 해석 (module resolution)은 컴파일러가 import가 무엇을 참조하는지 알아내기 위해 사용되는 프로세스. 첫번째로 모듈을 나타내는 파일의 위치를 찾고 못 찾으면 ambient 모듈을 찾으려고 함. 못 찾으면 오류 상대적 vs 비상대적 모듈 import 상대적 - 경로 지정됨 가져온 파일에 상대적으로 해석되고 ambient 모듈 선언으로 해석 될 수 없음 import Entry from "./components/Entry"; import { DefaultHeaders } from "../constants/http"; import "/mo..

typescript 핸드북 학습내용 정리 https://typescript-kr.github.io/pages/the-handbook.html 모듈 JS에서 모듈 로더는 CommonJS랑 RequireJS가 있었음. TS와 JS는 ECMA 2015 이후의 import, export를 활용함. Export 선언 Export 하기 모든 선언(변수, 함수, 클래스, 타입 별칭, 인터페이스)를 export할 수 있음. // StringValidator.ts export interface StringValidator { isAcceptable(s: string): boolean; } // ZipCodeValidator.ts import { StringValidator } from "./StringValidator"..

typescript 핸드북 학습내용 정리 https://typescript-kr.github.io/pages/the-handbook.html 유틸리티 타입 Partial T의 모든 프로퍼티를 선택적으로 만드는 타입을 구성함. interface Todo { title: string; description: string; } function updateTodo(todo: Todo, fieldsToUpdate: Partial) { return { ...todo, ...fieldsToUpdate }; } const todo1 = { title: 'organize desk', description: 'clear clutter', }; const todo2 = updateTodo(todo1, { descriptio..

typescript 핸드북 학습내용 정리 https://typescript-kr.github.io/pages/the-handbook.html 제네릭 사용자는 제네릭을 통해 여러 타입의 컴포넌트나 자신만의 타입을 사용할 수 있음 제네릭의 Hello World any를 써서 구현한 경우 function identity(arg: any): any { return arg; } 제네릭으로 구현한 경우 function identity(arg: T): T { return arg; } 타입변수 T는 유저가 준 인수의 타입을 캡처하고, 이 정보를 나중에 사용할 수 있게 함. // 두가지 호출 방법 // 명시적 선언 let output = identity("myString"); // 출력 타입은 'string'입니다. /..

typescript 핸드북 학습내용 정리 https://typescript-kr.github.io/pages/the-handbook.html 열거형 숫자 열거형 enum Direction { Up = 1, Down, Left, Right, } // 첫번째값만 지정하면 뒤는 자동으로 증가된 값을 갖는다. // Down = 2, Left = 3, Right = 4 enum Direction { Up, Down, Left, Right, } // 지정하지 않는 경우 0부터 시작한다. // Up = 0, Down = 1 ... enum Response { No = 0, Yes = 1, } function respond(recipient: string, message: Response): void { // ... ..

typescript 핸드북 학습내용 정리 https://typescript-kr.github.io/pages/the-handbook.html 유니언과 교차 타입 유니언 타입은 여러 타입 중 하나가 될 수 있는 값을 의미합니다. 세로 막대 (|)로 각 타입을 구분하여, number | string | boolean은 값의 타입이 number, string 혹은 boolean이 될 수 있음을 의미합니다. function padLeft(value: string, padding: string | number) { // ... } 공통 필드를 갖는 유니언 실제 대입된 쪽의 멤버들에게만 접근할 수 있음. interface Bird { fly(): void; layEggs(): void; } interface Fis..