baseURL 을 지정해두면 나머지 경로만 입력하면 된다. (/api/v1/members/list -> /members/list)

axios.defaults.baseURL = '/api/v1';

인증 토큰은 백앤드 API 요청시 항상 전달하므로 기본값으로 설정할 수 있음

axios.defaults.headers.common['Authorization'] = JWT 

timeout에 설정된 시간내에 응답이 오지 않으면 연결이 중단(abort) 시킴

axios.defaults.timeout = 2000;

 

 

Throttle

여러 번 실행해도 최초의 실행이 끝날 때까지 실행되지 않는다. 

let timer = 0;

function handleThrottle(){
    console.log('진입');

    if (timer) {
        return;
    }

    timer = setTimeout(() => {
       console.log('실행');
       timer = 0;
    }, 1000);
}

Debounce

여러 번 실행할 경우 마지막 것이 실행된다. 

let timer = 0;

function handleDebounce(){
    console.log('진입');

    clearTimeout(timer);

    timer = setTimeout(() => {
       console.log('실행');
    }, 1000);
}

calc.js

const add = (a,b) => a + b;
const sub = (a,b) => a - b;

module.exports = {
	
    modulename: "calc module",
    add: add,
    sub: sub,
}

index.js

const calc = require("./calc")

console.log(calc.add(1,2));
console.log(calc.add(4,5));
console.log(calc.sub(10,2));

truthy

true
{} (empty object)
[] (empty array)
42 (number, not zero)
"0", "false" (string, not empty)

falsy

false
0, -0 (zero, minus zero)
0n (BigInt zero)
'', "", `` (empty string)
null
undefined
NaN (not a number)

배열에 includes 통하여 조건 단순화

function isKoreanFood(food) {
  if (["불고기", "비빔밥", "떡볶이"].includes(food)) {
    return true;
  }
  return false;
}

const food1 = isKoreanFood("불고기");
const food2 = isKoreanFood("파스타");
console.log(food1);
console.log(food2);

객체의 가로 표기법으로 if 문 줄이기

const meal = {
  한식: "불고기",
  중식: "멘보샤",
  일식: "초밥",
  양식: "스테이크",
  인도식: "카레"
};

const getMeal = (mealType) => {
  return meal[mealType] || "굶기";
};

console.log(getMeal("중식"));
console.log(getMeal());

 

if(temp.length > 0){
temp = temp.split("-").join("'");
if(isNaN(temp)){
alert('전화번호는 숫자와 -만 가능합니다.');
document.form1.column4.focus();
    return;
}
}

if(temp.length > 0){
temp = temp.split(" ").join("");
if (temp.search(/(\S+)@(\S+)\.(\S+)/) == -1 ) 
{
alert('올바른 이메일 형식이 아닙니다.');
document.form1.column6.focus();
    return;    
}
}

apply 와 call 은 함수 실행시 함수 컨텍스트를 전달된 인자로 변경 시킬 수 있게 해준다.

함수 컨텍스트란 함수가 실행 될때 this 인자로 참조 하는 객체를 의미 한다.

단지 차이점은 call은 파라미터를 직접 넘기게 되고 apply이는 파라미터를 배열 형태로 넘길수 있다.

참고

IE 계열에서 전달되는 인자 값이 undefined 이면 에러가 난다.

fFunc.call(thisObject, a, b, c, d, ...);
fFunc.apply(thisObject, aArgs);

[출처] apply 와 call 에 대해서 알아 보자 (Web Programmer 2.0) |작성자 치토스

사용

<html>
<head>
<script>
  var o1 = {handle :'o1'};
  var o2 = {handle :'o2'};
  var o3 = {handle :'o3'};
  window.handle = 'window';
 
  function whoAmI(){
    return this.handle;
  }
  o1.identifyMe = whoAmI;

  alert(whoAmI());
  alert(o1.identifyMe());
  alert(whoAmI.call(o2));
  alert(whoAmI.apply(o3));
</script>
</head>
<body>
</body>
</html>

결과
window
o1
o2
o3

형태로 나온다. call과 apply 파라미터 인자 (객체)에 특정함수로 실행하는 것이다. 함수.call(객체)임 셈이다. 



<script language="javascript">
 function reSizeFrame(obj){
  var innerBody = obj.document.body;
  var innerHeight = innerBody.scrollHeight + innerBody.clientHeight;
  obj.style.height = innerHeight;
 }
</script>
</HEAD>

<BODY>
<iframe name='iframe0' src='http://www.naver.com' width="100%" frameborder="0" scrolling="no" vspace="0" onLoad="reSizeFrame(this);">
</iframe>

onLoad가 있었구나 파이어폭스 같은 경우 contentWindow를 얻어와야 한다는데 swing인가? rootPane이 생각남

+ Recent posts

티스토리툴바