배우면서 프로젝트 하면서 궁금하고 답답한게 있어서 질문 해봅니다..

Question

하루종일 고민 해보았지만 답을 찾을 수 없어서 질문을 남깁니다. 지금 vue / springboot 를 사용하여 프로젝트 중인데요.. 본인인증 외부 모듈을 붙이는 과정에서 골치가 아프네요.. 상황은.. 1. vue에서 window.open으로 인증모듈 팝업 호출 (여기까지는 성공) 2. 인증모듈에서 본인인증을 마친후 인증모듈이 제공하는 데로 XXX.jsp 파일에 인증 결과 값을 받아옴( XXX.jsp는 프로젝트 내에 생성한 것이며, js로 받을 수는 없다고 하더라구요..) 2번에서 궁금한 점이.. jsp팝업에서 parent.opener ... document.form.XXX.vlaue = "가져온 인증 데이터" 와 같은 식으로 데이터를 매핑하고 self.close()로 창을 닫고 있습니다. 원래 계획은 어쨋든 인증 창이 닫히면서, 부모창(vue)의 함수를 실행하여 인증 데이터를 받아서 처리 할 예정이었는데요.. opener의 함수명을 적어도 없는 함수로 나오고, 그렇다고 vue의 watch가 작동하지도 않습니다.. 화면의 element에서는 값이 바뀌는데, vue가 관리하는 데이터(?)에서는 값이 변하지 않는 것 같습니다. 궁금한 점은.. 1.vue를 사용하지 않은 일반 jsp파일에서 부모창(vue)의 데이터나 함수에 접근 하여 실행 할 수 있나요..? 2. vuex를 사용하면 이러한 문제를 해결 할 수 있나요? (아직 vuex까지 적용하지 않았습니다....)

두진애비 · Answer

고맙습니다. 사실 이곳에 질문을 올리는 것도 엄청 고민 했는데.. 시간은 시간대로 흐르고 답은 안나와 답답하여.. 혹시 같은 고민을 하시는 분이 계실 지도 몰라 해결 과정을 정리해 보면.. 외부 모듈 팝업 호출 할 때 부모창을 눈에 보이지 않는 modal로 덮어놓고.. 인증이 끝난 후에 사용자가 부모창을 한번 누를 때 click 이벤트를 캐치하여 처리하도록 했습니다. 그리고 팝업 jsp에서 localStorage로 데이터를 저장합니다.  ( 이 부분은 vue 쪽으로 데이터 가져온 직후 삭제~) 감사합니다.

캡틴판교 · Answer

안녕하세요 재호님, 먼저 인프런에서 제공하는 강좌 질의 게시판은 강의 컨텐츠와 관련된 질문만 주시는 게 좋을 것 같습니다..! 개인 프로젝트 관련된 내용은 다른 채널이나 기타 커뮤니티를 활용해보시면 좋을 것 같아요..! 그래도 일단 질문 주셨으니 제가 간단히 답변드릴게요 :) 1.vue를 사용하지 않은 일반 jsp파일에서 부모창(vue)의 데이터나 함수에 접근 하여 실행 할 수 있나요..? 답변) 기본적으로 브라우저 탭 간의 데이터 전달은 브라우저 저장소나 서버와의 통신으로 해결하셔야 합니다. 프레임워크를 떠나 바닐라 자바스크립트로도 해결하실 수 없을거에요. 2. vuex를 사용하면 이러한 문제를 해결 할 수 있나요? (아직 vuex까지 적용하지 않았습니다....) 답변) 위 대답으로 답변이 될 것 같네요..! --- 말씀드린 해결책 말고도 web worker 같은 것들 활용하면 재밌는 해결책이 나올 수 있겠네요. 해당 키워드로 구글링 검색해보면 좋은 자료가 많이 있을 것 같습니다 :)