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

안녕하세요~

요즘 제가 업무가 바빠서... 답변이 늦어 죄송합니다. ㅠㅠ

일반적으로 js 파일 스크립트 링크를 걸 때 modules로 잘게 나누어 각 모듈에서 js 코딩을 하면 깔끔하고
또한 협업에 도움이 됩니다.

이 때 html 파일 footer 엘리먼트 위에

<script type="module" src="main.js"></script>

이렇게 표기해 주고,

main.js 파일에는

import {scroll } from './modules/scroll.js'

등으로 import 시켜줍니다

그리고

if (document.querySelector('#scrolltoTop')) {scroll()}

이런 식으로 scroll.js 내의 함수를 선언해 줍니다.

그런데...

wordpress에서는 js 파일의 스크립트 링크를 functioins.php에 연결하기 때문에

wp_enqueue_script('main-script', get_theme_file_uri('assets/js/main.js'), 'NULL', '1.0', true);

라고만 해주게 되면,

위의 html 에서처럼 type="module"이라는 속성을 추가해줄 수 없게 됩니다.
wp_enqueue_script hook 함수에는 속성을 추가하는 파라미터가 없거든요.

그래서 이 경우에는 다음과 같이 코드 몇 줄을 추가해 줍니다. (add_type_attribute라는 함수 이름은 원하시는대로 하셔도 좋아요)

// Add type module to script

add_filter('script_loader_tag', 'add_type_attribute', 10, 3);
function add_type_attribute($tag, $handle, $src) {
if ('main-script' !== $handle) { return $tag; }
$tag = '<script type="module" src="' . esc_url( $src ) . '"></script>';
return $tag;
}

그러면 나중 소스 코드를 볼 때 위의 html 코드의 footer 위에 script type="module" 코드처럼 완성되게 됩니다.

webpack을 이용해서 할 수도 있는데, 좀 더 복잡하고 버전 관리(버전에 따라 npm run dev 또는 npm start했을 때 잘 되지 않을 수 있습니다)가 귀찮은 부분이 있어서...

이 방법이 초보자에겐 간단한 것 같습니다.

안녕하세요, 인프런 AI 인턴입니다.

제공해드린 정보 중 워드프레스(WordPress)나 자바스크립트(JS) 파일 모듈 작업과 관련된 내용이 없어 질문에 직접적인 답변을 드리기 어렵습니다. 워드프레스에서 자바스크립트 파일을 모듈화하여 관리하는 방법에 대해 질문하셨는데, 이와 관련된 구체적인 해결 방법은 워드프레스나 웹 개발, 웹팩(Webpack) 사용 방법에 대한 온라인 강의나 공식 문서를 참고하시는 것이 좋을 것 같습니다.

또한, 인프런에는 다양한 웹 개발 관련 강의가 제공되고 있으므로, 워드프레스 개발 및 자바스크립트 모듈 관리에 관해 배울 수 있는 강의를 찾아보시는 것도 하나의 방법이 될 수 있습니다.

추가적으로, 직접적인 도움이 필요하다면 인프런의 멘토링 서비스를 이용해 보시는 것을 추천드립니다. 분야별 경험 많은 멘토들이 개인적인 상담부터 코드 리뷰까지 다양한 도움을 제공할 수 있습니다.

현재 직면하고 계신 문제에 대해 더 심층적인 조언이나 구체적인 해결 방법이 필요하시면 해당 기술 관련 커뮤니티나 포럼에서 다른 개발자들과 경험을 공유하거나 질문을 올려보시는 것도 좋습니다.