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": "..
😎마치 useEffect의 의존성배열과 비슷하다! 리액트 쿼리는 모든 리렌더링에 대해 queryFn을 트리거하지 않습니다. 기본적인 유효기간(0초)가 지나도 마찬가지로 queryFn을 트리거하지 않아요 왜 그럴까요? 리액트에서 리렌더링은 굉장히 많이 일어날 수 있습니다. 이런 리렌더링마다 비용이 비싼 fetch 요청을 보내는 것은 미친짓이라고도 할 수 있습니다. 그러니... 한번 받아왔다면 revaildate가 필요하기전까지는 fetch를 하지 않는게 맞겠네요! 그런데 쿼리는 여러개일 수 있어요 각각의 쿼리에 대한 아이디가 있어야 어떤 쿼리가 바뀌었는지 인식할 수 있을 것이고 특정한 쿼리가 바뀌면 화면도 바뀌어주어야하겠죠? 마치 useEffect가 의존성배열에 있는 요소에 변화가 생기면 트리거되는것처럼 ..
CI/CD https://xionwcfm.tistory.com/309 CI/CD와 무중단 배포 🐕 CI/CD 무중단 배포 위키 백과에 따르면 CI/CD는 소프트웨어 공학에서 지속적 통합(continuous integration)과 지속적 배포(continuous delivery)가 결합한 사례 를 의미합니다. 즉 소프트웨어의 개발, 테스트 xionwcfm.tistory.com ci/cd에 관한 내용은 이전에 정리해둔 글이 있으니 링크로 대체합니다. 애플리케이션이 사용자에게까지 전달되려면 테스트 , 빌드, 배포 과정을 거쳐야만 할 것입니다. 테스트를 통해 새로 수정된 애플리케이션이 정상적으로 동작하는지 확인할 수 있어야하고 프론트엔드가 담당하는 부분같은 경우에는 여러가지 프레임워크들을 이용해 작업한 파일들..
