ts

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

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..