Hangun's World – Blog

[카테고리:] JavaScript

크롬 개발자 도구에서 vue 탭이 안보일 때

가끔 크롬 개발자 도구에서 vue 탭이 사라져서, 브라우저 재시작 등 이런저런 방법도 소용이 없었는데, 단축키 Alt + R 을 실행하여 개발자 도구를 새로고침 해주니 다시 보이네요.

2022/11/03
Nuxt + Swiper 페이지 이동 시 화면 깨짐
Nuxt + Swiper에서 페이지 이동 시에 첫번째 슬라이드의 내용이 잠시 노출 되었다가 화면이 전환되는 문제가 발생합니다. 페이지를 벗어날 때 Swiper.destroy()가 자동으로 실행되어 생기는 문제입니다.
직접 destroy() 함수를 호출할 때는 파라메터로 제어가 가능하지만, 자동으로 실행이 되어 이 방법을 사용할 수는 없네요.

그럴 때 아래와 같이 delete-instance-on-destroy, cleanup-styles-on-destroy 속성을 추가하면 문제를 해결할 수 있습니다.
```
  ...
```
2022/09/19
문자열을 Date 객체 변환하기
날자가 “20220630” 또는 “2022.07.09”와 같은 문자열로 되어 있을 때, 이를 Date객체로 변환하면 아래와 같이 유효하지 않은 날자로 인식됩니다.
```
new Date("2022.06.05")
new Date("20220605")
// Invalid Date
```
그러므로 문자열을 YYYY-MM-DD 형식에 맞게 바꿔줘야 합니다.
https://tc39.es/ecma262/#sec-date-time-string-format 참조

아래와 같이 정규식으로 문자열을 문제없이 변환할 수 있습니다.
```
new Date("20220605".replace(/(\d{4})(\d{2})(\d{2})/g, '$1-$2-$3'))
new Date("2022.06.05".replace(/(\d{4}).(\d{2}).(\d{2})/g, '$1-$2-$3'))
// Date Sun Jun 05 2022 09:00:00 GMT+0900 (대한민국 표준시)
```
2022/06/30
콘솔에서 VUE 객체 사용하기
전에 콘솔에서 AngularJs의 스코프에 접근하기 위한 코드를 올렸는데, 이번에는 VUE에서 내부 객체에 접근하기 위한 방법입니다.
다음과 같이 __vue__ 를 참조하여 VUE 객체에 접근이 가능합니다.
```
var myVue1 = document.getElementById("myVueId").__vue__
var myVue2 = document.getElementsByClassName("myVueClass")[0].__vue__;
```
아래 포스트와 같이 Custom JavaScript를 사용하면 더욱 쉽게 디버깅 할 수 있습니다.
크롬에서 cjs로 AngularJS 디버깅하기
2019/09/19
AngularJS 에서 동적으로 디렉티브 생성
처음부터 생성할 필요가 없는 요소를 나중에 동적으로 생성하기 위한 코드입니다.
페이지 로딩 시에 초기화하는 객체의 수를 줄여서 조금이라도 빠르게 페이지가 실행되도록 하고, 필요할 때 해당 객체를 생성할 수 있습니다.
아래 코드는 브라우저 콘솔에서 실행하기 위한 것으로, 실제 필요한 부분은 마지막 줄입니다.
```
var $body = angular.element(document.body);
var $scope = $body.scope();
var injector = $body.injector();
var $compile = injector.get("$compile");

angular.element("#wrapper").append( $compile("")($scope) );
```
2019/08/26