flask render_template 사용 중 javascript load 순서

function B는 공통 함수로 static folder 내에 script.js 파일에 저장 되어있습니다.

base.html 의 head 부에서 아래와 같이 load 하였습니다.
<script src="{{ url_for('static', filename='scripts.js') }}" type="module"></script>

그 후 contents.html 에서 아래 와 같이 사용 하려 하는데 B is not defined error 발생 하였습니다.

<script>
    let a = 1;
    let b = B(a)
</script>

로딩 순서떄문이라 생각 되어 확인차 script.js 파일과 contents.html의 <script> 태그에 모두 console.log()입력 후 실행 한 결과

console.log('contents.html 에서 출력')
->
console.log('script.js에서 출력')

의 결과 인데 ..

render_template 를 실행 할때 java script 는 head 에서 바디로 흐르는 순서를 지키지 않나요 ?

달라라이언 256

M 2023년 5월 31일 11:47 오전

목록으로
1개의 답변이 있습니다. 1 / 1 Page

안녕하세요.
개인적인 생각 적습니다.
(틀리면 정정해주시면 감사하겠습니다.)

Jinja는 template engine일 뿐 브라우저 단에서의
js loading등의 행위엔 영향을 미치지 않습니다.

type="module" 일 경우 해당 파일 밖에서 module 안에
정의된 변수나 함수는 쓸 수 없습니다.
(이것은 jinja와 전혀 상관없는 JS의 영역입니다.)

관련 MDN 문서입니다.
4번째 bullet point와 관련 snippet을 보시면 될 것 같습니다.

결론은 module에서 정의된 함수는 다른 <script>에서는 쓸수 없습니다.

  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#other_differences_between_modules_and_standard_scripts

로디

M 2023년 5월 31일 2:18 오후