useEffect(() => {
    const script = document.createElement('script');
    script.src = "/src/....";
    script.async = true;
    document.body.appendChild(script);
}, []);

# React Plugin

### 발단
블로그에 바닐라 js로 제작 중인 plugin을 연결하며 생긴 이슈

1.빌드된 js 파일을 react의 시작인 index.html에 script로 연결.(동작 하지 않음)

처음부터 이런 방식으로 연동할 생각으로 만든 것이라 당황 하였으나, 곰곰히 생각해 보니 결론이 나왔다.
React는 빈 html 파일에 동적으로 돔을 생성하여 연결하는 방식이라 html에 연동한 js 파일이 추후에 생성된 돔을 찾지 못하여 발생한 것이었다.

2.useEffect
```js
useEffect(() => {
    const script = document.createElement('script');
    script.src = "/src/....";
    script.async = true;
    document.body.appendChild(script);
}, []);
```
돔 생성 및 랜더링 후 동적으로 스크립트 파일 만들어 연결 시키는 방법...역시 실패..
> Uncaught SyntaxError: Unexpected token '<'

라는 오류가 발생하였다...열심히 구글링 결과 js파일을 html구문으로 해석하려고 해 생기는 오류라고 하였다.
head에 base경로를 넣어 줘라,  경로를 수정해라, 캐시를 지워라 등등 다양한 방법을 시도하였지만 실패....

3.cdn
위와 같이 useEffect를 활용하지만 js 파일 src만 외부 cdn에서 가져 와  보아라.
결국 이 방법으로 성공 하였다....참...알다가도 모르겠다....블로그 만들며 홈서버에서 cdn처럼 쓰는 도메인이 있어 다행이지..
cdn연결 하면서도 cors에러를 만났지만 nginx 설정을 통해 해결!