Evan의 개발 저장소

react 개발자라면 react hook을 다루면서 의존성 배열을 사용해본 경험이 있을것이다. 예를 들어 flag 라는 값이 변경 할 때 마다 특정 함수를 실행하고 싶은 경우 아래 처럼 코드를 작성할 것이다. useEffect(() => { toDoFunc(); }, [flag]) 여기서 의존성 배열이 어떤식으로 작동하는지, 어떤 값들을 넣어야 하는지 이해하고 사용할 필요가 있다. 렌더링에서도 비슷한 예를 볼 수 있는데 react의 컴포넌트는 props값이 바뀌면 다시 렌더링 되는 특징을 가지고 있다. 아래 처럼 FlagComponent에 flag값을 props로 넘겨준다면 flag 값이 변경 될 때 해당 컴포넌트가 다시 렌더링 될 것이다. return ( ) 위의 예시들의 작업이 일어나는 방식은 자바스..

서비스를 개발하다보면 간간히 iframe을 사용해야할 일이 발생한다. 가령 도메인이 다른 서비스를 기존 서비스 내에서 보여줘야 한다던지 특정 요소 안에서 외부 서비스를 보여줘야 하는 등 생각보다 사용해야할 일이 많이 생긴다. 서로 다른 도메인을 가지고 있기 때문에 window 객체를 직접 참조하려고 하면 cors에러가 발생하게 된다. 그럼 서로 데이터를 공유하거나 통신해야하는 로직이 필요한 경우 어떻게 해야하는가? iframe 내에서 window.parent.postMessage() 메서드를 사용하고 부모 window에서 event handler 메서드를 추가해주면 iframe에서 보내주는 메세지를 부모 window에서 처리할 수 있게 된다. 뒤로가기를 부모 window에서 할 수 있게 처리하는 예시이다..

얼마전 웹에서 Json 데이터를 엑셀 파일로 저장하는 내용을 포스팅 했었다. json 데이터가 있을 경우 엑셀 파일로 다운로드 되고 없을 경우 alert를 띄워줘야 하는데 우리는 시스템 alert가 아닌 custom alert modal을 사용했고 alert modal component을 만들면서 state update가 안됐던 것에 대해 이번에 글을 쓰고자한다. 처음 만들었던 코드 ExcelDownloadBtn.tsx interface ExcelProps { fileName: string; dataSource?: any; } export const ExcelDownloadBtn = ({ fileName, dataSource }: ExcelProps) => { const [showAlert, setSho..