전체 글27 tsconfig.json 설정 compilerOptions 프로퍼티에는 컴파일 옵션을 설정하며, 생략한 경우 기본 컴파일 옵션이 사용된다. { "compilerOptions": { "target": "es5", "module": "commonjs", "sourceMap": true } } 컴파일 대상 파일을 지정하기 위해 files 또는 include 프로퍼티를 사용한다. 만약 files 프로퍼티를 정의하였다면 include 프로퍼티는 무시된다. files 프로퍼티에는 컴파일 대상 파일의 상대 경로 또는 절대 경로를 명시적으로 설정한다. { "files": [ "src/file1.ts", "src/file2.ts" ] } include 프로퍼티에는 컴파일 대상 리스트를 설정한다. exclude 프로퍼티에는 컴파일 대상에서 제외할 파일.. 2023. 1. 4. 컴파일러 설정 1. 타입스크립트 설치 확인 tsc -v 2. 타입스크립트 파일을 js 파일로 컴파일링 # .ts는 생략 가능하다. tsc 파일이름 3. 컴파일링 되는 js 버전 변경하기 변경되는 js 버전은 기본적으로 ES3이지만 다른 버전으로 변경 가능하다. # --target 또는 -t 플래그를 사용하며 버전을 명시해준다. tsc 파일이름 -t ES2015 4. 매번 옵션을 지정하는 것은 번거롭기 때문에 tsc 옵션 설정 파일을 생성해 변경 가능하다. # tsconfig.json 파일이 생성된다. tsc --init { "compilerOptions": { "target": "es5", "module": "commonjs", } } 5. tsc 명령어 뒤에 파일명을 지정하면 tsconfig.json이 무시되므로 조.. 2023. 1. 4. 인터페이스 타입스크립트의 핵심 원칙 중 하나는 타입 검사가 값의 형태에 초점을 맞추고 있다는 것이다. 이를 덕 타이핑(duck typing) 또는 구조적 서브타이핑(structural subtyping)이라고 한다. 인터페이스는 이런 타입들의 이름을 짓는 역할을 한다. 인터페이스 function printLabel(labeledObj: { label: string }) { console.log(labeledObj.label); } let myObj = {size: 10, label: "Size 10 Object"}; printLabel(myObj); printLabel 함수는 string 타입의 label을 갖는 객체 하나를 매개변수로 가진다. 이 객체는 더 많은 프로퍼티를 가지고 있지만 컴파일러는 필요한 프로퍼티.. 2022. 12. 29. Data Fetching - getStaticProps 페이지에서 getStaticProps 함수를 내보내면 반환된 props를 사용해 빌드시 페이지를 미리 렌더링한다. export async function getStaticProps(context) { return { props: {}, // will be passed to the page component as props } } When should I use getStaticProps? 페이지를 렌더링하는데 필요한 데이터가 사용자 요청보다 앞서 빌드되어야할 때 The data comes from a headless CMS The page must be pre-rendered (for SEO) and be very fast — getStaticProps generates HTML and JSON file.. 2022. 12. 29. Data Fetching - getStaticPaths 페이지에 동적 경로가 있고 getStaticPaths를 사용할 경우 생성할 경로 목록을 정의해야한다. 동적 경로를 사용하는 페이지에서 getStaticPaths 함수를 내보내면 Next.js는 지정한 모든 경로를 정적으로 사전 렌더링한다. // pages/posts/[id].js // Generates `/posts/1` and `/posts/2` export async function getStaticPaths() { return { paths: [{ params: { id: '1' } }, { params: { id: '2' } }], fallback: false, // can also be true or 'blocking' } } // `getStaticPaths` requires using `ge.. 2022. 12. 27. 기본 타입 타입스크립트는 자바스크립트와 거의 동일한 데이터 타입을 지원하며, 열거 타입을 사용해 더 편리하게 프로그래밍할 수 있다. 불리언 true와 false 값이다. let isDone: boolean = false; 숫자 자바스크립트와 마찬가지로 타입스크립트의 모든 숫자는 부동 소수 값이다. let decimal: number = 6; let hex: number = 0xf00d; 문자열 자바스크립트와 마찬가지로 '', "", ``를 사용한다. let color: string = 'blue'; color = 'red'; let fullName: string = `Bob Bobbington`; let age: number = 37; let sentence: string = `Hello, my name is ${.. 2022. 12. 27. 이전 1 2 3 4 5 다음 728x90