SimCoding

[Javascript] concat vs spread-operator 성능 비교 두배열을 합칠 때, 주로 'concat' 혹은 spread-operator를 주로 사용한다. 그렇다면 어떨걸 사용하는게 좋을까 ? 결론부터 말하자면, concat을 쓸 수 있는 상황이라면 concat을 사용하는 것을 추천한다. 배열의 길이에 따른 3가지 테스트를 진행해봤다. 1) 길이가 5인 배열 2개를 합칠경우 https://www.measurethat.net/Benchmarks/ShowResult/367182 2) 길이가 500인 배열 2개를 합칠경우 https://www.measurethat.net/Benchmarks/ShowResult/367185 3) 길이가 50000인 배열 2개를 합칠경우 https://www.m..

[JS] Javascript padStart , padEnd 사용해서 빈자릿수 채우기. 안녕하세요. 이번 포스팅에서는 padStart(), padEnd() 를 사용해서, 빈자릿수를 원하는 문자열로 채워주는 방법을 알아보겠습니다. padStart() let num = 12; num = String(num).padStart(4,'0') // 문자열 앞에 '0'을 채워 4자리수를 만들어준다. console.log(num) // 0012 padEnd() let num = 12; num = String(num).padEnd(4,'0') // 문자열 뒤에 '0'을 채워 4자리수를 만들어준다. console.log(num) // 1200

[JS] axios interceptors 를 이용해 token만료시 refreshToken 요청하기. 안녕하세요. 이번 포스팅에서는, token이 만료됐을 때 refreshToken을 자동으로 요청 하기 위한 axios interceptors 설정에 대해 알아보겠습니다. 과정 요청성공시 return 요청실패시 ( 토큰 만료로 인한 에러 발생시) 에러를 반환하기 전에 interceptor 해서, 서버에 token refresh를 요청합니다. token refresh요청을 통해 받은 새로운 accessToken을 ReduxStore등 본인이 이용하는 저장소에 저장합니다. 새로운 accessToken을 header에 담아, 재요청합니다. 코드 예시 axios.interceptors.response.use( ..

[JS] axios interceptor로 authorization header 설정하는 방법. 안녕하세요, 이번 포스팅에서는 axios interceptor를 활용해 authorization header의 default값을 설정하는 방법에 대해 알아보겠습니다. 토큰이 있을 경우 config.header.Authorization = `Bearer ${token}` 토큰이 없을 경우 config.header.Authorization = "" 예시 코드 axios.interceptors.request.use(function (config) { config.headers.Authorization = token ? `Bearer ${token}` : ""; return config; }); 이렇게 설정해주면, ..

axios interceptor 를 이용해서 요청,응답 커스터마이징 하는 방법 안녕하세요. 이번 포스팅에서는 axios의 interceptor를 이용해서 requset, response를 커스터마이징 하는 방법에 대해서 알아보겠습니다. 인터셉터 인터셉터 사용방법을 예시 코드를 통해 확인해보겠습니다. // 요청 인터셉터 추가 axios.interceptors.request.use( function (config) { // config에는 axios요청시 입력한 config가 들어있습니다. // config를 가공해서 요청하는 것이 가능합니다 ! // 요청을 보내기 전에 수행할 일 // ... return config; }, function (error) { // 오류 요청을 보내기전 수행할 일 // .....

자바스크립트 배열 초기화하는 방법 > new Array : 길이가 n인 배열 생성하기 /* new Array() */ const arr = new Array(5); console.log(arr); // => Array(5) [] console.log(arr[0]); // => undefined console.log(arr.length); // => 5 > Array.from : 콜백함수를 활용한 배열 생성하기 /* Array.from() 콜백의 두번째 매개변수는 배열의 index를 반환한다. */ const arr = Array.from({ length: 5 }, (v, i) => i); console.log(arr); // => Array(5) [0, 1, 2, 3, 4] console.log(arr[..

[JS] 자바스크립트 ES6 Class , extends 예시코드 ES6에 도입된 Class에 대해 예시코드를 통해 알아보자. @ Class 예시코드 class User { //constructor : 값을 초기화 해준다. constructor(name, age) { this.name = name; this.age = age; } showName() { console.log(`이름 : ${this.name} 나이 : ${this.age}`); } } const tom = new User("Tom", 19); tom.showName(); // 이름 : Tom 나이 : 19 console.log(tom); /* showName이 Prototype에 할당된다. ▼User {name: 'Tom', age: 19..

자바스크립트 call , apply ,bind 예시 코드 javascript 함수호출시 사양되는 call, apply, bind를 코드예시를 통해 알아보겠습니다. @ call 사용예시 const mike = { name: "Mike", }; function showThisName() { console.log(this.name); } function update(birthYear, occupation) { this.birthYear = birthYear; this.occupation = occupation; } showThisName.call(mike); // this에 mike를 할당해준다. update.call(mike,1999,"singer") // 매개변수를 순서대로 받는다. console.log(..