📅 오늘 한 일
1. iframe 통신 성공
2. 타입스크립트 공부
✏️ 무엇을 배웠나
1. 리액트에서 부모 페이지와 자식 iframe 통신하는 법
어제 시도했을 때는 실패했다. 자기 전에 문제 무엇이고 문제와 관련된 것들은 무엇이 있고 어떻게 풀어나가면 좋을지 글로 적어놨는데 이게 큰 도움이 됐다. 오늘 다시 시도하면서 글로 써놨던 것을 보면서 따라가니까 길을 잃지 않을 수 있었다.
여튼 어떻게 했느냐. 무엇이 문제였느냐.
window.postMessage 메서드를 사용할 때 부모 페이지가 자식 iframe을 참조하지 못해서 안 된 거였음
이게 끝임... ㅋㅋㅋㅋㅋㅋ 하
구현 의도 : A 컴포넌트에서 메시지를 보내면 B 컴포넌트에 있는 iframe에서 받는다
어제 시도한 것 : A에서 useRef를 이용해 참조값을 만들었다. 참조값을 props로 B 컴포넌트에 내려준 다음, iframe에 ref로 달아줬다.
안 된 이유 : postMessage 메서드를 사용하려면 부모가 자식인 iframe을 참조해야 한다. 그런데 어제 한 건 iframe을 참조한 게 아니라, 단순히 내가 만든 사용자 정의 ref를 iframe에 달아줬기 때문임. iframe의 참조값이 아니었음!
해결한 방법 : 리액트의 forwordRef API를 사용했음. A에서 내려주는 게 아니라 반대로 B에서 iframe의 참조값을 A로 올려줘야 했기 때문에. forwordRef를 사용하면 부모 컴포넌트가 자식 컴포넌트의 DOM 노드에 접근할 수 있다.
이렇게 해주니까 성공.
해결해서 기분이 좋은 것도 좋은 건데 느낀 점 : 문제를 정의하고 문제가 가진 관계성, 의존성을 정리하면 확실히 문제에 접근하기가 너무 좋다는 것을 또 깨달음. 언제까지 깨달아야 더 잘하려나.
2. load 이벤트
load 이벤트는 이벤트가 달린 리소스가 완전히 로딩된 후에야 실행되는 이벤트다. iframe이 로딩되고 나서 실행할 함수가 있었는데 어떻게 하면 타이밍을 조절할 수 있을지 찾다가 알게 됨.
당연히 리액트 Common 컴포넌트에도 onLoad 이벤트가 있음. onLoad를 iframe 컴포넌트에 달아주고 함수를 전달해서, 타이밍을 제어할 수 있었음.
3. 리액트에서 이벤트 타입 정의 꿀팁
이벤트 타입 정의할 때 인터넷에 검색할 것도 없이 이미 이벤트 같은 건 다 타입이 정해져 있기 때문에 IDE가 알려준다.
빨간줄 있는 데 마우스 올리면 친절하게 알려줌.
타입스크립트 처음 썼을 때는 귀찮고 에러만 오지게 떠서 좋은 점을 못 느꼈는데 이번에 장점을 좀 느끼고 있다.
코드 안정성은 프로덕트 측면에서 좋은 거고, 개발할 때 좋은 점은 자동완성. 자동완성 알아서 잡아주는 거 너무 좋음.
🏷️ 오늘의 코멘트
삽질의 묘미는 삽질을 성공적으로 하면 리턴 쾌락이 크다는 점. 하루 종일 실실 거렸다.
