js) focus & Vue #2311

# 새창에 포커스

 const 변수명 = window.open(`url`, "새창이름");
if (변수명) {
    변수명.focus();
}

// 새창이 있다면 해당창에 포커스되게 하기

 

# @font-face

 

@font-face 사용시 src 부분에
local("폰트명") 을 쓰게 되면 사용자가 설치한 폰트와 싸우게 된다.
따라서 이부분은 삭제하는 것이 좋다.

👀: https://developer.mozilla.org/ko/docs/Web/CSS/@font-face

 

 

# npm 모듈 설치 후 사용하기(in Vue)

 

import Vue from 'vue';
import PerfectScrollbar from "vue2-perfect-scrollbar";
import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css';

Vue.use(PerfectScrollbar);

 

1. npm ~ 필요한 모듈을 설치한다. (예시: PerfectScrollbar )

2. nuxt.config.ts 에서 해당 모듈을 사용한다고 선언한다.

3. 해당모듈파일을 만든 후 npm에서 선언하라고 한 구문을 쓴다. 

4. 사용할 부분을 Vue.use() 안에 사용한다.

 

3. vue에서 스크롤 탑을 위로

window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });

//behavior: 'smooth' 부드럽게 올라가라는 의미

 

 

4.  startsWith/endsWith 

 

- 특정 문자로 시작하거나 끝나는지 체크

 

참고👀: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith

 

 

5. vue에서 $nextTick() 

 

- vue 에서 데이터를 로드하고 나서 그 데이터에 값에 따라 스타일을 줘야할 경우

 데이터값이 바뀌지 않았는대 DOM을 그리게 되면 해당 스타일이 적용되지 않는 문제가 발생한다.

- 이때 사용할 수 있는 callback함수가 $nextTick() 이다.

- 상황에 따라서는 awiat/async 를 활용할 수도 있다.

- 간혹 해당부분으로 되지 않을 경우에는 데이터값이 바뀐 후 settimeout으로 데이터가 바꼇는지 안바꼈는지에 대한 변수값을 설정하여 그값에 따라 스타일을 주어 해결할 수 도 있다.

 

참고 👀 : https://doozi316.github.io/vuejs/2020/08/10/Vue4/

 

 

6. pointer-events css

 

- 마우스 포인터 이벤트를 제거 하고 싶을 때 사용

- 상위요소에 이벤트를 주고 하위요소에서 이벤트를 제거할 경우 이벤트 캡처 / 버블 이벤트 리스너를 트리거 할 수 있다.

 

참고 👀: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

 

반응형

 

 

7. window.navigator.userAgent = bowser 모듈

 

-윈도우의 유저에이전트를 쉽게 관리 할 수 있다.

https://www.npmjs.com/package/bowser

bowser

https://github.com/bowser-js/bowser

 

 

8.  $nuxt.$emit

 

- nuxt에서 이벤트 버스 사용시 부모자식 관계에서는 자식이 부모에게  this.$emit 으로 사용하지만 전역으로 쓸 경우에는 $nuxt.$emit 으로 사용한다.

- 받을때는 부모자식의 경우 부모 컴포넌트에서 @발생시킨컴포넌트이름="메소드" 하여 해당 메소드를 실행한다.

- 전역으로 사용할 경우 $nuxt.$on 으로 받으면 된다. (보통 독립적인 컴포넌트에서 사용한다. 너무 많이 사용하면 어디서 보냈는지 찾기 어렵다.)

- 참고로 부모자식관계에서 부모가 자식한테 보낼때는 props로 보내면 된다.🙄

 

참고 👀: https://hjh0827.tistory.com/34

 

 

9.  vue의 Mixins 

 

- Vue Mixins 이나 extends를 사용하다는 경우 hook 함수는 재정의 되지 않는다.
- Hook(mounted,컴포넌 등등 -> 그대로 재정의 된다.)을 제외한 함수만 재정의가 가능하다.

- 따라서 훅을 제외한 부분은 그대로 들고와야 하며 바꿀내용은 들고와서 바꾸면 된다.

- html 부분은 그대로 들고와서 사용하는 코드로 바꾸면 된다. (본인이 필요한 커스텀에 맞게)

 

 

 

10. access modifier(접근제어자)

 

- 클래스와 클래스 멤버의 선언 시 사용하여 부가적인 의미를 부여하는 키워드

1) private : 선언된 클래스 멤버는 외부에 공개되지 않으며, 외부에서는 직접 접근할 수 없다.

2) public : 선언된 클래스 멤버는 외부로 공개되며, 해당 객체를 사용하는 프로그램 어디에서나 직접 접근할 수 있다.
-  public 메소드는 private 멤버와 프로그램 사이의 인터페이스(interface) 역할을 수행한다고 할 수 있다.

3) default : 같은 클래스의 멤버와 같은 패키지에 속하는 멤버에서만 접근할 수 있다. (자바에서는 기본값이 default)

4) protected : 부모 클래스에 대해서는 public 멤버처럼 취급되며, 외부에서는 private 멤버처럼 취급된다.

* 접근 제어자의 접근 범위 : public > protected > default > private

참고 👀: https://www.tcpschool.com/java/java_modifier_accessModifier

코딩교육 티씨피스쿨

 

+++ vue에서 클래스데코레이터로 된 파일을 개발 중 Mixins 중 알게된 위의 접근제어자

+++ 따라서 상황에 맞게 선택해서 사용해야 한다.