FrontEnd/기타

화면 너비에 따라 반응형 디자인을 위해 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..

프론트엔드 개발을 하다 보면, 마우스를 hover 하거나 click 했을 때 해당 element의 크기 또는 text의 위치가 의도한 바와 다르게 아주 조금씩 어긋나는 경우를 한 번쯤 경험해 봤을 것이다. 이런 경우, 혹시 내가 설정한 css 속성에 border가 있는지 한 번 확인해 보길 바란다.   웹페이지에서 F12를 눌러 개발자모드에서 styles 탭의 가장 아래쪽에서 해당 element의 속성을 보자.   아래 그림에서 볼 수 있듯이 element의 전체 크기에는 margin, border, padding이 모두 포함된다.  즉, border는 element의 전체 크기에 영향을 준다. 그러나 outline은 포함되지 않아 element의 전체 크기에 영향을 주지 않음을 알 수 있다.   따라서..

Recoil 공식문서를 바탕으로 사용법을 정리하였습니다. 개념뿌리(atoms)로부터 순수함수(selectors)를 거쳐 컴포넌트로 흐름React의 내부에서 사용하는 상태관리(ex. usestate)처럼 get/set을 사용하여 전역 상태 관리  패키지 설치npm install recoil  라이브러리 불러오기import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue,} from 'recoil';  RecoilRootRecoilRoot는 root component에 사용function App() { return ( // 이렇게 감싸주어야 함 );}  AtomAtom은 Recoil에서 상태(state)를 정의함어..