말은 쉽지, 코드를 보여줘!

프론트개발을 할 경우 대부분 css, js 파일들은 퍼블리싱 팀에서 전달받는다. 이런 파일들은 일반적으로 cdn을 통해 전달 받는데 대략 아래와 같은 것들이다. 리액트에서 이를 적용하는 가장 간단한 방법은 Index.html 에 직접 추가하는 것이다. 하지만 페이지별로 필요한 js, css 파일이 다를 것이기 때문에 각 화면의 최상위 컴포넌트에 아래와 useEffect 를 선언해서 index.html에 동적으로 element 를 추가할 수 있다. useEffect(() => { const script = document.createElement('script'); script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js..

script 태그에 src 자원이 존재할때만 지정할 수 있는 옵션으로 아래와 같이 정의할 수 있다. 모두 페이지 렌더링을 막지 않으면서 스크립트 코드를 다운로드 하는 점은 동일한데 아래와 같은 차이가 있다. defer를 지정할 경우 다운로드는 백그라운드에서 독립적으로 수행되지만 스크립트 실행은 페이지 구성이 끝난 뒤에 수행된다. defer 이 지정된 script 태그가 여러개일 경우 다운로드는 각각 수행되지만 실행은 페이지 구성이 끝나고 문서에 추가한 순서대로 진행된다. async 를 지정할 경우 해당 스크립트는 다운로드와 실행 모두 독립적으로 수행된다. async 가 지정된 script 태그가 여러개일 경우에도 각각 독립적으로 수행된다. 다만 스크립트 실행 중에는 페이지 렌더링이 멈춘다. 아래와 같은 ..