React & TypeScript42 [Next.js] Next.js 13 활용법 Basic 동적 라우팅 생각보다 간단하다. slug 라는 형태로 sub page를 만들어 준다. 예전 회사에서 왜 CRA를 썼던 건지 의문이다. 생각해보면, 에전에 만났던 개발자분들도 막연히 낯서니까 프론트페이지 구축을 CRA에서 멈췄던 것 같다. 그러나, 결국 Next를 익히는 허들이 CRA와 그닥 차이가 없다. ...오늘은 시간이 없어서 나중에 계속쓰자..ㅠ 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".. 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보다 사용하기에 단순하고 편리하다고 한다. 실제 익혀서 사용까지 매우 금방이었다. (결국은 짬바인가? 얼마되진 않지만 전보다는 쉬워졌다. 오히려 개념을 익히는 게 더 시간이 많이 걸리지 않을까 싶다.) 공식 사이트에 있는 아래 영상을 보면서 개념을 익히는 것도 매우 유용.. 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 .. 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 = () => { // .. 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.. 2022. 12. 19. 이전 1 2 3 4 5 ··· 7 다음
