후... 버튼이나 에러 있으면 보여줘야 하는 것들이 있어 원래 썼던 리액트 훅 폼을 수정했다. 기존 코드는'use client';import { useForm, useWatch, FieldErrors } from 'react-hook-form';import { formType } from '@/types/authFormType';import { signUp } from '@/services/auth';import { emailValidate, passwordConfirmValidate, passwordValidate,} from '@/components/auth/AuthValidate';import toast from 'react-hot-toast';import { useRouter } from '..
먼저 useRef를 만들어준다. 보통 하나의 Dom 요소를 참조할 때는const myRef = useRef(null);이렇게 쓴다. 그럼 myRef.current는 하나의 HTMLDivElement를 참조하게 된다. 그러나 여기서는 여러 개의 HTMLDivElement를 참조해야 한다!각 요소는 고유한 order.id를 가지고 있고, 이를 통해 각 요소를 구분할 수 있다.const ticketContainerRef = useRef({});따라서, 여러 개의 요소를 관리하기 위해 객체를 사용한다.객체는 여러 개의 키와 값 쌍을 저장할 수 있기 때문에 order.id를 키로 사용하고, 해당 HTMLDivElement를 값으로 저장할 수 있다. 예로 들면{'order1': order 1}{'order2': o..
캐러셀import 'swiper/css';import 'swiper/css/navigation';import 'swiper/css/pagination';import { Swiper, SwiperSlide } from 'swiper/react';import { Navigation, Autoplay } from 'swiper/modules';import Image from 'next/image';function TourGuideSWiper() { const images = [ 'https://i.ibb.co/VjYCQkc/1.gif', 'https://i.ibb.co/TYj8mTz/2.jpg', 'https://i.ibb.co/ZXD4Kwh/3.jpg', 'https://i.ibb.c..
card-flip 카드 뒤집어지는 효과'use client';import React, { useState } from 'react';import ReactCardFlip from 'react-card-flip';import { useRouter } from 'next/navigation';import Image from 'next/image';import { Tour } from '../../types/flipCardType';const CardCom = ({ tour }: { tour: Tour }) => { const [isFlipped, setIsFlipped] = useState(false); const router = useRouter(); const handleMouseEnter = ()..
모의 면접 질문 더보기자기소개프론트엔드 선택이유프론트 어떻게 공부협업 과정에서 어려웠던 점, 어떻게 극복 했는지좋은 협업환경의 요인은 무엇이라고 생각하는지어떻게 우리회사에 기여할 것인지가장 이상적인 근무환경자기개발 어떻게 하는지가장 최근에 배운 것동기부여를 하는 방법프로덕트 퀄리티 vs 데드라인자바스크립트의 특징자바 스크립트가 비동기 작업이 가능한 이유리액트 특징가상돔함수형 컴포넌트 생명 주기 (useEffect)flux 구조hook 을 조건문 안에서 사용할 수 없는 이유API 정의SEO 란1. 자바스크립트의 특징더보기자바스크립트는 싱글스레드 언어로, 한번에 하나의 작업만 가능합니다.하지만 이벤트 루프와 콜백 큐를 이용해 비동기 처리가 가능합니다.또한, 변수의 타입을 언제든지 필요에 따라 변경할 수 있는..
토스의 퍼널 패턴 퍼널이라는 개념은 깔때기 모양처럼 단계별로 진행되는 과정을 말함이 개념을 토스와 같은 서비스의 회원가입 절차에 적용한 것이 패널 패턴임이를 통해, 사용자 경험을 보다 직관적이고 효과적으로 만드는 것을 목표로 함 토스에서는 여러 단계의 폼을 하나씩 입력하게 하는 방식으로 회원가입을 진행함 토스에서 제안한 퍼널 패넡은 다음과 같은 방식으로 구현할 수 있음1. 단계별 UI 렌더링 -> 각 단계는 별도의 컴포넌트로 만들어짐-> 현재 단계에 따라 해당 컴포넌트를 조건부로 렌더링함-> 상태 관리에서는 useState 훅을 사용해 현재 단계와 사용자 데이터 관리 2. 조건부 렌더링 및 상태 업데이트ex. 첫 번째 단계인 가입 방식에서 선택이 완료되면 다음 단계인 주민버호 입력 화면으로 전환되고, 이..
