gaki gaki

TypeScript (Strict Null Checks) 기본적으로 null 과 undefined는 다른 모든 타입의 하위 타입니다. 이건, null과 undefined를 number 같은 타입에 할당할 수 있다는 것을 의미합니다. 하지만, --strictNullChecks를 사용하면, null과 undefined는 오직 any와 각자 자신들 타입에만 할당 가능합니다. (예외적으로 undefined는 void에 할당 가능합니다) 이건 많은 일반적인 에러를 방지하는 데 도움을 줍니다. 이 경우, string 또는 null 또는 undefined를 허용하고 싶은 경우 유니언 타입인 string | null | undefined를 사용할 수 있습니다.

안녕하세요. gaki 입니다. 오늘은 자바스크립트 클래스의 protected 에 관해서 다뤄보겠습니다. A 라는 클래스에 protected 로 정의된 property 와 method 가 있다고 가정합시다. 그럼 A 라는 클래스 내부에서는 당연히 protected 로 정의된 것들에 접근할 수 있습니다. 하지만 외부에서는 A 라는 클래스 안에 protected 된 것들에 접근할 수 없습니다. 여기까지는 private 과 똑같은데요. protected 와 private 의 차이점은, private 는 private 된 속성을 오직 해당 클래스 내부에서만 접근 할 수 있다는 점이지만, protected 는 해당 속성을 해당 클래스 내부 + 자식 클래스 에서도 접근 할 수 있다는 점이 다릅니다. class Per..

계기: 코드를 보다가 클래스의 extends 와 Implements 가 나왔는데, 특히 implements 에 대해서 잘 몰라서 찾아봤습니다. 참고링크 : https://stackoverflow.com/questions/38834625/whats-the-difference-between-extends-and-implements-in-typescript What's the difference between 'extends' and 'implements' in TypeScript I would like to know what Man and Child have in common and how they differ. class Person { name: string; age: number; } class Chi..

타입스크립트 제네릭 타입 설명 및 예제 안녕하세요. gaki 입니다. 오늘은 타입스크립트의 제네릭 타입에 대해서 알아보겠습니다. 1. 제네릭의 뜻 2. 타입스크립트 제네릭타입 예제 3. 타입스크립트 제네릭타입의 응용 1. 제네릭의 뜻 제네릭(generic)이란, 일반적인 이라는 뜻을 가진 형용사입니다. 무언가가 일반적이려면, 보편적이여야하고 많은 사람들을 수용할 수 있어야합니다. 타입스크립트에서 제네릭 타입이란 많은 타입을 수용할 수 있는 타입입니다. 이게 무슨말인지 헷갈리시면 아래의 예제를 보면 이해되실겁니다. 2. 타입스크립트 제네릭타입 예제 function identity(arg: any): any { return arg } 위와 같이 어떤 인자를 받고 그 인자를 반환하는 identity 라는 함수..

안녕하세요. gaki 입니다. 오늘은 Next js 에 Eslint 와 Prettier 를 적용하는 방법에 대해서 알아보겠습니다. Eslint 와 Prettier 는 코드를 깔끔하게 유지하고 컨벤션을 통일하기에 좋은 툴입니다. ESLint 1. 패키지 설치 2. 설정 파일 세팅 3. 추가 설정하기 Prettier 1. 패키시 설치 2. 설정 파일 세팅 3. IDE 설정 (vsCode) 1. ESLint 적용하기 (1) 패키지 설치 우선 다음 명령어를 통해 패키지를 설치합니다. npm install eslint --save-dev # or yarn add eslint --dev (2) 설정 파일 세팅하기 그리고 설정파일을 세팅하면 되는데요, 이때 --init 플래그를 사용한 다음 명령어를 이용하면 쉽게 설..

1. npm install react-router react-router-dom @types/react-router @types/react-router-dom react-router-dom 에 link , useNavigate, BrowserRouter 가 전부 들어있다.

1. 먼저 create-react-app 으로 기본 개발 환경을 셋팅한다. 2. https://eslint.org/docs/user-guide/getting-started Getting Started with ESLint Getting Started with ESLint ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs. In many ways, it is similar to JSLint and JSHint with a few exceptio eslint.org 위 링크에 ..

1. npm install --save typescript @types/node @types/react @types/react-dom @types/jest 으로 타입스크립트 리액트 모듈을 설치한다. 2. .jsx 확장자 파일을 .tsx 로 바꾼다. 3. npm start 를 했더니 chalk.constructor is not a construtor 이라는 에러가 떴다. 구글링 해도 에러의 원인을 찾기 어려워서 아마 기존에 존재하는 js 관련 모듈과 ts 가 충돌이 날것이라고 추측했다. 그래서 일단 차근차근 해야할것을 진행해보기로 했다. 4. tsconfig.json 추가 5. package.json 에 dependency 파일들을 앞에 @types/ 를 붙여서 타입스크립트 파일로 바꿈. 단, react-..