forwardRef React가 제공하는 forwardRef는 ref를 prop으로 넘겨서 부모 컴포넌트에서 정의한 ref를 자식 컴포넌트에서 사용하게 해주는 함수입니다. 왜 사용해야하는지는 그냥 ref를 props로 넘겨서 사용해보면 알게됩니다. 잘 동작하지 않아요.. 그렇지만 forwardRef가 제공하는 기능이 필요한 상황은 꽤 자주 존재합니다. 가장 흔한 예를 들면 인풋의 스타일을 통일시켜서 사용하기 때문에 스타일이 정해진 input 컴포넌트를 만들어서 재사용하고 있는 상황에서 form내부의 input 관리를 위해 ref를 달아주고 싶다고 가정해보면 컴포넌트에 ref를 넘겨주고 싶은 마음이 생기게됩니다. 그것을 위해서 forwardRef를 사용할 수 있습니다. 이런식으로 import React, ..
zod는 타입스크립트를 우선하는 스키마 선언 / 검증 라이브러리입니다. 타입스크립트의 타입체킹을 보완해주는 역할을 수행한다고도 볼 수 있는데 쉽게 생각하면 폼,인풋에 필연적으로 따라오는 유효성검증 로직을 해결해주는 라이브러리입니다. 기본적인 개념과 사용방법은 아래 링크에서 참고해주시기 바랍니다. https://xionwcfm.tistory.com/346 zod 라이브러리 사용법 간단히 익히기 zod zod는 타입스크립트를 우선하는 스키마 선언 / 검증 라이브러리입니다. validation을 도와준다고도 생각할 수 있는데 문법은 간결하고 쉬우면서도 기능은 강력합니다. 공식 documentation에 따르면 xionwcfm.tistory.com 이번엔 위 링크에서 얻은 선수지식을 기반으로 사용할 수 있는 회..
zod zod는 타입스크립트를 우선하는 스키마 선언 / 검증 라이브러리입니다. validation을 도와준다고도 생각할 수 있는데 문법은 간결하고 쉬우면서도 기능은 강력합니다. 공식 documentation에 따르면 스키마라는 용어는 모든 데이터 유형을 광범위하게 지칭하기 위해 사용하고 있다고하며 목표는 중복 형식 선언을 제거하기 위함이라고 합니다. 제로 종속성 / 8kb의 번들사이즈라는 것이 흥미롭네요 달레님의 포스트를 보며 제 나름대로 정리한 내용임을 미리 밝힙니다. https://www.daleseo.com/zod-why-validation/ 타입스크립트를 쓰는데도 유효성 검증이 필요할까? Engineering Blog by Dale Seo www.daleseo.com zod가 필요한 이유는 타입스..
React에서 Form은 대부분의 경우 폼을 구현할 때엔 제어컴포넌트를 사용하는 것이 좋습니다. 제어컴포넌트의 구현은 일반적으로 useState 비제어컴포넌트의 구현은 일반적으로 useRef를 통하여 이루어지곤 합니다. 하지만 중요한 점은 프로퍼티와 실제 구현일 것입니다. 타입스크립트를 이용하여 form / input / select 요소들을 타이핑하는 방법을 보겠습니다. onChange 이벤트를 타이핑하려면 e:React.ChangeEvent 리액트에서 제공하는 ChangeEvent를 이용합니다. 제네릭으로 HTMLInputElement를 전달합니다. 만약 셀렉트박스를 이용하는 경우 이렇게 유니온을 이용해 타이핑할 수 있습니다. e:React.ChangeEvent Input 대부분 이벤트가 발생했을때에..
🙄무수한 빨간줄을 해결하려면 최근에 새로 만들어본 yarn berry 프로젝트들이 다 이꼴이 났습니다. https://xionwcfm.tistory.com/283 좌충우돌 yarn berry 도입해보기 🐕 yarn berry yarn berry, yarn2 , yarn3.~~ 등 여러가지 이름으로 불리지만 결국 다 같은 것을 지칭한다고 볼 수 있습니다. yarn berry가 왜 좋은지 yarn berry를 왜 사용하는지는 이미 구글에 yarn berry를 검색하 xionwcfm.tistory.com 이 포스트를 적을 당시에는 문제없이 돌아가던 방법이 시간이 지나면서 되지 않는 현상이 발생한것이지요 https://learn-dev.tistory.com/9 cra + typescript + yarn berr..
해본이유 next.js의 app dir을 이용하는 프로젝트에서 json파일을 통해 mock data로 fetching을 시도해보던 중 페칭 자체는 잘 되었지만 에러가 발생하는 것을 확인했습니다. 그러다가 msw를 통해서 한번 해볼까? 라는 생각이 들어서 시도해봤는데 https://github.com/mswjs/msw/discussions/1498 MSW intercept for fetch of next.js 13 app dir server component · mswjs/msw · Discussion #1498 Currently I'm trying to mock the api response for data fetching with react server component (next.js 13 app d..
😐Critical Rendering Path란? MDN의 정의에 따르면 Critical Rendring Path는 브라우저가 HTML, CSS , JavaScript를 화면의 픽셀로 변환하기 위해 거치는 일련의 단계를 뜻합니다. 이 Critical Rendering Path를 최적화하면 렌더링 성능이 향상됩니다. 또한 Critical Rendering Path에 해당되는 것으로는 DOM , CSSOM, 렌더링트리, 레이아웃이 있습니다. 😑DOM?? Document Object Model의 줄임말로 HTML이 파싱될때 생성됩니다. HTML은 JavaScript를 요청할 수 있고 JavaScript는 차례로 DOM을 변경할 수 있습니다. 🤣Critical Rendering Path에 대한 이해 웹의 성능을 ..
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. package.json "proxy":"http://localhost:3080/" cra로 구축한 프로젝트에서는 package.json에서 proxy 프로퍼티를 추가해주는 것만으로도 간단하게 개발환경에서 프록시 서버를 운용할 수 있습니다. 하지만 제 환경의 경우 위와같이 invalid options이라며 개발서버가 시작되지 못했습니다. 처음엔 문법의 문제인가 싶어 여러가지 문법들을 적용해보았습니다. package.json "devServer":{ "proxy":{ "/api":{ "target": "..
