TypeScript
Typescript의 공변성과 반공변성
공변성과 반공변성 '공변성(Covariance)'과 '반공변성(Contravariance)'은 Typescript를 다루는 개발자라면 누구나 매일매일 접하고 또 사용하는 개념이지만, 나를 포함해서 해당 개념을 매번 의식하고 인터페이스를 설계하는 사람은 많지 않을 것이다. 공변성과 반공변성이 타입스크립트에서 가지는 의의를 이해하기 전에, 먼저 공변성이 뭔지, 반 공변성이 뭔지부터 이해하고 가보자. 공변성 더 많이 파생된(더 구체화된) 형식을 사용할 수 있다. I 형식의 변수에 할당할 수 있다. 쉽게 풀어서 설명하려고 해도 되지 않으니 예시를 들어서 한 번 살펴보자. 다음과 같은 타입 A,B,C가 있다. type A = string type B = string | number type C = string |..
[TS] Type과 Interface로 테스트용 Mock Data 만들기
Mock Data의 필요성 프론트엔드 개발을 하는 입장에서는 백엔드 API가 이미 다 준비되어 있고, 인터페이스도 공유가 된 상태에서 작업을 시작하는 게 최고의 상황일 것이다. 그러나 세상일이 늘 그렇듯 상황이 원하는 대로 흘러가지는 않는 법. 꽤나 빈번한 상황에서 프론트 개발자는 백엔드의 인터페이스만 공유받거나, 혹은 그마저도 공유받지 못한 상황에서 개발을 시작해야 한다. 필자는 이런 상황에서 미리 Mock API를 만들어 내부적인 테스트를 먼저 진행하고, 추후 백엔드 API가 나오면 Mock API와 교체하는 방식으로 프로젝트에 소요되는 시간을 최대한 아끼려고 노력하였다. 다행히 Typescript를 사용하면서 API의 요청과 응답 값을 미리 Typing 해 놓을 수 있었기 때문에 요청 값과 응답 값..
라이브러리 없이 typescript/reactHook 으로 다국어 지원하기
리액트 라이브러리 중 다국어를 지원하는 라이브러리는 물론 많지만, 간단한 랜딩 페이지 제작에서까지 라이브러리를 사용하기엔 뭔가 귀찮은 부분이 있다. 오늘은 간단하게 react hook 과 typescript만을 사용해서 자동완성 기깔나게 지원하는 다국어 지원 기능을 뚝딱 만들어보자 먼저, 예제에서 지원하는 언어셋은 한국어, 영어라고 가정하자 언어 타입을 만든다. export type LanguageType = "ko" | "en"; 언어셋을 담을 자바스크립트 파일도 하나 만든다. /constants/lang.ts const STRING_ESSETS = { MAIN_TITLE: { ko: "훅을 사용한 다국어 예제입니다.", en: "useMuiltilingual Example" }, SUB_TITLE: ..
표(Table)을 만들 때 사용하는 코드 (1편)
코드 반 주석 반 첫 번째 포스팅은 여러군데에서 써먹을 수 있을만한 테이블 컴포넌트이다. 시작에 앞서, 포스팅에 사용되는 기술스택은 다음과 같다. react typescript styled-component 만들어야 하는 결과물은 다음과 같다. 고려해야 할 조건은 아래의 10개 정도로, 꽤 많다. 표의 각 셀은 제목과 내용으로 이루어져 있음 제목과 내용은 기본적으로 텍스트(string)가 온다고 가정하지만, 경우에 따라 어떤 요소든 받을 수 있어야 함 한 행에는 1개 혹은 2개의 셀이 올 수 있음 행의 높이는 가장 내용이 많은 셀 기준으로 맞춰짐 (수직정렬은 가운데) 행에 셀이 1개 인지 2개 인지에 따라 셀의 크기가 달라짐 (전체 너비의 100% / 50%) 표의 너비는 컨테이너의 너비에 따라 반응형으..
[react] 화면에 보일 때 렌더링 되는 이미지 컴포넌트(Lazy Load Image) - IE11 polyfill
이미지 최적화와 웹 사이트 속도는 떼려야 뗄 수 없는 관계이다. 이미지의 용량을 압축과 최적화를 통해 줄일 만큼 줄였다면, 이제 페이지 로딩 시간을 향상하기 위한 지연 로딩(Lazy Loading)을 적용해보자. 지연 로딩이 적용된 이미지는, 사용자의 눈에 충분히 노출되기 전에는 데이터 요청이 일어나지 않게 할 수 있다. 그러므로 이를 통해 페이지의 초기 로딩 속도를 비약적으로 향상시킬 수 있다. React와 TypeScript를 사용한 이미지 컴포넌트 코드는 다음과 같다. Image.tsx import React, { useEffect, useRef, useState } from "react"; //* polyfill 2개. 아래에 설명있음*// import "intersection-observer";..