전체 글
-
[JavaScript Tips] 조건문 내 상수를 활용한 조건Front-end/Javascript 2023. 1. 26. 10:10
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)) { ....
-
[Tailwind CSS]Front-end 2023. 1. 24. 13:45
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..
-
[Polymorphic React Component] - 2Front-end/React 2023. 1. 24. 11:40
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를 받기위해 컴포넌트..
-
2023.1.9개인공부/영어 2023. 1. 9. 09:08
Quebec continues to wrestle with opioid crisis Over 1,200 overdose-related deaths reported between January 2019 and July 2022 wrestle : to fight with someone (especially as a sport) by holding them and trying to throw them to the ground: wreak : to cause something to happen in a violent and often uncontrolled way: havoc : confusion and lack of order that result in damage or trouble: grapple : to..
-