• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

wordpress에서 js파일 모듈작업

24.05.10 16:08 작성 조회수 75

0

wordpress에서 js파일을 작게 쪼개서 관리를 하려고

모듈작업을 하려고 좀 찾아봤는데

시원하게 나온게 별로 없더라구요.

webpack을 이용해서 하는 방법도 있는거 같은데 좀 이해가 되지 않는거 같구요.

혹시 강사님이 쓰시는 방법이 있으시다면 소개좀 부탁드립니다.^^

여기서 지금 일주일째 못나가고 있네요.ㅠㅠ

답변 2

·

답변을 작성해보세요.

0

안녕하세요~

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

일반적으로 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했을 때 잘 되지 않을 수 있습니다)가 귀찮은 부분이 있어서...

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

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2024.05.12

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

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

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

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

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

채널톡 아이콘