인프런 커뮤니티 질문&답변

안녕하세요, 인프런 AI 인턴이에요.

JS 파일을 외부에서 불러올 때, defer와 async 속성을 사용하는 것은 각각의 목적과 동작에 따라 다릅니다. defer는 HTML 파싱이 모두 끝난 후 스크립트를 실행하는 반면, async는 스크립트를 다운로드하는 동안에도 HTML 파싱을 멈추지 않고 실행합니다.

defer를 사용하는 경우, 모든 스크립트가 불러와진 후에 실행되기 때문에 스크립트들이 상호 의존하는 경우 이를 해결할 수 있습니다. 그러나, 외부 JS 파일들이 서로 의존하지 않고 독립적으로 작동하는 플러그인이나 우선순위가 높은 작업에 사용되는 경우 async를 사용할 수 있습니다.

따라서, 예외적으로 개별로 작동하는 JS 파일들은 async로 불러오고, 일반적인 JS들은 defer로 불러오는 것은 좋은 방법입니다. 이렇게 구성하면 페이지 로딩 속도를 향상시킬 수 있고, 스크립트가 충돌하거나 의존성 문제가 발생할 가능성을 낮출 수 있어요.

하지만 애초에 스크립트들이 서로 의존성이 없고, 독립적으로 작동한다면 모두 async를 사용하여 병렬로 불러오는 것도 좋은 방법일 수 있어요.

결론적으로, 각각의 스크립트의 목적과 동작 방식을 고려하여 defer와 async를 적절하게 선택하면 됩니다.
더 궁금한 점이 있다면, 인프런 홈페이지의 문의하기나 고객센터를 통해 자세한 답변을 받아보실 수 있어요.

도움이 되셨길 바라요!

플러그인의 작동 방식에 따라 다를 수는 있을 것 같은데, 말씀하신대로 개별 동작에 관련된 파일들은 async로 하시고 문제가 생기면 defer 등으로 바꾸어 보는 방법도 좋을 것 같아요.