쌓아가는 개발 스토리

여러장의 이미지가 있을때 이를 슬라이드 하여 보여주고 싶었고 이를 위하여 swiper.js를 사용해보았다. 기본적으로 제공되는 파란색깔의 네비게이션과 페이지네이션이 마음에 들지 않았기에 이를 다른 색깔과 이미지로 바꿔서개발을 진행하였다. 설치 npm install swiper import import SwiperCore, { Navigation, Pagination } from "swiper"; import "swiper/swiper.min.css"; import "swiper/css/navigation"; // 네비게이션 사용 import "swiper/css/pagination"; // 페이지네이션 사용 SwiperCore.use([Navigation, Pagination]); 구현 코드 {image..

회원가입 페이지를 구현하는데 있어 이메일 형식 검사나 비밀번호 일치확인 검사가 필요하였고 이를 위해 커스텀 훅을 사용하였다. 다음은 useInput 커스텀 훅으로 input 태그의 입력 값을 관리하는 코드이다. import { useState, useCallback } from "react"; import { signUpInputType } from "../../../types/userDto"; export const useInput = () => { const [signUpForm, setSignUpForm] = useState({ email: '', id : '', // 사용자 ID (이메일 형식) password : '', // 비밀번호 gender : '', // 사용자 성별, 'M' : 남자, ..

react에서 게시글에 댓글을 작성할 수 있는 기능을 개발하고자 했다. input태그에서 텍스트를 입력하고 게시 버튼을 클릭하면 댓글이 작성되도록 만들었는데 Enter키를 눌렀을때도 같은 동작을 할 수 있도록 하고싶었다. 다른 페이지에서도 이를 활용할 가능성이 있어 Custom hook으로 빼서 개발을 진행하였다. 호출하는 부분 const [comment, setComment] = useState(""); const { buttonRef, handleKeyDown} = useBtnWithEnter(EventCommentCreate); // 커스텀 훅 /* 댓글 달기 Event */ const EventCommentCreate = () =>{ 통신하는 부분 ... setComment(""); // 통신 성..

회원가입 페이지를 구현하는데 휴대폰 번호를 입력받아야 했다. 010-1234-5678 형식으로 자동으로 하이푼(-)이 생성될 수 있도록 하고싶었다. 이를 위해 input 태그의 onChange이벤트를 통하여 handlePhone함수를 호출하였고 handlePhone 함수에서 검사를 통해 state를 업데이트 하였다. const [phone, setPhone] = useState(''); const handlePhone = (value: string) => { const onlyNumber = value.replace(/\D+/g, ''); const numberLength = 11; let result = ""; for(let i=0; i { handlePhone(e.target.value); }, [p..