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 } ..

spring boot는 기본적으로 8080 포트에서 서버가 실행된다. 기본 서버 포트가 아닌 다른 포트에서 서버를 실행하고 싶으면 spring boot 설정 파일인 application.properties 또는 application.yml에서 포트 설정을 해주면 된다.  여기서는 9090 포트로 변경하고 있으니, 9090 대신 원하는 포트번호를 작성하면 된다.  application.propertiesserver.port = 9090 application.ymlserver: port: 9090  설정 파일 변경 후 서버를 실행시켜 보면 정상적으로 9090 포트에서 tomcat 서버가 실행된 것을 볼 수 있다.

maven - pom.xml org.postgresql postgresql runtime  application.propertiesspring.datasource.url=jdbc:postgresql://localhost:5432/postgresspring.datasource.username=유저이름spring.datasource.password=비밀번호  예시 Entity 코드package com.example.testproject.data.entity;import jakarta.persistence.Entity;import jakarta.persistence.Id;import jakarta.persistence.Table;import lombok.*;@Entity@Getter@Sette..