즐겁게, 코드

📋 내용 : 타입스크립트 사용 시, Cannot find module... 이 출력되는 문제 외부 파일을 불러올 때, 일치하는 타입 선언을 찾지 못했다는 오류가 자주 목격됩니다. 타입스크립트는 해석할 수 없는 타입에 대해 이런 오류를 출력하는데요, 타입 추론을 돕기 위해 d.ts 라는 이름의 파일을 만들어 활용할 수 있습니다. // types.d.ts // 예시. yml 형식의 파일을 불러와 사용하고 싶을 때 declare module "*.yml" { const data: any; export default data; } // 비슷하게, svg 파일을 불러온다고 하면 이렇게 사용하면 됨! declare module "*.svg" { const data: any; export default data; }..

📋 내용 : 타입스크립트 코드에서 require.context를 인식하지 못하는 문제 Building a Blog with Next.js | CSS-Tricks In this article, we will use Next.js to build a static blog framework with the design and structure inspired by Jekyll. I've always been a big fan of how css-tricks.com next.js 기반 블로그 튜토리얼을 따라가던 중, 이 부분에서 문제가 생겼습니다. // api/index.ts import matter from "gray-matter"; export async function getAllPosts() { // 타..

타입스크립트 코드를 트랜스파일하기 위해서는 tsc 커맨드를 사용합니다. // index.ts const name: string = "chanmin"; $ tsc index.ts // index.js var name = "chanmin"; 다만 위의 트랜스파일 결과물은 var 키워드를 사용하는 구버전 자바스크립트 코드입니다. 어떻게 하면 이 끔찍한 var 에서 벗어날 수 있을까요? ⚙️ tsconfig 설정 타입스크립트를 조금 잘 아는 분이시라면 tsconfig 파일에서 타겟 옵션을 지정할 수 있다는 것도 알고 계실 겁니다. // tsconfig.json { "compilerOptions": { /* Visit https://aka.ms/tsconfig.json to read more about this ..

타입스크립트에서 원시 타입 외에 참조 타입을 사용하는 방법에 대해 알아보겠습니다. 🏗 배열(Array) const array1: number[] = [1, 2, 3, 4, 5]; const array2: Array = [1, 2, 3, 4, 5]; 배열 타입을 사용하는 방법은 두 가지가 있는데, 기능적인 차이는 없으니 눈에 익은 스타일 또는 팀 컨벤션대로 사용하면 됩니다. 🛢 튜플(Tuple) const pointX: [string, number] = ["x", 255]; const pointY: [string, number] = ["y", 0]; // 트랜스파일 결과 const pointX = ["x", 255]; const pointY = ["y", 0]; 튜플은 배열과 유사하게 생겼지만 배열과는 달..

타입스크립트는 새로운 언어가 아니라 자바스크립트의 슈퍼셋(스타크래프트 오리지널과 브루드 워의 관계라고 보면 된다.) 으로, 프로젝트가 거대해질수록 타입스크립트의 사용은 선택이 아닌 반 필수라고 합니다. 먼저 타입스크립트 프로젝트를 구성하려면 두 패키지가 필요하다. typescript와 ts-node 패키지가 그것으로, 둘 다 npm을 통해 내려받을 수 있다. npm i -g typescript ts-node // 혼자 이리저리 갖고 놀 예정이라면 전역으로 설치해주고 npm i -D typescript ts-node // 프로젝트 배포용으로 사용할 예정이라면 프로젝트 폴더에 설치해주자. typescript 패키지는 타입스크립트로 작성한 코드를 자바스크립트로 바꿔 주며(이를 트랜스파일링이라 한다.), ts-..