bimnemo("개발")

문제상황 1. 폼 데이터 전체를 작성한 후 마지막에 리캡챠 검사 => 리캡챠 토큰을 폼 데이터에 같이 실어 서버 보낸다. 2. 이때 서버에서 모종의 이유로 오류가 나면, 리캡챠가 체크된 채로 남아있어 재시도를 진행할 수 없다. - 리캡챠 유효시간 만료, 로봇으로 판단 등 리캡챠 자체에서 만료시킨 경우는 재시도가 가능하다. 3. 이미 검증된 토큰은 재사용할 수 없어, 서버에서 리캡챠 오류가 발생한다. 위와 같은 특정 상황에서 리캡챠 토큰이 유효하지 않다고 판단되었을때 재시도 할 수 있게 만들어야 한다. 해결방법 *react-google-recaptcha, formik(form 라이브러리) 사용중 우선 useRef를 사용해 리캡챠 선택한다. /**리캡챠 설정 */ const recaptchaRef = use..

1. 무한스크롤이란? 무한스크롤은 웹 페이지에서 사용자가 스크롤을 할 때 새로운 콘텐츠가 끊임없이 로드되어 나타나는 디자인 패턴을 의미한다. 페이지 전환 방식과는 달리 사용자는 페이지 이동없이 계속해서 새로운 정보에 접근할 수 있다. 주로 소셜 미디어 피드, 뉴스 웹사이트, 온라인 쇼핑몰 등에서 널리 사용되고 있다. 2. 무한스크롤의 동작방식 무한스크롤은 스크롤의 길이를 감지해, 스크롤이 하단에 도달하면 자동으로 데이터를 불러오는 방식으로 동작한다. 스크롤이 내려가는 동시에 새로운 데이터를 패칭하기 때문에 사용자는 끊임없이 콘텐츠를 접할 수 있다. 3. 무한스크롤의 이점 성능 최적화: 한 번에 많은 양의 데이터를 가져오지 않고, 필요한 만큼만 동적으로 불러와서 효율적인 성능을 유지할 수 있다. 이는 초기..

1. 불변성 불변성이란 메모리에 있는 값을 변경할 수 없는 것. 자바스크립트의 데이터 형태중에 원시 데이터는 불변성이 있고, 원시 데이터가 아닌 객체, 배열, 함수는 불변성 없습니다. 2. 변수를 저장하면 메모리에 어떻게 저장될까? num1과 num2는 변수의 이름은 다르지만, 같은 메모리 공간을 바라보고 있다. let num1 = 1; let num2 = 1; console.log(num1 === num2); // true //같은 메모리 공간을 참조하고 있다는 의미 데이터를 수정해도, 원시 데이터는 불변성을 가지고 있다. 기존 메모리에 저장 되어 있는 1이라는 값은 변하지 않고, 새로운 메모리 저장 공간에 2가 생기고 num1이 그 공간을 참조하는 것이다. 하지만 원시 데이터가 아닌 값. 객체, 배열..

1. reCAPTCHA 란? 투표를 하거나, 사이트에 새로 가입할 경우 이 "로봇이 아닙니다" 박스를 종종 보게 되는데, 이게 리캡차(reCAPTCHA)이다. reCAPTCHA(리캡차)는 구글에서 개발한 자동화된 프로그램이나 봇으로부터 웹사이트를 보호하기 위한 보안 기술 중 하나. 주로 웹 양식의 자동 제출을 방지하고, 스팸 댓글을 막는 등의 목적으로 사용된다. 즉, 사용자가 사람인지 봇인지를 판별해준다. 2. reCAPTCHA flow 플로우는 위의 사진에 적힌 순서대로 이루어진다. 화면에서 사용자가 어떤 동작을 했을때(회원가입, 글작성 등) 구글에 토큰을 요청한다. 구글에서 화면으로 토큰을 전달한다. 전달된 토큰을 백엔드 서버로 전송한다. 백엔드 서버는 구글서버에 토큰을 전달한다. 구글에서 사용자의 ..