[React] 하위 컴포넌트 함수 실행하기 (Using Redux connect)

환경

 - 언어: TypeScript

 - 기타: Redux connect 를 사용하는 상황

방법

 - GitHub 예제소스: https://github.com/1004lucifer/Test-JavaScript/tree/master/React/typescript-call-child-method-using-redux-connect

 - 데모 페이지: https://1004lucifer.github.io/Test-JavaScript/React/typescript-call-child-method-using-redux-connect/build/index.html

동작 화면

App.tsx (메인 컴포넌트)

AppSubNormal.tsx (일반 하위컴포넌트)

AppSubChanged.tsx (부모 컴포넌트에서 사용 가능하도록 수정)

참고
 - https://ko.reactjs.org/docs/forwarding-refs.html
 - https://ko.reactjs.org/docs/hooks-reference.html
 - https://stackoverflow.com/questions/55180124/forwarding-ref-in-a-functional-component-with-react-redux-v-6-0-1

[IntelliJ] src/main/java 디렉토리 하위 java 외 다른 파일(xml, png, ttf등) 빌드 안되는 이슈 해결방법

 

이슈

 - src/main/java 디렉토리 하위의 소스에 TTF 폰트파일과 png 파일이 있는 경우가 있었는데..
   다른 이클립스 사용하는 분들은 별 문제가 없어보였지만 IntelliJ를 사용하는 나는 해당 파일이 classes 디렉토리로 빌드가 되지 않아서 한동안 resources 디렉토리로 해당 경로와 동일하게 디렉토리를 만든 후 복사해서 사용하고 있었다.

알고보니 일반적으로 많이 사용하는 java, kt(코틀린) 과 같은 개발언어 파일만 빌드 시 classes 디렉토리에 들어가는 설정이 있었다.

설정위치와 방법은 아래와 같다.
 - Settings => Build, Execution, Deployment => Compiler

!?*.확장자명   <= 구분자(;) 를 확장자 패턴 사이에 넣어줘야 한다.

참고
 - https://www.jetbrains.com/help/idea/resource-files.html

[JavaScript] iframe 뒤로가기 (history back) 이슈 원인과 해결방법

 

본문에 iframe 이 들어가는 상황에서 뒤로가기가 예상했던 동작대로 작동하지 않아 알아봤는데..

stackoverflow를 포함한 다른 많은 글을 읽어보았지만 원하는 방법을 보지 못하고 어떻게 할지 여러가지 방법으로 고민하고 연구한 방법에 대해서 기술을 해본다.

테스트 크롬 버전: 94, 96

이슈

 1. iframe 내에서 자동으로 여러 페이지로 리다이렉트 되거나 사용자의 액션으로 여러페이지 이동 시 history 에 해당 페이지들이 스택으로 쌓이게 된다.

 2. 특히나 컨텐츠가 iframe 하나가 아니라 여러개를 보여줘야 할 수도 있다.

 PS.

  - 페이지 이동이 없는 단일 페이지만 iframe 내에서 보여지는 거라면 크게 문제되지 않는다.

여러가지 방법으로 테스트를 해봤을 때 다음과 같은 결론과 방법을 찾았다.

1004lucifer

뒤로가기 (Alt + ←) 는 현재로써는 완벽하게 커버 가능하지 않다.

history.back 또는 history.go 수행시 발생하는 popstate 이벤트(링크)를 통해 현재 화면에 iframe이 있는지 확인하고 iframe의 주소가 현재 사이트와 다른경우 계속해서 history.back()을 하려 했는데..

브라우저의 뒤로가기 버튼을 누르거나 뒤로가기 단축키를 이용 시 iframe 내부에서 이전페이지로 호출을 하는바람에 내가 개발하는 페이지에서 popstate 이벤트가 발생하지 않았다.
(iframe 내부에서 여러페이지 이동 없이 하나의 단일페이지만 있는경우는 문제가 없다.)

(뒤로가기 수행 시) 이벤트가 발생해야 뭐라도 처리를 할텐데 이벤트가 발생하지 않아 스크립트로 컨트롤 자체를 할수가 없었다.

사용자의 액션이 있는경우 뒤로가기 수행이 가능한다.

(하지만 F5를 눌러서 새로고침 하는경우 여전히 이슈가 있다.)

GitHub 예제소스: https://github.com/1004lucifer/Test-JavaScript/tree/master/Vanilla/TroubleShooting/history-back-page-with-iframe

데모 페이지: https://1004lucifer.github.io/Test-JavaScript/Vanilla/TroubleShooting/history-back-page-with-iframe/outerFirst.html

여기에는 두가지 단점이 있다.

 1. (스크립트를 수행하기 위해) 사용자가 특정 버튼을 누르는것과 같이 어떠한 액션이 있어야 한다.

 2. iframe이 있는 컨텐츠 모습에서 F5 와 같이 새로고침을 하게되는경우 history 스택에 쌓인 내용이 없어지지 않아 history 스택에 중복 데이터가 쌓이게 된다.

    따라서 위 스크립트를 수행 시 이전에 쌓인 history 스택 때문에 정상적으로 동작하지 않는다.

1004lucifer

위와같은 단점이 있지만..
Angular / Vue / React 와 같은 SPA 사이트에서는 그나마 사용할 수 있는 가장 나은 방법이 아닐까 싶다.