전경원의 블로그 전경원의 블로그

typescript로 js파일을 만들었다. wwwroot/js에 kakaomap.js와 kakaomap.js.map 파일이 생겼다. 크롬 개발자 도구의 js파일에서 breakpoint를 찍었다. 그랬더니 ts파일을 찾을 수 없다는 메세지를 받았다. Could not load content for https://localhost:44333/_content/_scripts/kakaomap.ts (HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE) 방법 1. 그냥 js로 디버깅 이럴 경우 그냥 js로 디버깅 하는 것도 방법이 될 수 있다. .map 파일을 생성하지 않으면 된다. tsconfig.json 파일에서 sourceMap 값을 false..

카카오 지도 API 개발하는 과정에서 겪은 일. blazor를 선택하면서 js를 쓸 일은 없겠거니 했지만, js로만 되어있는 라이브러리를 사용하게 되면 어쩔 수 없어 JS Interop을 사용해서 개발해야 한다. 처음에는 단순 함수로 개발했다. ts로 바꾸는 등 변화 과정을 기록한다. blazor project에 typescript를 적용하는 과정은 여기서 확인. 2022.03.04 - [분류 전체보기] - Blazor에서 typescript 사용하기 변경 전: javascript 기반, 단순 함수를 호출 javascript에 함수로 만들고, 전역변수를 두어 map 객체를 관리한다. 모든 변수는 전역변수로 만든다. (당연히) map이외에 marker 등 다른 함수와 섞이면서 코드 관리가 어렵다. 변수의 ..

당연하겠지만 blazor에서 javascript를 사용할 수 있다. 하지만 typescript가 아니면 뭔가 불안하다. 버그가 속출할 것 같고.. 마치 그냥 C로 코딩하는 기분이랄까.. typescript를 적용하자. 참고문서 https://www.c-sharpcorner.com/blogs/type-script-with-blazor https://docs.microsoft.com/en-us/visualstudio/javascript/compile-typescript-code-nuget?view=vs-2022 가장 먼저 Microsoft.Typescript.MSBuild 를 설치한다. 설치가 잘 안됐다. 뭔가 뒤에서 하는데 csproj 파일엔 반영이 안되는 느낌.. MS 문서를 보고 그냥 csproj 파일..

당연하겠지만 blazor에서 javascript함수를 호출할 수 있고, javascript에서 blazor함수를 호출할 수 있다. Wasm뿐만 아니라 server side blazor도 가능하다. 참고: ASP.NET Core Blazor JavaScript interoperability (JS interop) 이 기능을 사용하면 카카오맵을 연동할 수 있다. 카카오맵 설명서: https://apis.map.kakao.com/web/ 연동하면서 생기는 이슈를 정리해본다. 기본적인 내용은 카카오맵 설명서를 참조하면 될 듯!

홈페이지 주소 : https://hellojkw.com Server side blazor app으로 개발했다. front의 모든 코드가 backend에서 동작한다. front에서 backend의 모든 리소스를 사용할 수 있다. 다르게 표현하면 유저가 버튼을 클릭하면 클릭 이벤트만 서버로 넘어가고 서버에서 모든 로직이 돌아간 후 변경되어야 할 DOM 만 계산해서 front로 보낸다. javascript를 전혀 사용하지 않고 홈페이지 개발이 가능하다. SPA와 asp.net core를 잘 섞어 놓은 느낌이다.