blazor webassembly js파일 크롬브라우저 변경 안됨

블레이저 webassembly로 웹개발을 하고 있습니다.
테스트는 크롬브라우저로 하고 있습니다.

Client > wwwroot > js 폴더 > ex.js 파일을 생성하여 index.html 파일 마지막 부분에 ex.js 파일을 파일로 호출하였습니다.

그런데 버튼 클릭 시 console.log 찍는걸 했는데 안찍히더라구요
그래서 관리자 모드 source탭에 js폴더와 ex.js파일은 있는데 안에 코드가 없더라고요 혹시 어떤것이 문제인지 알 수 있을까요?

블레이저의 요체는 javascript 로, 자바 스크립트 프레임워크 중 하나라고 할 수 있습니다.

8.0 : blazor.web.js
7.0 이하 : blazor.wasm.js, blazor.server.js

이 파일은 하나의 실행 컨텍스트를 나타냅니다. 만약 이 프레임워크와 상관없는 별도의 js 로직이 필요한 경우, 블레이저 실행 컨텍스트 내부에서 호출되어야 합니다.

ASP.NET Core Blazor startup | Microsoft Learn

블레이저 스크립트 실행 중에 다른 스크립트, 특히 DOM의 상태 변화를 유발하는 스크립트의 사용은 매우 신중해야 합니다.

블레이저는 자신이 관리하는 렌더트리를 기반으로 DOM 객체를 관리하는데, 다른 자바스크립트가 블레이저에 통지를 하지 않고 변경을 한다면 블레이저는 오작동을 일으킵니다.

이러한 오작동은 자바스크립트가 포함된 CSS 프레임워크를 사용하다보면 종종 발견할 수 있습니다.

1 Like

출력창에서 > 출력 보기 선택 > ASP.NET Core 웹 서버 클릭하셨어 Console.log를 확인 해보시는게 어떠신가요 ?

추가로 Blazor 생성하여 _Layoust.cs.html 파일이 있다면 javascript를 적용 해보시는게 어떤시가요?

아직 공부할게 많은 것 같습니다 감사합니다!

2 Likes

inject IJSRuntime을 통해서 해당 파일에 있는 함수를 호출하면 해당 함수가 정의되지 않았다고 에러가 나더라구요…!
.net 7.0 blazor webassembly라 layout.cshtml파일이 없네용 …

  1. @BigSquare 님이 말씀하신대로 전역으로 JS를 불러오신다면 렌더링이 끝나고 DOM을 찾아야 addEventListener가 잘 동작합니다.
  2. 만약 JS 파일이 컴포넌트에 쓰는 지엽적인 함수가 있는 것이라면 JSInterop을 컴포넌트 단위로 하는 것을 추천드립니다(version >= 5.0). JavaScript 모듈에서의 JavaScript 격리