FrontEnd94 [React.js] Cross Domain 이슈 해결하기 동일 출처 정책(same-origin policy) 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용을 하는 것을 제한하는 중요한 보안 방식 동일한 출처 간의 호출만 허용 동일한 출처 : 두 URL의 프로토콜, 포트(명시한 경우), 호스트가 모두 같은 경우 URL1 URL2 결과 이유 http://store.company.com/dir/page.html http://store.company.com/dir2/other.html O 경로만 다름 http://store.company.com/dir/inner/another.html O 경로만 다름 https://store.company.com/secure.html X 프로토콜 다름 http://store.company.com:81/.. 2021. 3. 15. [HTML5] canvas를 이용한 Image Crop HTML5의 canvas를 이용해서 이미지의 특정 부분을 Crop 한다. 이미지에 crop할 범위를 그리는 방법은 이전 게시물을 참고한다. 이미지를 Crop 알고리즘은 다음과 같다. 1. 이미지에서 x(이미지의 LeftTop을 기준으로 Crop 범위의 LeftTop x 좌표), y(이미지의 LeftTop을 기준으로 Crop 범위의 LeftTop y 좌표), width(Crop 범위 사각형의 width), height(Crop 범위 사각형의 Height)를 구한다. 2. Crop한 이미지를 그릴 after div에 canvas Element를 새로 만들어준다. 3. 1번의 정보를 이용해 after div canvas에 image를 그려준다. ※참고 canvas.getContext('2d').drawImag.. 2021. 2. 27. [HTML5] canvas에 마우스로 사각형 그리기 마우스로 사각형을 그리기 위해서, HTML5 canvas를 이용해본다. mousedown시에는 마우스 클릭상태를 on으로 변경하며, 사각형의 시작 x, y 좌표를 얻고, mousemove시 클릭 상태라면, 시작 x, y와 현재 마우스 point를 사용해 사각형을 그리고, mouseup시에는 마우스 클릭상태를 off로 변경한다. 2021. 2. 26. [React.js] React Component 생명주기 3 - UnMounting 컴포넌트 생명주기 Unmounting 아래 메서드는 컴포넌트가 DOM 상에서 제거될 때에 호출된다. 1. componentWillUnmount() componentWillUnmount() componentWillUnmount()는 컴포넌트가 마운트 해제되어 제거되기 직전에 호출된다. 이 메서드 내에서 타이머 제거, 네트워크 요청 취소, componentDidMount() 내에서 생성된 구독 해제 등 필요한 모든 정리 작업을 수행한다. 이제 컴포넌트는 다시 렌더링되지 않으므로, componentWillUnmount() 내에서 setState()를 호출하면 안된다. 컴포넌트 인스턴스가 마운트 해제되고 나면, 절대로 다시 마운트되지 않는다. Exception 아래 메서드들은 자식 컴포넌트를 렌더링하거나, 자식.. 2021. 2. 4. [React.js] React Component 생명주기 2 - Updating 컴포넌트 생명주기 Updating props 또는 state가 변경되면 갱신이 발생한다. 아래 메서드들은 컴포넌트가 다시 렌더링될 때 순서대로 호출된다. 1. static getDerivedStateFromProps() static getDerivedStateFromProps(props, state) getDerivedStateFromProps는 최초 마운트 시와 갱신 시 모두에서 render 메서드 호출 직전에 호출된다. state를 갱신하기 위한 객체를 반환하거나, null을 반환하여 아무 것도 갱신하지 않을 수 있다. 이 메서드는 시간이 흐름에 다라 변하는 props에 state가 의존하는 아주 드문 사용례를 위하여 존재한다. 예를 들어, 무엇을 움직이도록 만들지 결정하기 위해 이전과 현재의 자식 .. 2021. 2. 3. [React.js] React Component 생명주기 1 - Mounting 리액트의 모든 Component는 여러 종류의 "생명주기 메서드"를 가지며, 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정이 가능하다. 컴포넌트의 생명주기는 아래와 같다. 컴포넌트 생명주기 Mounting 아래 매서드들은 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때 순서대로 호출된다. 1. constructor() constructor(props) 매서드를 바인딩하거나 state를 초기화하는 작업이 없다면, 해당 React 컴포넌트에는 생성자를 구현하지 않아도 된다. React 컴포넌트의 생성자는 해당 컴포넌트가 마운트되기 전에 호출된다. React.Component를 상속한 컴포넌트의 생성자를 구현할 때에는 다른 구문에 앞서 super(props)를 호출해야 한다. 그렇지 않으.. 2021. 2. 2. 이전 1 ··· 10 11 12 13 14 15 16 다음 반응형
