react 썸네일형 리스트형 React에서의 CORS Error 처리 CORS Error 란? SOP(Same-Origin Policy)에 의해 발생하는 오류이다. SOP는 같은 출처(Origin)의 리소스만 공유할 수 있도록 하는 정책으로, Origin은 프로토콜과 호스트, 포트를 포함한다. 브라우저에 쌓이는 보안에 민감한 데이터를 다른 곳에서 접근하여 악용하는 등 보안관련 문제 때문에 생겨난 정책이다. 다른 출처의 리소스를 사용하려면 CORS를 사용해야한다. CORS의 동작 방식 3가지 1. Preflight 요청 클라이언트가 브라우저를 통해 서버로 요청을 보낼 때, 브라우저에서 서버로 바로 실제 요청을 보내는 것이 아니라, OPTIONS 메서드로 사전 요청을 보내서 접근권한 여부를 먼저 확인하는 것을 Preflight 요청이라고 한다. 접근 권한이 있다면 브라우저는 .. 더보기 [React] favicon 업데이트 적용 문제 증상: favicon을 변경하였음에도 적용이 안됨. 해결: // pulic/index.html //원래 코드 //변경 코드 원래코드를 변경코드로 바꿔준다. 원인: 캐시된 이미지를 사용하고 있기 때문에 강제로 이미지를 업데이트해야한다. 출처:How To Force Refresh A Cached Favicon Image - holly bourneville - Medium 더보기 DOM과 Virtual DOM [DOM] HTML을 읽고 분석하여, HTML tag를 JavaScript Node(text, class 등 모두 포함)로 변환한다. 이 변환의 최종 형태는 DOM(Tree형 객체모델)이다. DOM은 Tree형 객체모델이기 때문에 자바스크립트로 탐색하는 성능이 뛰어나서, 변경이나 업데이트 속도가 빠르다. 하지만, 렌더링에서 성능 문제가 발생할 수 있다. 먼저 DOM의 rendering과정에 대해 설명하겠다. 일단 DOM이 변경(DOM API이용해서 변경할 수 있음)되면, 그에 맞게 브라우저에서 re-rendering이 되어야 한다. Rendering하려면 DOM과 CSSOM(DOM에 CSS요소들을 병합)을 토대로 만들어진 Render트리가 필요하다. 이때 Render트리는 html에서 , , css에서 .. 더보기 [React] useState와 동작 방식(배치, 비동기) 리액트에서 가장 자주 쓰이는 Hook 중 하나인 useState에 대해 이해한 내용을 기록하겠습니다. [1. useState란?] 먼저 왜 사용하는 지는 알고 써야하니까, useState가 등장 배경과 사용 이유에 대해 간략히 알아봐야겠습니다. 함수 컴포넌트에서 state, LifeCycle Method 관리 기능을 수행하는 React Hooks가 등장하기 전의 React의 컴포넌트는 대부분 Class를 기반으로 만들어졌습니다. 밑은 Class기반의 컴포넌트 작성 예시 입니다. //출처: React 공식문서 (https://ko.legacy.reactjs.org/docs/react-component.html) class ErrorBoundary extends React.Component { constru.. 더보기 이전 1 다음
