wordpress에서 js파일 모듈작업

Question

wordpress에서 js파일을 작게 쪼개서 관리를 하려고 모듈작업을 하려고 좀 찾아봤는데 시원하게 나온게 별로 없더라구요. webpack을 이용해서 하는 방법도 있는거 같은데 좀 이해가 되지 않는거 같구요. 혹시 강사님이 쓰시는 방법이 있으시다면 소개좀 부탁드립니다.^^ 여기서 지금 일주일째 못나가고 있네요.ㅠㅠ

Self-coding · Answer

안녕하세요~ 요즘 제가 업무가 바빠서... 답변이 늦어 죄송합니다. ㅠㅠ 일반적으로 js 파일 스크립트 링크를 걸 때 modules로 잘게 나누어 각 모듈에서 js 코딩을 하면 깔끔하고 또한 협업에 도움이 됩니다. 이 때 html 파일 footer 엘리먼트 위에 이렇게 표기해 주고, 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 = '' ; return $tag ; } 그러면 나중 소스 코드를 볼 때 위의 html 코드의 footer 위에 script type="module" 코드처럼 완성되게 됩니다. webpack을 이용해서 할 수도 있는데, 좀 더 복잡하고 버전 관리(버전에 따라 npm run dev 또는 npm start했을 때 잘 되지 않을 수 있습니다)가 귀찮은 부분이 있어서... 이 방법이 초보자에겐 간단한 것 같습니다.

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. 제공해드린 정보 중 워드프레스(WordPress)나 자바스크립트(JS) 파일 모듈 작업과 관련된 내용이 없어 질문에 직접적인 답변을 드리기 어렵습니다. 워드프레스에서 자바스크립트 파일을 모듈화하여 관리하는 방법에 대해 질문하셨는데, 이와 관련된 구체적인 해결 방법은 워드프레스나 웹 개발, 웹팩(Webpack) 사용 방법에 대한 온라인 강의나 공식 문서를 참고하시는 것이 좋을 것 같습니다. 또한, 인프런에는 다양한 웹 개발 관련 강의가 제공되고 있으므로, 워드프레스 개발 및 자바스크립트 모듈 관리에 관해 배울 수 있는 강의를 찾아보시는 것도 하나의 방법이 될 수 있습니다. 추가적으로, 직접적인 도움이 필요하다면 인프런의 멘토링 서비스 를 이용해 보시는 것을 추천드립니다. 분야별 경험 많은 멘토들이 개인적인 상담부터 코드 리뷰까지 다양한 도움을 제공할 수 있습니다. 현재 직면하고 계신 문제에 대해 더 심층적인 조언이나 구체적인 해결 방법이 필요하시면 해당 기술 관련 커뮤니티나 포럼에서 다른 개발자들과 경험을 공유하거나 질문을 올려보시는 것도 좋습니다.