리액트 개발을 하던 중 useLayoutEffect를 마주쳤다.이름만 봤을 땐 useEffect와 비슷해 보이는데 Layout이 무엇인가 궁금해졌다.  먼저, 브라우저 렌더링 과정에 대해 정리해 보자.1. 브라우저가 서버에 필요한 리소스를 요청한다.(Navigation)2. HTML파일과 CSS파일을 파싱 하여 각각의 DOM트리와 CSSOM 트리를 만든다(Parsing)3. 두 트리를 결합하여 렌더 트리를 만들고(Render Tree)4. 렌더 트리에서 각 요소의 위치와 크기를 계산한다(Layout)5. 계산된 값을 바탕으로 요소들의 스타일을 적용하고, 픽셀로 변환하여 화면에 그림을 그린다.(Painting)6. 페인트 단계에서 생성된 레이어들을 합성하여 실제 화면에 나타낸다.(Composite)  us..

화면 너비에 따라 반응형 디자인을 위해 useMediaQuery과 @media가 자주 사용되는데, 각각 사용 환경과 방식이 다르다.  @media@media는 주로 css 파일이나 태그 내부에서 사용하는 반응형 스타일링 방법으로 css 파일에 직접 작성해 특정 화면 크기에 따라 스타일을 적용할 수 있다.html이나 js 파일을 수정하지 않고도 반응형 디자인을 적용할 수 있다는 것이 장점이다.box { width: 100%; background-color: blue;}/* 화면 너비가 768px 이하일 때 스타일 변경 */@media (max-width: 768px) { .box { background-color: red; }} @media 설정으로 .box의 배경색은 기본적으로 파란색이지만..

tailwind에는 너비를 조절하는 클래스 중 w-screen과 w-full이 있는데, 둘 다 너비를 조절하는 클래스지만 미묘한 차이가 있다. w-screen(width: 100vw)w-screen은 브라우저 화면 전체 너비, 즉 눈앞에 당장 보이는 화면의 너비를 100vw(viewport width)로 설정한다.vw(viewport width)란?현재 브라우저 화면의 너비를 기준으로 한 상대적인 크기1vw = 현재 브라우저 화면 너비의 1%예를 들어, 화면 너비가 1200px이면100vw = 1200px50vw = 600px10vw = 120px  w-full(width: 100%)w-full은 부모 요소의 너비에 꽉 채우는 방식으로, 즉 해당 요소가 포함된 부모 컨테이너가 특정한 너비를 가지고 있을 ..

zod에서 타입 검증 후 수행할 수 있는 데이터 처리 및 에러 메시지 등을 커스텀하는 방법에 대해 알아보려 한다. .transform()transform은 스키마 검증을 통과한 데이터를 입맛에 맞게 변경하고 싶을 때 사용할 수 있다.입력된 문자열이 스키마 검증을 통과했을 때, 문자열의 길이로 변환하고 싶다면 transform() 내부에 length를 리턴하도록 함수를 작성해 주면 된다.// 입력된 문자열을 문자열의 길이로 변환 const stringToNumber = z.string().transform((val) => val.length); stringToNumber.parse("string"); // 6 이전 글에서 사용했던 userSchema에서 사용자의 이름을 입력받은 후 이름의 길이를 필요로 한..

Zod는 주로 타입스크립트와 함께 사용되며, 정적 타입 추론을 통해 스키마 유효성을 검증하는 데 유용한 라이브러리이다.TypeScript-first schema validation with static type inference 정적 타입 추론을 위해선 먼저 스키마를 정의해야 한다.프론트단에서 사용자 정보에 대한 응답을 다루는 로직을 개발하고 있다고 가정하자.  스키마 정의API의 응답 객체가 id, name, email, admin, createdAt 필드로 구성되어 있다고 할 때, zod를 사용하여 다음처럼 userSchema를 구성할 수 있다.const userSchema = z.object({ id: z.number(), name: z.string(), email: z.string().ema..

React-query v5(TanStack Query) 설치npm i @tanstack/react-query 최상위 컴포넌트를 QueryClientProvider로 감싸줘야 함import { QueryClientProvider, QueryClient } from '@tanstack/react-query';const queryClient = new QueryClient();function App() { return ( ... );} useQuery v5에서 onSuccess, onError, onSettled 콜백들은 이제 사용되지 않음import { useQuery } from '@tanstack/react-query'const { data, error, isLoading } ..