React & TypeScript41

• 

  MUI-Stack, Box, sx(스타일링) 적용에 대한 고찰 display : flex 먹힌 Box 라고 보면 된다. Stack 이나 Box나 다 div 로 치환된다. sx 로 style을 먹이면, css는 css module 형태로 적용되어 css 중첩을 방지시킨다. MUI 꽤 좋아진 거 같다. React & TypeScript/React 2024. 2. 22.

• 

  [ESLint] naming-convention 설정방법 작성한 코드 rules: { // eslint-disable-next-line @typescript-eslint/naming-convention "@typescript-eslint/naming-convention": [ "warn", { selector: "typeAlias", // 타입선언 format: ["PascalCase"], }, { selector: "memberLike", // Property 멤버 format: ["camelCase"], }, { selector: "function", // exported function (컴포넌트 명) format: ["PascalCase"], modifiers: ["exported"], }, { selector: "function", // functio.. React & TypeScript/TypeScript 2023. 11. 23.

• 

  [React] useId 이거 언제쓰지...싶을 때. (사용 예시) React-hooks에 있던 useId. 이거 대체 언제 쓰나 싶었었다. 딱히 별 다른 건 아니고, unique ID를 생성하는 건데, 늘 언제쓰는거지 싶었었다. 오늘 사용 했었는데, input과 label을 연결해줄 때 사용했다. component 중 일부의 코드다. 아래와 같이 input 과 label을 연결해줄 때, 동일한 ID를 입력해야해서, component 생성 때마다 unique id가 발급되도록 만들어주었다. 생각보다 유용했다. const connectionId = useId(); const [isChecked, setIsChecked] = useState(checked); return ( {...} ); 참고 useId – React The library for web and native.. React & TypeScript/React 2023. 11. 15.

• 

  [TypeScript] GENERIC Basic (그래서, T야?) 배경 생각해보면, 예전에 교수님 수업시간에 C언어 설명하실 때도, GENERIC으로 표현된 C언어 함수를 보여주셨던 것 같다. 그 때는, 거의 코딩을 모르는 상태라서 아예 못알아봤던 것 같고 늘 모르고 살던 것을 알았을 때의 "개안" 상태가 된 것 같다. 늘.. T가 뭐지? 하면서 라이브러리나 github 소스코드를 보곤 했었으니까.. 문제 function checkNotNull(arg: number | null): number { if (arg == null) { throw new Error("not valid number!"); } return arg; } const result = checkNotNull(23); console.log(result); checkNotNull(null); 위와 같이 작.. React & TypeScript/TypeScript 2023. 8. 22.

• 비공개 - [TypeScript] 활용법 Basic (이 건 뭐고, 저 건 또 뭐야? 싶을 때 보는) 보호되어 있는 글 입니다. 2023. 7. 10.

• 

  [Next.js] Next.js 13 활용법 Basic 동적 라우팅 생각보다 간단하다. slug 라는 형태로 sub page를 만들어 준다. 예전 회사에서 왜 CRA를 썼던 건지 의문이다. 생각해보면, 에전에 만났던 개발자분들도 막연히 낯서니까 프론트페이지 구축을 CRA에서 멈췄던 것 같다. 그러나, 결국 Next를 익히는 허들이 CRA와 그닥 차이가 없다. ...오늘은 시간이 없어서 나중에 계속쓰자..ㅠ React & TypeScript/React 2023. 6. 2.

• 

  [React] React.memo로 만드는 성능 최적화 기법 개요 가끔씩 React.memo에 대해 왜 쓰는지 이해가 안가는 경우가 많았다. 이건 또 뭔가 싶고. 개선해도 얼마 되지도 않고.. 오늘에서야 그 이유를 정확히 알게 된 것 같아서 글을 정리하게 되었다. 😁 React.memo 라는 것 한문장으로 정리하면, props가 변경되지 않으면, 재 렌더링 하지 않게 하는 것 그렇다. 이게 끝이다. 그럼 언제 사용할까? 당연하게도, props가 변경되지 않는데, 자꾸 재 렌더링해서 성능이 저하 되는 경우에 사용한다. 예제 코드 // parents.tsx // ... {toDos.map((toDo, index) => ( ))} {magic.placeholder} // ... // children.tsx import React, { memo } from "react".. React & TypeScript/React 2023. 1. 26.

• 

  [React / Recoil] 예제로 알아보는 Recoil (컨셉, 환경세팅, Atom, Selector) This Document wrote based Recoil v0.7.6 at 2022.12.30. 1. Concept 전역 상태 관리를 하는 상태 관리 라이브러리이다. key, value를 한 쌍으로 이루어서 사용한다. React를 만든 메타에서 직접 만든 Library이기 때문에, React답게 유지하려고 만들었다고 한다. 나는 redux(현재까지 좀 더 많이 사용 중인)를 안써봤기 때문에 잘 모르지만, 비교 사용해본 사람들은 redux보다 사용하기에 단순하고 편리하다고 한다. 실제 익혀서 사용까지 매우 금방이었다. (결국은 짬바인가? 얼마되진 않지만 전보다는 쉬워졌다. 오히려 개념을 익히는 게 더 시간이 많이 걸리지 않을까 싶다.) 공식 사이트에 있는 아래 영상을 보면서 개념을 익히는 것도 매우 유용.. React & TypeScript/Recoil 2023. 1. 9.

• 

  [TypeScript] as 사용에 대한 이해 (feat. Type Assertions) 찾게된 이유 & 해결 ... // 에러 상황 data: data?.map(price => Number(price.close)), ... // 발생된 에러 TS2769: No overload matches this call. Overload 1 of 2, '(props: Props | Readonly): ReactApexChart', gave the following error. Type '{ name: string; data: number[] | undefined; }' is not assignable to type 'number'. Overload 2 of 2, '(props: Props, context: any): ReactApexChart', gave the following error. Type .. React & TypeScript/TypeScript 2022. 12. 27.

• 

  [React / TypeScript] props를 구조분해할당으로 전달받을 때 Type Error (TS2322) 문제상황 TS2322: Type '{ data: ReservationDataType[]; }' is not assignable to type 'IntrinsicAttributes & ReservationDataType[]'. Property 'data' does not exist on type 'IntrinsicAttributes & ReservationDataType[]'. // 부모 컴포넌트 import React from "react"; import RenderComponent from "./RenderComponent"; import type { ReservationDataType } from "interface/interface"; const ReservationList = () => { // .. React & TypeScript/TypeScript 2022. 12. 20.

• 

  [React / Ant Design] Ant Design에서 Calendar Localization 하는 법 Antd ConfigProvider 적용 import React from "react"; import AppLayout from "./components/AppLayout/AppLayout"; import { ConfigProvider } from "antd"; import "dayjs/locale/ko"; // 1번 import koKR from "antd/locale/ko_KR"; // 2번 const App = () => { return ( ); }; export default App; 1번 라인 : Jan~Dec -> 1월 ~ 12월로 표현 바뀜 (세부목록은 json 참고) 2번 라인 : 전체 placeHolder 가 적용되는 것 참고 https://cdn.jsdelivr.net/npm/dayjs.. React & TypeScript/React 2022. 12. 19.

• 

  [TypeScript] Tip - 자동으로 Type 추출 API 에서 받아오는 Data같은 경우 Type을 직접 interface로 작성해주려면 귀찮다. 아래 사이트에서 json copy & paste 하면 interface 자동으로 추출해줌. https://app.quicktype.io/?l=ts Instantly parse JSON in any language | quicktype app.quicktype.io React & TypeScript/TypeScript 2022. 12. 19.