js) Callback & js #2311

1. 콜백(Callback) 함수

 

- 콜백(Callback) 함수는 간단히 말하면 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 말한다.
- 콜백 함수란 파라미터로 일반적인 변수나 값을 전달하는 것이 아닌 함수 자체를 전달하는 것을 말한다.
- 보통 일회성으로 사용하기 때문에 익명함수 형태로 넣어준다.

👀 출처 : https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98

 

2.  sass for문

 

@for $i from 1 to 26{
 .클래스명#{$i}{
      background-image: url('#{$i}.png');
  }
}

// sass for문

 

 

3.  NavigationDuplicated error

 

router.push('path') 할 때

메인주소/${idx} 에서 로그아웃하면 메인주소 로 옮기려고 할때
이미 같은 메인주소라서 vue에서 에러를 뽑는다.

이때

this.$router.push('/') 에서

this.$router.push('/').catch(()=>{}); 로 변경하면 에러가 없어진다.


위의 방식은 모든 에러를 무시하므로
전역으로 NavigationDuplicated에 대한 에러만 무시하는 방법

const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err);
}

 

참조 👀: https://stackoverflow.com/questions/58634914/getting-navigation-duplicated-error-while-the-route-is-being-replaced-on-vue-rou/59541856#59541856

 

 

4. vue @click.prevent.stop

 

- 부모에서 이벤트가 전파 되는것을 막은 후 본인이 가진 이벤트를 실행 할때 사용

참조 👀: https://v2.ko.vuejs.org/v2/guide/events.html

 

 

5. oterwidth와 innerwidth 차이로 생기는 width값 조정

private modalSize(width: number, height:number) {
	window.resizeTo(width + (window.outerWidth - window.innerWidth), height + (window.outerHeight - window.innerHeight));
}

// 사용할때
modalSize("현재 쓰일곳 width", "현재 쓰일곳 height");

 

 

반응형

 

 

6.  window.resizeBy(xDelta, yDelta)

 

- 윈도우 창 크기를 현재 크기를 기준으로 창 크기를 조정한다.

- width값을 xDelta 만큼 height값을 yDelta 값만큼 조절하라는 메서드

- 음수(-)를 쓰면 줄어든다. 양수는 늘어난다.

 

if ( window.outerWidth < 768) {
    window.resizeBy(0, (768 - window.outerHeight));
}

/* 윈도우창이 768보다 작아질경우 가로는 줄이거나 늘이지 않지만
세로의 경우 768에서 현재 윈도우 높이를 뺀 값만큼 더해준다는 의미
*/

 

+++ window.resizeBy(x,y) : 상대좌표로 크기조절 , window.resizeTo(x,y) : 절대좌표로 크기조절 [x,y에 쓴값 그대로 적용됨]

 

 

7. Parameter (QueryString)

 

* 뷰에서 $route.path, $route.params 를 가져올 수 있듯이 자바스크립트에서도 Parameter (QueryString)를 가져와야 할때가 있다.

 

예시주소: https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query=%ED%99%94%EC%9D%B4%ED%8C%85

1. 현재주소 : const url = window.location.href; // 예시주소가 그대로 찍힘
2. 파라미터얻기 : const urlParameter = window.location.search; // ?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query=%ED%99%94%EC%9D%B4%ED%8C%85
3. 특정 URL Parameter 얻기

- const 특정url = new URL(url);
1) const 특정url = new URL(url).get("where"); //  parameterName인 where로 조회되는 첫번째 값 리턴
2)  const 특정url = new URL(url).getAll("where");//  parameterName인 where로 조회되는 모든 값을 배열로 리턴

- 전체 url 파라미터 얻기

const urlParams = new URLSearchParams(urlParameter);  // 2번에 있는 파라미터 얻기 값을 넣은것
const keys = urlParams.keys(); // 아래값들이 찍힘

for(const key of keys) {
  console.log(key);
  // where
  // sm
  // fbm
  // ie
  // query
}  

const keys = urlParams.values(); // 파라미터의 value에 해당하는 값이 찍힘
for(const value of values) {
  console.log(value);
  // nexearch
  // top_hty
  // 0
  // utf8
  // %ED%99%94%EC%9D%B4%ED%8C%85
}

const keys = urlParams.entries();

for(const entry of entries) {
  console.log(entry[0], entry[1]);  // 파라미터 키, value 가 찍힘 
}

// 파라미터 존재여부 
console.log(urlParams.has("naver")) // false
console.log(urlParams.has("where")) // true


//파라미터 추가 

urlParams.append("parameterName", "value") 

//파라미터 변경

urlParams.set("parameterName", "value") 

// 파라미터 삭제
urlParams.set("parameterName")

 

참초👀: https://velog.io/@gillog/javaScript-URL-Parameter-%EA%B0%92-%EB%8B%A4%EB%A3%A8%EA%B8%B0

 

728x90

8. flex요소에 ellipsis 적용하기(말줄임)

/* flex에 ellipsis가 적용되지 않아 사용한 코드 */
.부모요소{
    flex: 1 1 auto;
    min-width: 0;
}
.자식요소{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
}

 

 

9. location.hash

 

<a id="myAnchor" href="/en-US/docs/Location.href#Examples">Examples</a>
<script>
  const anchor = document.getElementById("myAnchor");
  console.log(anchor.hash); // Returns '#Examples'
</script>

 

++ hash 제거하기

function removeHash () { 
    history.pushState("", document.title, window.location.pathname + window.location.search);
}

// hash를 제거한 url
window.location.href.substr(0, window.location.href.indexOf('#'))
window.location.href.split('#')[0]

 

10 . 정규식

참고 👀 : https://namu.wiki/w/%EC%A0%95%EA%B7%9C%20%ED%91%9C%ED%98%84%EC%8B%9D
https://regexr.com/

 

- 정규식은 문자열의 일정한 패턴을 표현하는 일종의 형식 언어이다.

- 회원가입등에 많이 쓰인다.

 

검증해보기 - 내가 한게 맞는지볼땐 아래의 사이트를 이용해 보자(정말 유용한 싸이트!  정규식 규칙도 알 수 있다.)👀

 

RegExr: Learn, Build, & Test RegEx

 

++++ vue에서 class, :class 둘다 있는경우는 class는 무조건 적용 :class는 조건에 따라서 적용(기본 class에 :class가 합해진다 -까먹지말자🥲 )

 

++++  현업에서 배운 디버깅 프록시 서버 도구 : fiddler(피들러) 

- 디버깅 도구로 개발자툴이 없어도 어떤 프로그램이든  네트워크 및   http / https 통신을 확인 할 수 있다.

다운하기 : https://www.telerik.com/fiddler

Fiddler | Web Debugging Proxy and Troubleshooting Solutions

 

참조 👀 : https://devscb.tistory.com/58