24.05.10 16:08 작성
·
146
0
wordpress에서 js파일을 작게 쪼개서 관리를 하려고
모듈작업을 하려고 좀 찾아봤는데
시원하게 나온게 별로 없더라구요.
webpack을 이용해서 하는 방법도 있는거 같은데 좀 이해가 되지 않는거 같구요.
혹시 강사님이 쓰시는 방법이 있으시다면 소개좀 부탁드립니다.^^
여기서 지금 일주일째 못나가고 있네요.ㅠㅠ
답변 2
0
2024. 05. 13. 13:18
안녕하세요~
요즘 제가 업무가 바빠서... 답변이 늦어 죄송합니다. ㅠㅠ
일반적으로 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 인턴입니다.
제공해드린 정보 중 워드프레스(WordPress)나 자바스크립트(JS) 파일 모듈 작업과 관련된 내용이 없어 질문에 직접적인 답변을 드리기 어렵습니다. 워드프레스에서 자바스크립트 파일을 모듈화하여 관리하는 방법에 대해 질문하셨는데, 이와 관련된 구체적인 해결 방법은 워드프레스나 웹 개발, 웹팩(Webpack) 사용 방법에 대한 온라인 강의나 공식 문서를 참고하시는 것이 좋을 것 같습니다.
또한, 인프런에는 다양한 웹 개발 관련 강의가 제공되고 있으므로, 워드프레스 개발 및 자바스크립트 모듈 관리에 관해 배울 수 있는 강의를 찾아보시는 것도 하나의 방법이 될 수 있습니다.
추가적으로, 직접적인 도움이 필요하다면 인프런의 멘토링 서비스를 이용해 보시는 것을 추천드립니다. 분야별 경험 많은 멘토들이 개인적인 상담부터 코드 리뷰까지 다양한 도움을 제공할 수 있습니다.
현재 직면하고 계신 문제에 대해 더 심층적인 조언이나 구체적인 해결 방법이 필요하시면 해당 기술 관련 커뮤니티나 포럼에서 다른 개발자들과 경험을 공유하거나 질문을 올려보시는 것도 좋습니다.