🧩 문제 상황 (What Happened)무한스크롤이 동작 하지 않음첫 렌더링 시에 useEffect가 실행 되면서 comments를 초기화 시키고 fetchComments를 통해 댓글 10개를 더미 데이터에서 가져와서 화면에 댓글 10개를 렌더링 함. ( 실행됨 ) 이후 스크롤을 내리면 useRef를 통해 IntersectionObserver 에 등록된 node (최하단부) 가 화면에 나타나면 다시 fetchComments를 실행하여 조건에 따라 댓글을 추가로 불러와야 함. (실행 안됨) interface PostData { id: number category: { id: number; name: string } author_id: number title: string content: st..

🧩 문제 상황 (What Happened)배포된 페이지의 하위 페이지에 새로고침 시 access denied 에러 발생 💡 최종해결방법1. cloudfront > 배포 > 해당 ID 로 이동하여 오류 응답 페이 생성에서 아래와 같이 설정 2. 추가로 403 오류코드도 동일하게 설정한다.

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": ..

정규 표현식이란?일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어자바스크립트는 펄(Perl)의 정규 표현식 문법을 ES3부터 도입문자열을 대상으로 패턴 매칭 기능을 제공 정규 표현식의 생성 1. 정규 표현 식 리터럴 2. RegExp 생성자 함수new RegExp(pattern[, flag]) 플래그플래그의미설명iignore case대소문자 구별하지 않고 패턴을 검색한다.gglobal대산 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색한다.mmulti line문자열의 행이 바뀌더라도 패턴 검색을 계속한다. const target = 'Is this all there is?';// target 문자열에서 is 문자열을 대소문자를 구별하여 한 번만 검색한다.target.match(..