2023-04-19 수요일

✏️ 무엇을 배웠나

---

1. window.postMessage 메서드

window.postMessage 메서드는 브라우저의 동일 출처 정책을 지키면서도 서로 다른 origin끼리 안전하게 통신할 수 있게 해준다.

부모 컴포넌트와 iframe이 있는 자식 컴포넌트 간에 데이터를 주고 받아야 하는 문제가 있어서 공부하게 됐다.

MDN window.postMessage() 파트를 참고해 단순히 데이터를 보내고 받는 것까지는 확인을 했다.

🥵 무엇이 어려웠나

---

1. 부모 컴포넌트와 자식 컴포넌트의 iframe 통신

문제

• 부모 컴포넌트에서 선언한 state의 값을 window.postMessage 메서드를 통해 자식 컴포넌트에 있는 iframe에 전달했으나 ifame 콘텐츠 변경이라는 목적을 달성하지 못함

문제와 연관된 것들

1. 컴포넌트의 구조
2. 값에 대한 타입 정의
3. window.postMessage 통신 방식

문제를 작게 분해하기

• Main 컴포넌트에서 PreviewSection 컴포넌트에 상태 변수인 card가 전달되지 않는다
• 전달할 데이터와 미리 정의된 데이터의 타입이 연계되지 않는다
• 메시지를 전달했을 때 실제로 iframe의 콘텐츠가 변경되는지 확인되지 않았다

무엇부터 해결해야 할까

1. 테스트 메시지를 전달했을 때 iframe이 변경되는지 먼저 확인한다
2. 변경된다면, 전달될 실제 데이터와 interface로 정의된 타입에 맞게 로직을 구성한다
3. 상태 변수를 참조할 수 있도록 Context 등을 사용해 상태를 전역으로 세팅한다
4. 다시 테스트한다

---

🏷️ 오늘의 코멘트

하루 종일 삽질했다. 오늘 같은 날은 내가 사이어인이라고 생각해야 한다. 죽지만 않으면 두들겨 맞을수록 강해지는... 🥹