건브로의 소소한 개발

1. 제네릭이란? 다양한 타입에서 작동하는 컴포넌트를 작성할 수 있는 문법이다. 타입스크립트 문서에서는 아래와 같이 정의하고 있다. C#과 Java 같은 언어에서, 재사용 가능한 컴포넌트를 생성하는 도구 상자의 주요 도구 중 하나는 제네릭입니다, 즉, 단일 타입이 아닌 다양한 타입에서 작동하는 컴포넌트를 작성할 수 있습니다. 사용자는 제네릭을 통해 여러 타입의 컴포넌트나 자신만의 타입을 사용할 수 있습니다. https://www.typescriptlang.org/ko/docs/handbook/2/generics.html Documentation - Generics Types which take parameters www.typescriptlang.org 2. 타입이 고정적일 때 //TypeScript c..

1. 오늘 공부한 것 mongoDB Node.js 연결하기 TypeScript 글 정리 정처기 2. mongoDB Node.js 연결하기 FE 개발자가 되려면, BE 영역도 알아야 된다고 생각해서 Node.js와 mongoDB를 사용하여 CRUD 테스트를 하려고 했다. 물론 2번 정도 Node.js와 mongoDB 연결하는 걸 연습했다. 그래도 손에 다 익지 않았고, 시간이 필요해 보였다. 그리고 CRUD를 하려면 mongoDB의 save, delete, find 등등을 알아야 한다. 그리고 몽고 디비에 함수 커스터마이징 할 수 있는 것도 손에 익게끔 공부해야겠다. 3. TypeScript 글 정리 여태까지 TypeScript 글 정리는 TIL에서 많이 했었다. 그런데, 그렇게 하니까 나중에 TypeSc..

1. 인덱스 속성(Index Property) 인덱스 속성은 이름이 안정해진 속성의 타입을 정의한다. //typescript //오류가 나는 경우 interface Animal { [props: number]: string } const sparrow: Animal = { name: '참새' } //정상적으로 작동하는 경우 interface Animal { [props: string]: string } const chicken: Animal { name: "꼬꼬" } 위의 코드에서 sparrow 값 할당 할 때 오류가 발생한다. sparrow의 속성인 name은 string이지만, Animal 인터페이스에 정의 된 것은 숫자이다. 그러므로 숫자 속성으로 밖에 못 쓴다. 2. 함수 오버로드(Function..

1. 오늘 한 것 node.js 환경의 TypeScript파일에서 Express와 mongoDB연결 TypeScript generic 공부 2. node.js 환경의 TypeScript파일에서 Express와 mongoDB연결 TypeScript를 공부하고 처음으로 내가 연습하는 프로젝트에 연결시켜서 진행하였다. 이렇게 연결해보는 건 처음은 아니었지만, TypeScript를 배워서 적용한다는 건 쉽지만은 않았다. 아직 TypeScript가 익숙하지가 않아서, 몇 시간동안 헤메면서 코딩하였다. Express와 mongoDB 연결은 Node.js책을 참고하면서 하였고, TypeScript를 적용하는 것은 여러가지 블로그를 보았다. 덕분에 mongoDB와 Express 연결을 잘 하였다. 근데, 매번 힘들었던..

1. 오늘 한 것 정보처리기사 공부 타입스크립트 공부 와이어프레임 구상하기 2. 정보처리기사 공부 현재 2과목 3장까지 문제를 풀어봤다. 시험은 3월 첫째 주에 있는데, 어떻게 전략을 짜야할지 조금씩 파악해야겠다. 진도만 빼면 만족도는 올라갈 것 같지만, 개념에 대해서 알지 못한 채 넘어갈 수도 있으니 복습해야겠다. 3. 타입스크립트 공부 현재 타입스크립트를 제네릭 공부 중이다. 예전에 리액트를 공부할 때 node-modules를 알게 되었고, 그때 nodemodules안의 폴더의 파일을 봤을 때 타입스크립트로 되어 있었다. 근데, 리액트의 함수를 쓸 줄 모를 때 인터넷으로 검색해서 보지만, 때론 ctrl + 좌클릭 해서 타입스크립트 파일을 보면서 이해하고 싶었다. function addNumber(va..

1. 인터섹션 타입(Intersection Type) 이 타입은 다른 타입과 합칠 수 있도록 도와주는 문법이다.(interface도 된다) 쓰는 방법은 어렵지 않다. 아래 intersection type이 적용된 ElevatedEmployee의 내용으로는 Admin과 Employee 타입이 합친 상태일 것이다. ElevatedEmployee의 타입 내용 name: string; privileges: string[]; startDate: Date //typescript type Admin = { name: string; privileges: string[]; }; type Employee = { name: string; startDate: Date; }; // intersection type type El..

1. 오늘 한 것 interface에 대한 공부 정보처리기사 공부 2. interface에 대한 공부 interface는 객체지향 프로그래밍 언어에서 보이는 키워드다. 근데, 자바스크립트에서는 interface를 사용할 수 없다. 자바스크립트는 느슨하고, 브라우저에서 사용하는 언어이기 때문인 것 같다. 최근에 자바스크립트를 봤을 때는 private, public에 대한 접근자가 나와 있었다. 나중엔 interface도 구현되어 있지 않을까 싶다. //TypeScript //객체에 사용하는 인터페이스 interface FoodShape { name: string; taste: string; eatFood(): void; } let food1: FoodShape; food1 = { name: 'seasone..

1. 오늘 배운 것 class 접근 제어자(private, public, protected) 이중 초기화 막기 readonly super() override getter setter static 추상 클래스 싱글톤 패턴 2. class에 대한 공부 class 내부의 필드에 있는 변수들은 속성이라고 한다. //TypeScript //일반적으로 쓰이는 class class Animal { kind: string; habitat: string; constructor(kind: string, habitat: string){ this.kind = kind; this.habitat = habitat; } printIntroduction(){ console.log('이 동물의 종류는 ' + this.kind + '입..

1. 오늘 배운 것 나머지 매개변수 변수에 대한 class의 this 2. 나머지 매개변수 이 개념은 ES6부터 사용 가능해졌다. spread 연산자를 사용하기 때문에 최소 ES6부터 사용 가능할 거라고 추측은 가능하다. 이 개념의 핵심은 해당 함수의 인수들이 선언된 함수의 매개변수(파라미터)가 바로 배열로 만들어져서 이 매개변수를 배열로써 바로 사용 가능하다. //타입스크립트 function add(...numbers: number[]){ console.log(numbers); const data = numbers.reduce((currentResult, currentValue) => { console.log("currentResult" + currentResult); console.log("curre..

1. 오늘 배운 것 tsconfig.json의 여러 가지 옵션 vscode에서 debugger사용하기 prettier 자동적으로 적용하기 2. tsconfig.json의 여러 가지 옵션 파일 이름: tsconfig.json { "compilerOptions": { /* Visit https://aka.ms/tsconfig.json to read more about this file */ /* Projects */ // "incremental": true, /* Enable incremental compilation */ // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project refe..