🧐 React 컴포넌트의 key 속성에 대해서 설명해주세요.
리액트에서 key는 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 속성입니다
이 때 Key는 배열 내부의 엘리먼트에 지정되는 고유한 값으로
React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다.
🎙 키를 지정하지 않으면 어떻게 되나요?
명시적으로 key를 지정하지 않으면 React는 기본적으로 인덱스를 key로 사용합니다.
하지만, 항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장하지 않습니다. 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있습니다.
🎙 state와 관련된 문제가 뭐죠?
key를 index로 사용 하고, 새로운 컴포넌트가 들어오게 된다면
React는 기존의 첫번째 컴포넌트와 새로운 컴포넌트가 같은 key값을 가지고 있으니
같은 컴포넌트라 생각하게 되어 기존의 컴포넌트를 그대로 그려주게 될것입니다.
따라서 key는 반드시 변하지 않고, 예상 가능하며, 유일해야 합니다.
🧐 Same-Origin Policy 와 CORS에 대해서 설명해주세요.
동일 출처 정책은 브라우저가 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식입니다. 잠재적으로 해로울 수 있는 문서를 분리해, 공격받을 수 있는 경로를 줄이기 위해 Origin 출처의 서버로만 요청을 주고 받을 수 있게 합니다. 이러한 불편을 해결하기 위해 등장한 것이 CORS입니다. CORS은 추가 헤더를 사용하여 브라우저가 한 출처에서 실행중인 애플리케이션에 선택된 액세스 권한을 부여해줍니다.
🎙 개발을 할 때 다른 출처의 리소스가 필요한 경우가 언제일까요?
외부 API를 사용하는 경우도 많고, 클라이언트와 서버를 분리하여 개발하는 경우입니다.
🎙 preflight에 대해서 설명해주세요.
Preflight Request는 예비 요청으로, 실제 요청 전에 인증 헤더를 전송하여 서버의 허용 여부를 미리 체크하는 테스트 요청입니다. OPTIONS 메서드를 사용합니다.
🎙 헤더에 추가될 수 있는 내용이 뭐가 있죠?
URL, 쿠키, 헤더, 메서드 입니다.
🎙 네에… 수고하셨습니다🤨
