본문 바로가기
반응형

WebDev/항해9942

실전 프로젝트 세팅(닉네임) 사용자가 입력한 새로운 닉네임을 서버에 전송하고, 필요에 따라 에러 메시지를 표시. 변경사항을 확인하기 위해 모달을 사용하여 확인 메시지를 표시하며, 모달에서 확인 버튼을 클릭할 때만 닉네임 업데이트를 실행 UpdateNickNameProps 타입은 nickname이라는 선택적 속성을 가지고, useInput 커스텀 훅으로 nickName 상태와 onClickNickName 핸들러 함수를 생성. useState 훅으로 ServerNicknameError, error, isModalOpen, modalMessge 상태와 그에 대한 setter 함수들을 생성. useMutation 훅으로 mutate 객체를 생성하고 updateUserSetting API 호출과 결과 처리 로직을 포함. validateNic.. 2023. 9. 8.
실전프로젝트 세팅[테마(라이트모드/다크모드)] 테마를 변경하는 컴포넌트 맑은 하늘 버튼을 클릭하면 라이트 모드로, 별무리 하늘 버튼을 클릭하면 다크 모드로 테마를 변경 useState hooks와 Redux의 useDispatch hook을 가져오기. 상태 관리 Themes 컴포넌트는 theme prop을 받아서 현재 설정된 테마에 따라 UI를 조정. Redux dispatch 함수를 사용하여 액션을 발생. handleLightModeClick 및 handleDarkModeClick 함수는 각각 라이트 모드와 다크 모드로 전환하는 로직을 수행. 각 버튼은 onClick 이벤트 핸들러로 위에서 정의한 handleLightModeClick 및 handleDarkModeClick 함수를 들고있음 클릭 시 해당 함수가 실행되어 테마가 변경 type sett.. 2023. 9. 7.
실전프로젝트 세팅(프로필 컴포넌트) props에 대한 타입을 정의 이 컴포넌트는 userImage, preset, nick, email, direction 프로퍼티를 받음 이후 state 변수인 profileImage와 nickname을 선언 첫 번째 useEffect 훅은 프로필 이미지 설정 로직. 만약 props으로 받아온 preset이 1일 경우 사용자가 직접 설정한 이미지(userImage)를 사용하고 아니라면 사전에 정해진 이미지 중 하나(foundPreset)를 선택하여 사용하고 다른 useEffect 훅은 사용자가 닉네임을 변경할 때마다 실행되어 상태 변수인 nickname 값을 업데이트 마지막으로 React.memo를사용해서 props가 변경되었을 때만 리렌더링을 수행하도록 최적화 import React, { useEffec.. 2023. 9. 6.
실전프로젝트 세팅(인풋컴포넌트) 세팅컴포넌트 하위 컴포넌트인 인풋 컴포넌트 ProfileInputProps라는 타입은 이 컴포넌트가 받아들일 수 있는 props의 형태를 정의. 이 타입은, 다양한 선택적 props(updateText, value, name, placeholder, label, 그리고 'password' 또는 'text' 중 하나인 type)와 필수적인 함수 prop인 onChange를 적음. 만약 label prop이 전달되었다면, 해당 텍스트로 레이블 요소를 생성 나머지 모든 props(...restProps)가 input 요소에 전달 만약 updateText prop이 전달되었다면, 해당 텍스트로 수정 안내문구(span 요소)를 생성 마지막으로, React.memo() 함수에 의해 감싸져서 내보내집니다 - 즉, 동.. 2023. 9. 5.
실전프로젝트 세팅컴포넌트 세팅 컴포넌트는 4가지 컴포넌트를 안고 있기 때문에 우선 큰 부분 부터 적어 놓으려고 한다. Setting 컴포넌트: 여기 컴포넌트는 유저 설정 페이지의 주요 기능을 모아둠. 프로필 사진 및 닉네임 수정, 테마 설정 변경, 비밀번호 수정 등의 기능이 포함. useMutation과 useQuery 훅 사용: react-query의 useMutation과 useQuery 훅은 서버로부터 데이터를 가져오거나 업데이트하는 작업을 용이하게 함 로그아웃 기능 구현: 로그아웃 버튼 클릭 시 실행되는 onLogOut 함수에서 로그아웃 API를 호출하고 성공적으로 응답이 오면 쿼리 데이터와 Redux 상태를 초기화하여 로그인 정보를 제거. 유저 정보 요청 및 처리: getAuthToken, getUserSetting A.. 2023. 9. 4.
실전프로젝트 회원가입 로직 const validateEmail = (email: string) => { const emailRegex = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/; return emailRegex.test(email); }; const validatePassword = (password: string) => { const passwordPattern = /^(?=.*\d)(?=.*[a-zA-Z]).{8,}$/; return passwordPattern.test(password); }; const validateNickname = (nickname: string) => { const nicknamePattern = /^.{2,8}$/; return nicknamePatter.. 2023. 9. 2.
반응형

티스토리툴바