typescript

현재 만들고 있는 기술블로그(링크)에서 포스팅의 편리성을 위해 이미지 업로드를 할 수 있는 기능이 필요했습니다. 이를 위해 사진 이미지를 미리 보여주는 file input 컴포넌트를 만들었고, 이번 포스트에서는 어떻게 구현했는지 정리해 보고자 합니다. CSS에 대한 포스트가 아님으로 CSS 부분은 최소화하고, 구현 로직에 대해 코드로 설명하겠습니다. 컴포넌트 설계 무엇을 만들기 전에, 내가 만들고자 하는 것의 핵심 기능은 무엇인지, 어떻게 사용할 것인지 정리하는 부분은 정말 중요한 것 같습니다. 핵심기능 제가 구현 하고자 하는 File Input의 핵심기능은 아래와 같습니다. 복수의 이미지 파일들을 버튼을 통해 업로드 할 수 있다. 복수의 이미지 파일들을 preview 쪽에 Drag&Drop으로 업로드 ..

타입스크립트로 d3 라인차트를 구현할 때, 시간 축에 tickFormat을 쓰려다가 아래와 같은 에러를 만났다. function timeFormat(specifier: string): (date: Date) => string Returns a new formatter for the given string specifier. The returned function formats a specified date, returning the corresponding string. An alias for locale.format (TimeLocaleObject.format) on the default locale. @param specifier — A specifier string for the date forma..

타입스크립트를 사용하면서, event target에 접근하다 위와 같은 에러를 만나게 되었고, 어떻게 해결할 수 있었는지 기록하고자 한다. Error 내가 만나게 됐던 에러는 Property 'classList' does not exist on type 'EventTarget'. 이었다. Drag Drop 이벤트를 혼자 구현해보다가 아래처럼 작성했었다. 드래깅 되는 타겟에 내가 원하는 CSS효과를 주려고 아래처럼 접근하니, classList라는 property가 없다는 에러를 만나게 됐다. //Drag Event const onDragStartHandler = ( e: React.DragEvent, idx: number ) => { const target = e.target; target.classLis..

composition이라는 강력한 기능에 대해 알아보고 실제로 코드에 어떻게 적용 할 수 있는지에 대해 알아보자. 만약, 타입스크립트와 OOP의 개념에 익숙치 않고 자세히 알고 싶다면 이전 글을 참고하자. Composition? composition이란 클래스 상속을 하지 않고 여러개의 클래스간에 관계를 맺는 방식을 의미한다. 근데 상속이라는 좋은 방법이 있는데 굳이 composition을 이용해야 하는 이유가 있을까? 우선, 아래 사진처럼 상속은 interface를 implements하는 것 처럼 여러개를 할 수가 없다. 상속을 이용하게 되면 결국 클래스 그 자체로 서로 의사소통을 해야 한다. 이렇게 되면 클래스간의 관계가 매우 견고해져 재사용성이 매우 떨어지게 된다. 그렇기 때문에 Compositio..

실제로 TypeScript의 문법에 대해 들어가기 이전에, ts파일을 어떻게 실행시키는지 먼저 간단하게 알아보자. TS파일은 JS가 사용가능한 모든 곳에서 다 사용이 가능하다. 하지만, ts파일을 바로 브라우저나 node에서는 완전히 읽어내지 못한다. 즉, tsfile -> js로 변환 해줄 필요가 있다는 것이다. 1. node에서 ts파일 npm i -g ts-node 자, ts-node를 npm을 통해 설치해주자. 그리고 지금까지 해왔던 node main.ts형식이 아닌 ts-node main.ts 로 하면 정상적으로 node환경에서 ts파일을 띄울 수 있다. 2. 브라우저에서 ts파일 //typescript 설치 npm i typescript //ts-> js로 컴파일 tsc {fileName}.t..

TypeScript가 좋다는 말은 이미 많이 들었다. 근데 도대체 왜 사람들은 그렇게 TypeScript에 열광하는 것 일까? TypeScript에 대해 자세히 들어가기 전에 TypeScript가 무엇인지 왜 사용해야 하는 이유부터 알아보자. What is TypeScript? 공식 홈페이지에서는 TypeScript is JavaScript with syntax for types 라고 소개하고 있다. 즉, JavaScript 이지만, types를 지정할 수 있는 문법이 추가 됐다는 뜻이다. (superset of JavaScript) 이러한 TS(TypeScript)는 어떠한 특징들을 가지고 있을까? 1. TS는 자바스크립트의 superset이다. 그렇기 때문에 TS는 JS가 사용되는 모든 곳(node...