next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Absolute Imports and Module Path Aliases 절대경로 import // tsconfig.json { "compilerOptions": { "baseUrl": "." } } import Button from 'components/button'; export default function HomePage() { return ( Hello World ); } 별칭 import // tsconfig.json { "compilerOptions": { "baseUrl": ".", "paths": { "@/components/*": ["components/*"] } } } import Button from &..

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 모듈 해석 모듈 해석 (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"..

모듈 모듈의 일반적 의미 개별적 요소로서 재사용 가능한 코드 조각 자바스크립트와 모듈 레거시 분석을 위해서가 아니면 amd는 모르고 넘어가도 됨. ES6 모듈(ESM) 모듈 스코프 독자적인 모듈 스코프를 가지고 있음. export 외부에 공개 // 변수, 함수 클래스를 하나의 객체로 구성하여 공개 export { pi, square, Person }; export default object; //기본 import import { pi, square, Person } from './lib.mjs'; import * as lib from './lib.mjs'; // 앨리어싱 import object from './lib.mjs'; //export default가 있는 경우 책에서는 하나의 값만 export ..