지모의 기록

Next.js ESLint > Next.js ESLint Config Next.js에서는 3가지 ESLint 옵션이 있습니다. Strict Base Cancel Strict, Base 옵션을 선택하면 eslint, eslint-conifg-next가 devDependencies에 추가되어 자동으로 설치됩니다. *eslint-config-next - ESLint 플러그인 eslint-plugin-react, eslint-plugin-react-hooks, eslint-plugin-next의 ✅Recommended rule-sets을 포함하고 있습니다. Prettier *eslint-config-prettier ESLint도 코드 스타일 rule을 가지고 있기 때문에 Prettier 기능과 충돌할 수 있습니..

Next.js 설치 방법 - Next.js Getting Started Chrome Extension Manifest 작성 방법 - Chrome Extensions Manifest 로컬 환경에서 Extension 동작시키는 방법 로컬 환경에서 Extension을 동작시키기 위해서는 html 파일과 같은 static 파일이 필요합니다. Next.js에서는 next.config.js 파일에 다음과 같은 설정을 추가하면 빌드 결과물을 out 폴더에서 확인할 수 있습니다. - Next.js Configuration const nextConfig = { output: 'export', } module.exports = nextConfig public 폴더에 manifest.json 파일을 작성합니다. packag..

Collection of TypeScript type challenges with online judge Pick type MyPick = { [k in K]: T[k] } Readonly type MyReadonly = { readonly [k in keyof T]: T[k] } Exclude type MyExclude = T extends U ? never : T Awaited type MyAwaited = T extends PromiseLike ? I extends PromiseLike ? MyAwaited : I : never Parameters type MyParameters any> = T extends (...arg: infer I) => any ? I : any; ReturnType typ..

이펙티브 타입스크립트 책(아이템 4, 아이템 11)을 정리한 글입니다. 구조적 타이핑 자바스크립트는 함수의 매개변수 값이 요구사항을 만족한다면 타입이 무엇인지 신경 쓰지 않습니다. 타입스크립트의 타입 시스템은 자바스크립트의 이런 런타임 동작을 그대로 모델링합니다. interface Vector2D { x: number; y: number; } interface NamedVector { name: string; x: number; y: number; } function calculateLength(v: Vector2D) { return Math.sqrt(v.x * v.x + v.y * v.y); } const v: NamedVector = { name: 'Zee', x:3, y: 4 }; calculate..

이펙티브 타입스크립트 책(아이템 13)을 정리한 글입니다. 결론부터 알려드리면, 복잡한 타입이라면 고민할 것도 없이 타입을 사용하면 됩니다. 그러나 타입과 인터페이스, 두 가지 방법으로 모두 표현할 수 있는 간단한 객체 타입이라면 일관성과 보강(augment)의 관점에서 고려해 봐야 합니다. 일관성 일관되게 인터페이스를 사용하는 코드베이스에서 작업하고 있다면 인터페이스를 사용하고, 일관되게 타입을 사용 중이라면 타입을 사용하면 됩니다. 보강(augment) - 인터페이스 사용 interface IState { name: string; capital: string; } interface IState { population: number; } const wyoming: IState = { name: 'Wyo..