자바스크립트에 배열 타입은 존재하지 않는다. 배열을 객체 타입이다.typeof arr // object 객체와 배열의 특징구분객체배열구조키와 값인덱스와 요소값의 참조키인덱스값의 순서XOlength 프로퍼티XO배열은 반복문을 통해 순차적으로 값에 접근하기 적합한 자료구조이다 희소배열 현재 length 에 프로퍼티 값보다 작은 숫자 값을 할당하면 배열의 길이가 줄어든다.const arr = ["a", "b", "c", "d", "e"];arr.length = 3;console.log(arr); // [ 'a', 'b', 'c' ] 현재 length 에 프로퍼티 값인 1보다 큰숫자 3을 length 프로퍼티에 할당하면, length 프로퍼티 값은 변경 되지만실제로 배열의 길이가 늘어나지는 않는다.co..

https://react-hook-form.com/ React Hook Form - performant, flexible and extensible form libraryPerformant, flexible and extensible forms with easy-to-use validation.react-hook-form.com 설치npm install react-hook-form register useForm 에서 반환하는 속성에 register 라는 속성이 있다. const { register } = useForm(); const { register } = useForm();return ( 제출 ); register 함수는 이 필드 이름 'image'를 바탕으로 다음 속성들을 ..

패키지 설치npm install react-hook-form @hookform/resolvers joi 입력시 실시간 유효성 검증 - 유효성 검증 내용은 signupFormSchema 파일에 따로 적용하여 resolver 로 useForm 과 연결 시킨다. - cotrol 을 useForm 에서 반환 받아서 Controller 에 연결 - Controller 내 render 로 input 을 넣어준다. (field에는 onChange, onBlur, value, ref, name이 모두 들어 있음.) - error={fieldState.error?.message} 를 통해 유효성 에러 메시지도 전달 가능 - 버튼 활성화 조건 (isValid 활용) useForm에 mode: 'onChange..

설치방법npm install joi 1. 유효성 검증 예시 (이메일 검증) 1) OK 일 경우 Value 값만 반환 const schema = Joi.string().email(); const result = schema.validate("test@example.com"); console.log(result); // { "value": "test@example.com" } 2) error일 경우 에러 속성을 포함 해서 반환 const schema = Joi.string().email(); const result = schema.validate("test@example"); console.log(result); 에러일 경우 아래와 같이 에러 속성을 포함해서 반환한다.{ "value": ..

export async function fetchPlaces() { const res = await fetch(`http://localhost:3000/places`); console.log(res); if (!res.ok) { throw new Error("에러가 발생했습니다."); } const data = await res.json(); return data.places;} 패치 후 res 값을 확인 시 Response { status: 200, statusText: 'OK', headers: Headers { 'x-powered-by': 'Express', 'access-control-allow-origin': '*', 'access-control-allow..

타입좁히기 (Type Narrowing)타입 내로잉이란, 조건문 등을 활용하여 넓은 타입에서 좁은 타입으로 범위를 좁히는 것을 의미한다. value의 타입이 string | number | boolean인 경우, 각각에 대해 적절히 처리되도록 타입 좁히기function handleValue(value: string | number | boolean) { // string이면 문자열 길이, if(typeof value ==="string"){ return value.length // number면 10을 더한 값 }else if(typeof value ==="number") { return value +10 // boolean이면 반전된 값을 리턴 }else if(typeof val..