madisonrubylee madisonrubylee

https://developer.apple.com/documentation/webkitjs/htmlmediaelement/1633059-preload

https://devblogs.microsoft.com/typescript/announcing-typescript-5-0-beta/

1. 상수를 사용한 조건 if ( status === 1 || statue === 2) { ... } API 응답으로 필드 값에 따른 조건 분기가 필요한 경우, 우리는 보통 API명세서를 확인하여 조건문을 활용한 코드를 만듭니다. 하지만 이후에 다른 프론트엔드 개발자가 이 코드를 봤을때 저게 어떤 값이고, 어떤 뜻인지 알기 어려울 확률이 큽니다. 조건문들은 상수를 통해 따로 관리한다면 이런 문제점들을 보완할 수 있습니다. // constant.js export const STATUS = { admin: 1, user: 2, .... } import { STATUS } from './constant.js'; if ([ STATUS.admin, STATUS.user].includes(status)) { ....

Utility-First 회사에서 MUI를 걷어내고 Tailwind CSS를 도입하기로 정해져서, 공식문서를 읽어보고 작은 토이프로젝트에 TailwindCss를 적용하기로 했다. Tailwind에 정의된 utility 를 이용하여 빠르고 간편하게 스타일을 정의할 수 있고 ( utility-first ), 클래스명을 짓기 위해서 고민하는 시간도 줄어드는 low-level Css 프레임워크 입니다. Headless UI with Tailwind CSS headless UI 를 tailwind와 함께 사용해서 접근성이 고려된 React 컴포넌트를 쉽게 만들수 있습니다. Cheet Sheet tailwind CSS 의 다양한 utility를 다 외우기는 엄 .. 힘들것 같다고 판단하여 익숙해지기 전까지는 che..

Text Component 만들기 Generic Prop에 알맞는 컴포넌트만을 받는 방법 * React.ComponentPropsWithoutRef 을 사용하여 타입을 확장하면 제네릭으로 컴포넌트를 받았을때 유효한 속성을 작성하기 쉬워집니다. ㄴ ComponentPropsWithRef : ref를 포함한 속성들을 정의할 수 있습니다. ComponentPropsWithoutRef: ref를 제외한 속성을 정의할 수있습니다. (The ComponentPropsWithoutRef type can be used to grab all the native attributes of an HTML element as the props type of your component. ) 관련있는 props를 받기위해 컴포넌트..

Use object instead of “switch” Use the “includes” method instead of multiple “if” Use the default parameters of the ES6 function Use “+” to convert string to number Initialize the array with “fill”

JSX에서 prop과 함께 렌더링되는 컴포넌트 제네릭 컴포넌트 제네릭 함수 제네릭 함수는 아래와 같이 사용할 수 있습니다. 만약 화살표 함수를 사용한다면 아래와 같은 에러가 발생합니다. 이를 해결하기 위해서는 아래와 같이 사용할 수 있습니다. trailing comma를 사용하여 더 간단하게 표현할 수도 있습니다.

Polymorphism Polymorphism (다형성) 은 객체지향 프로그램의 코어 컨셉중 하나입니다. 자바스크립트에서 다형성은 다른 signatures(input and output of functions or methods)을 가지는 동일한 함수가 여러번 호출되는것을 뜻합니다. Polymorphic React Component 많이 사용하는 Chakra UI, MUI가 대표적인 polymrphic component를 구현한 오픈소스 라이브러리 입니다. 리액트컴포넌트에서 다형성을 구현하는 간단한 방법은 아래와 같습니다. 컴포넌트는 다형성을 prop으로 받아야합니다. 컴포넌트는 전달받은 항목을 element 타입으로 렌더링 해야합니다. 타입스크립트를 사용한다면, 컴포넌트는 전달받은 element 타입/..