리액트

1. 순수한 컴포넌트React에서는 컴포넌트를 "순수하게(Pure)" 작성하는 게 중요하다.쉽게 말해, 입력값이 같으면 결과도 항상 같아야 한다. 수학공식처럼 y = 2x일 때 x = 2 → y = 4, x = 3 → y = 6이 함수는 항상 같은 결과를 반환한다. 컴포넌트로 예시를 들어보면, 다음 컴포넌트는 항상 name에 따라 "안녕하세요, name님!" 을 보여준다.function Greeting({ name }) { return 안녕하세요, {name}님!;} 이처럼 예측 가능한 컴포넌트가 바로 "순수"한 컴포넌트이다. 2. 반대로 순수하지 않은 컴포넌트는?let randomNumber = Math.random();function LuckyNumber() { return 당신의 숫자는 {ran..

1. 컴포넌트 import 및 export JavaScript의 import, export 문법을 사용하여 컴포넌트를 다른 파일에서도 불러와 사용할 수 있다.컴포넌트의 가장 큰 장점 = 재사용성 리액트는 한번 만든 컴포넌트를 조합해 어디서든 쓸 수 있다.// Button.jsxexport default function Button({ label }) { return {label};}이렇게 만든 버튼 컴포넌트를 다른 컴포넌트 안에 넣어 조합해 새로운 컴포넌트를 만들 수 있다.// App.jsximport Button from './Button';export default function App() { return ( 메인 페이지 );} 다른 파일에서 모듈(컴포넌트)를..

리액트 공식문서에서 틱택토 게임 만들기를 살펴보면 중간에 key에 대한 이야기가 나온다.(틱택토 게임 만드는 방법은 생략! https://ko.react.dev/learn/tutorial-tic-tac-toe ) 1. 리액트에서 리스트 항목에 대한 렌더링 리스트를 화면에 보여줄 때, React는 마치 메모장처럼 각 항목을 기억해 둔다. 리스트가 바뀌면 (예: 새로운 항목 추가, 삭제, 순서 변경 등), React는 이전에 기억해 둔 메모와 비교해서 실제로 무엇이 달라졌는지 찾아낸다. 장보기 목록을 적는다고 가정해보자. 리액트는 두 개의 메모장을 가지고 이전 메모와 비교하여 장보기 목록에 '우유'를 추가했다면 → 새로운 항목이 추가된 것을 알아챈다.'계란'을 지웠다면 → 그 항목이 사라진 것을 파악한다항..

1. 컴포넌트: UI 구성 요소 React의 핵심 개념인 컴포넌트는 마크업, CSS, JavaScript를 하나로 모아 독립적이고 재사용 가능하게 만든 UI 조각이다. HTML 태그와 마찬가지로 컴포넌트를 조합하여 전체 페이지를 구성한다. 마치 레고 블록처럼 한번 만든 컴포넌트를 여러 곳에서 재사용할 수 있다!컴포넌트 재사용의 주요 장점을 몇 가지 살펴보면: 반복적인 코드 작성 감소로 개발 시간이 단축, 동일한 컴포넌트를 사용해서 일관성 유지, 컴포넌트 수정 시 사용된 모든 곳에 자동 반영 되므로 모듈화 되어 관리가 쉬워짐 등 Docs 컴포넌트를 들여다 보면 마크업을 반환하는 함수로 이루어져 있다. export default function Profile() ..

React 앱은 컴포넌트로 구성된다.컴포넌트는 마크업을 반환하는 자바스크립트 함수로 작성한다.컴포넌트 명명은 대문자로 시작한다. ex) MyButtonJSX 문법이므로, 처럼 태그를 닫아줘야 한다. 여러 개의 JSX 태그를 반환할 수 없으므로 ... 와 같이 부모로 감싸주어야 한다. html문법을 jsx로 변환해주는 사이트: https://transform.tools/html-to-jsx function MyButton() { return ( I'm a button );}//컴포넌트 생성export default function MyApp() { return ( Welcome to my app );}//다른 컴포넌트 안에 중첩스타일 추가하기React에..

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

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 플로우는 위의 사진에 적힌 순서대로 이루어진다.화면에서 사용자가 어떤 동작을 했을때(회원가입, 글작성 등) 구글에 토큰을 요청한다.구글에서 화면으로 토큰을 전달한다.전달된 토큰을 백엔드 서버로 전송한다.백엔드 서버는 구글서버에 토큰을 전달한다.구글에서 사용자의 동작을 점수..