Dev Diary 💻

이 글은 원글을 참고하여 정리한 내용입니다. Definition TypeScript Generics는 재사용 가능한 구성요소를 생성하는 방법을 제공하는 도구입니다. generics는 프로그램이 장기적으로 확장가능할 뿐만 아니라 유연할 수 있도록 보장해줍니다. Example # Props interface Props { renderItem: (item: T) => React.ReactNode; keyExtractor: (item: T) => string; data: T[]; } data: 제네릭 타입 T를 받을 배열 요소 renderItem: 타입 T의 react 요소를 반환하는 함수 keyExtractor: 키를 추출하는 함수 # Component 정의 const GenericList = ({ data,..

Intro 안녕하세요. 앞선 포스팅에서 Multi type chart를 구현하는 방법에 대해 알아봤는데요, 이번 시간에는 Chart.js에서 Multi-Axis 를 설정하는 방법에 대해 알아보겠습니다. Multi-Axis 은 데이터의 단위 차이가 커서 한꺼번에 표현할 때 유용합니다. How to do 제 경우 series1, series2 두 데이터에 상응되는 y축을 오른쪽과 왼쪽에 표시하고 싶었습니다. 각각 사용하고자 하는 축이 다르기 때문에 yAxisID 속성을 활용하여 a, b 두개를 지정했습니다. 이후 options에서 해당 yAxisID를 사용해 position을 right, left로 설정해줬습니다. const series1: number[] = [] const series2: number[]..

Intro 안녕하세요. 이번 시간에는 react + typescript 에서 Chart.js 를 사용하는 방법에 대해 알아보겠습니다. How to do 제 케이스의 경우 막대(bar) 그래프와 선(line) 그래프를 함께 그려주고 싶었습니다. 이를 위해 먼저 MutiTypeChart 컴포넌트를 만들었습니다. # MutiTypeChart Component props로 data, height, options 을 정의합니다. 멀티타입 차트를 위해서는 Chart Component 를 사용하면 됩니다. import React from 'react' import { BarController, BarElement, CategoryScale, Chart as ChartJS, ChartData, ChartOptions,..

Intro 안녕하세요. 이번 시간에는 Chart.js에서 Y축 최대값을 동적으로 설정하는 방법에 대해 알아보도록 하겠습니다. Case 우선 Chart 컴포넌트를 활용하는 부분은 아래와 같습니다. option에 따라 표시하는 데이터를 다르게 retrun 하고 있습니다. 데이터가 동적으로 달라지다 보니 y축 범위 최대값도 해당 datasets에 맞게 다르게 표시해야 했습니다. const getData = (option: string): ChartData['datasets'] => { if (option === 'hourly') { return [ { fill: false, ..., data: [0, 150, 180, 270, 210, 160, 160, 202, 265, 210, 270, 255, 290, 3..

이 글은 udemy의 Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS 강좌를 바탕으로 정리한 내용입니다 1. 환영 pass 2. TypeScript란 무엇이며 왜 사용해야 하는가? 타입스크립트는 자바스크립트의 superset 입니다. 새로 만들어진 언어가 아닌 자바스크립트 언어를 사용해 새로운 기능과 장점을 추가하는 언어입니다. 코드를 실행하여 타입스크립트 코드를 JS로 컴파일하는 강력한 컴파일러입니다. 타입을 추가하여 브라우저 런타임에서 에러가 발생하기 전에 코드의 에러를 미리 확인할 수 있습니다. 개발 중 런타임 에러로 발생하는 에러를 초기에 수정할 수 있습니다. 단점) 브라우저와 같은 자바스크립트 환경에서 실행할 수 없습니다. node.js도 마찬가지입니다. 3..

Intro 안녕하세요. 타입스크립트 사용 중 다음의 에러가 발생했습니다. Error: Redundant double negation. no-extra-boolean-cast {text} Why 위 에러는 ESLint의 no-extra-boolean-cast 규칙으로, 불필요한 불리언 캐스트(불린 값을 강제로 캐스팅하는 것)를 방지하기 위한 규칙입니다. 현재 !!visible와 같은 형태로 불린 값을 강제로 캐스팅하고 하고 있습니다. 이미 불리언 값이 존재하기 때문에 이중 부정 연산자를 사용하여 불리언 값이 될 필요가 없습니다. How to solve 따라서 아래와 같이 이중 부정 연산자를 제거하면 ESLint 에러가 사라집니다. visible 자체를 사용해도 동일한 결과를 얻을 수 있습니다. {text}

Intro 안녕하세요. 타입스크립트 사용 중 다음의 에러가 발생했습니다. Could not find a declaration file for module Why? 이 오류 메시지는 연결된 declaration file 이 없는 타입스크립트 코드 안에 모듈이나 라이브러리를 사용할 때 발생하는 전형적인 오류입니다. declaration file(.d.ts)는 모듈이나 라이브러리의 types, functions 및 기타 속성을 설명하고 타입스크립트가 코드에서 이들을 사용하는 방법을 이해할 수 있도록 합니다. 따라서 설치된 특정 모듈/라이브러리에 대한 type 정의가 없어 타입스크립트에서 이해할 수 없으므로 다음의 오류가 발생한 것입니다. How to solve the problem 이 오류를 해결하기 위해서는..

Intro 안녕하세요. 이번 시간에는 react 에서 useRef 사용시 undefined / null 오류 발생 원인과 해결 방법에 대해 알아보도록 하겠습니다. 우선 제가 useRef를 사용한 코드 예제는 아래와 같습니다. clientHeight를 조절하기 위해 useRef를 사용하여 div tag에 적용했습니다. const divRef = useRef(null); const [handlePosition, setHandlePosition] = useState('300vh'); useEffect(() => { setHandlePosition(`${(divRef.current.clientHeight * 3) / 300}px`); }, []); return ( {/* some content */} ); 하지..

Intro 안녕하세요. 타입스크립트를 사용하던 도중 아래와 같은 오류가 발생했습니다. Why? 해당 properties의 값을 읽을 수 없기 때문에 발생하는 오류입니다. How to solve the problem 해당 에러를 해결하는 방법은 여러가지인데요, 저는 그 중에서도 Optional Chaining 연산자 (물음표 연산자)를 사용하여 해당 오류를 해결할 수 있었습니다. 코드 사용 예제는 아래와 같습니다. return ( {item?.name} ) 이렇게 Optional Chaining 연산자 (물음표 연산자)를 사용할 경우 유효한 값이 없을 때는 undefined를 반환하고, 값이 있을 때는 Optional Chaining 연산자 이후 내용을 실행합니다. 따라서 해당 오류를 방지할 수 있습니다.

Intro 타입스크립트를 사용하던 도중 아래와 같은 에러가 발생하였습니다. Property 'offsetTop' does not exist on type 'Element'.ts(2339) Why? document.querySelector('.page').offsetTop 다음의 코드가 있다고 가정해봅시다. 이 코드는 맞는 코드이지만, 결과값이 null이 될 수 있으므로 null 체크를 해줘야 합니다. 두번째로는, 현재 리턴 타입은 Element입니다. 하지만 Element는 offsetTop이라는 프로퍼티를 갖고 있지 않습니다. HtmlElement로 반환될 것이라고 예상할 순 있지만, SVGElement가 될 수 있기 때문에 컴파일러에게는 이 정보가 정확하지 않습니다. 따라서 이 부분 역시 type-a..