IT 엘도라도

1. yarn berry로 Next.js 프로젝트 생성하기 yarn berry는 npm과 비슷한 역할의 또 다른 패키지 관리자로, 이에 관한 자세한 설명은 이 포스팅을 참고하기 바란다. yarn berry를 사용하기 위해서는 우선 npm을 이용하여 최신 버전의 yarn을 전역으로 설치해야 한다. npm install -g yarn 다음으로, create-next-app 패키지를 이용하여 TypeScript 기반의 Next.js 프로젝트를 생성한다. 이때, 만약 평소대로 npx를 사용한다면 npx create-next-app 명령어를 사용하지만 yarn을 사용할 때는 yarn create next-app 명령어를 사용한다는 점에 주목하자. yarn create next-app next-ts-airbnb -..

👉 모듈(Module)이란? import 또는 export가 있는 파일은 모듈(Module)로 취급이 된다. 즉, 외부에서는 직접적으로 모듈을 불러오지 않는 이상 그 모듈의 데이터를 사용할 수 없다. import는 모듈에서 데이터를 불러올 때, export는 모듈에서 데이터를 내보낼 때 사용한다. 👉 import, export 데이터 : 변수, 상수, 함수, 클래스, 타입, 네임스페이스 TypeScript 컴파일러가 모듈 로더를 통해 실제로 불러오는 건 오로지 타입 정보뿐이다. 변수, 상수, 함수, 클래스 : JS 모듈 로더 코드로 컴파일이 된다. 타입 : JS 코드로는 컴파일 되지 않는다. 즉, JS 코드에서는 삭제된다. 네임스페이스 : JS 일반 객체로 컴파일 된다. IIFE 함수에 해당 객체를 전달..

TSConfig Reference - Docs on every TSConfig option From allowJs to useDefineForClassFields the TSConfig reference includes information about all of the active compiler flags setting up a TypeScript project. www.typescriptlang.org TSConfig 파일이 위치한 디렉토리는 TypeScript 혹은 JavaScript 프로젝트의 루트 디렉토리가 된다. 해당 TSConfig 파일은 tsconfig.json 파일일 수도 있고, jsconfig.json 파일일 수도 있다. 이 둘은 동작 방식이 거의 같으며, 동일한 설정 변수들의 집합을..

Documentation - What is a tsconfig.json Learn about how a TSConfig works www.typescriptlang.org 1. Overview tsconfig.json 파일이 위치한 디렉토리는 TypeScript 프로젝트의 루트 디렉토리가 된다. tsconfig.json 파일은 해당 프로젝트를 컴파일 하기 위해 필요한 루트 파일들과 각종 컴파일러 옵션들을 설정한다. JavaScript 프로젝트의 경우 jsconfig.json 파일을 대신 사용할 수 있는데, 이는 사실 tsconfig.json과 동작 방식이 거의 비슷하다. 다만 JavaScript와 관련된 컴파일러 플래그들을 가지고 있을 뿐이다. TypeScript 프로젝트는 다음과 같은 두 가지 방식 중..

Documentation - Triple-Slash Directives How to use triple slash directives in TypeScript www.typescriptlang.org Triple-Slash 디렉티브는 하나의 XML 태그를 포함하는 한 줄 짜리 주석이다. 디렉티브란 JavaScript 코드로 컴파일이 되진 않지만 컴파일러에게 컴파일에 도움이 될 만한 어떠한 정보를 알리는 부분을 의미한다. Triple-Slash 디렉티브는 참조해야 할 선언 파일의 경로를 컴파일러에게 알려주는 역할을 수행하며, 앞서 말했듯 별도의 JavaScript 코드로는 컴파일 되지 않는다. 컴파일 후에는 단순한 주석의 형태로 남게 된다. 단, 이는 파일의 맨 위에 있을 때만 유효하다. 즉, 주석이나 또..

Documentation - Module Resolution How TypeScript resolves modules in JavaScript www.typescriptlang.org 모듈 해석(Module Resolution)이란 컴파일러가 각 import가 어떤 모듈을 가리키는지 해석하는 과정을 의미한다. 예를 들어 import { a } from "moduleA"라는 코드가 있으면, 컴파일러는 a가 올바르게 사용되는지 체크하기 위해 moduleA가 정확히 어떤 모듈을 가리키는지 알아야 한다. 그리고 해당 모듈에 존재하는 a의 타입 정보를 참조해야만 한다. 그 모듈 탐색 과정이 바로 모듈 해석이다. 먼저, 컴파일러는 import 하려는 모듈을 탐색한다. 그 탐색 전략으로는 크게 두 가지가 있다. 하나..