개발일기

유효성검사 및 안내메시지 ID // id // 아이디 입력(6~20자) const [idMessage, setIdMessage] = useState(""); useEffect(() => { if (id.length === 0) { setIdMessage(""); } else if (!/^(?=.*[a-z])(?=.*[0-9])/.test(id)) { setIdMessage("영어 소문자와 숫자를 모두 포함해야 합니다."); } else if (id.length < 6) { setIdMessage("6글자 이상 입력해야합니다."); } else { setIdMessage(true); } }, [id]); PW // pw // 비밀번호 입력(문자, 숫자, 특수문자 포함 8~20자) const [pwMessa..

Tailwind CSS 리액트 컴포넌트에 적용 → className 으로 작성함! // 예시 import React from 'react'; function MyButton() { return ( 클릭하세요 ); } export default MyButton; 공식 홈페이지 https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. tailwindcss.com

Axios Axios는 JavaScript 또는 Node.js 환경에서 HTTP 요청을 수행하기 위한 라이브러리 Promise 기반으로 동작하며, 브라우저와 Node.js에서 모두 사용할 수 있음 다양한 기능을 제공하며, JSON 데이터를 자동으로 파싱하고 오류 처리를 편리하게 할 수 있음 fetch Fetch API는 최신 웹 표준으로 제공되는 JavaScript API로, 웹 브라우저에서 기본적으로 지원 Promise를 사용하여 비동기적인 HTTP 요청을 처리함 Axios와 달리 브라우저 기본 기능을 활용하기 때문에 별도의 라이브러리 설치가 필요하지 않음 Axios와 fetch Axios : 다양한 기능과 브라우저 및 Node.js에서 일관된 API를 제공하므로 더 많은 기능과 편의성을 제공합니다. ..

인증 인증은 사용자를 확인하는 프로세스 주요 목적은 사용자가 자신이 맞는지를 확인하고, 로그인한 사용자를 식별하는 것 일반적으로 사용자 이름과 비밀번호, 토큰(JWT), 세션 등을 사용하여 인증을 수행 주로 로그인 과정에서 사용되며, 사용자의 신원을 확인하여 액세스 권한을 부여하거나 거부 인가 인가는 사용자에 대한 권한을 관리하고, 특정 자원 또는 서비스에 대한 접근을 허용 또는 거부하는 프로세스 사용자가 로그인한 후에도 특정 자원에 접근할 수 있는지 여부를 결정 주로 권한 부여 및 접근 제어에 사용되며, 사용자의 역할과 권한에 따라 리소스에 대한 권한을 관리 토큰 - JWT (JSON Web Token) WT는 웹 애플리케이션 간에 정보를 안전하게 전송하기 위한 표준 방식 중 하나로, JWT는 JSON..

Custom Hooks React 함수 컴포넌트에서 상태 또는 부작용 로직을 재사용하기 위한 기술 이를 통해 로직을 여러 컴포넌트에서 공유하거나 재사용할 수 있음 파일의 이름 앞에 반드시 use 라는 키워드가 들어가야 함!!

axios interceptor 두 상황에서 흐름을 가로채서 여러분이 어떠한 코드 상의 관여를 할 수 있음 요청(request)이 처리되기 전( = http request가 서버에 전달되기 전) 응답(response)의 then(=성공) 또는 catch(=실패)가 처리되기 전