• react typescript eslint airbnb style 로 웹 개발을 하고 있는데,
• + 로 문자열 이어붙이기를 사용했는데, eslint룰에 따라 자동 포맷팅 되었다!
• eslint가 처음에는 불편하기만 했는데, 지금은 너무 좋다…

참고

• https://eslint.org/docs/rules/prefer-template

1
2
3
4

const clampNumber = (num, a, b) =>
  Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
console.log(clampNumber(-10, 0, 5)); // 0
console.log(clampNumber(10, 0, 5)); // 5

• 지정한 범위가 있고, 그 범위를 벗어나는 값이 들어왔을 때,
• 그 입력을 최소, 최대값 치환할 때 유용하다

참고

• https://www.w3resource.com/javascript-exercises/fundamental/javascript-fundamental-exercise-266.php

의미없는 변수이름들..

• api를 사용하다보면 주기적으로? 변수명이 바뀌는 상황이 나온다
• 카카오 맵 api 가 그러하다
• 이렇게 직접 객체의 변수에 접근해서 사용하는 것은 바람직하지 않다고 한다

• 그런데 객체의 값에 직접 접근하고 싶은경우가 있을 수 있다
• 하지만 키의 이름은 주기적으로 바뀐다
• 그래서 obj.key 이런식의 접근은 당장에는 가능하나,
• 언젠가는 동작하지 않는 코드가 된다

• 키의 이름이 주기적으로 바뀌는 것을 무시하고 접근한다고 생각하니까
• 인덱스로 접근하는 방법을 알아보았다

access by index

1
2
3
4
5

a = { la: 1, ma: 2 };
Object.keys(a)[0]; // 'la'

a.la; // == 1
a[Object.keys(a)[0]]; // == a.la

• Object.keys(a)를 통해 key의 배열을 받을 수 있다
• 이를 통해서 인덱스를 통한 접근이 가능해진다

1
2
3
4
5

a = { ma: 2, la: 1 };
Object.keys(a)[0]; // 'ma'

a = { la: 1, ma: 2 };
Object.keys(a)[0]; // 'la'

• 인덱스가 어떻게 부여되나 실험을 해보았는데,
• 직관적으로 왼쪽에서 오른쪽으로 번호가 매겨진다
• 키의 알파벳이나, 그 안에 들어있는 값이나 일절 상관없다

참고

• 가장 베스트는 api에서 제공하는 메서드를 잘 알고 활용하는 것이다
• 지도의 getCenter(), getBounds() 출력변수는 왜 자꾸 변하나요!?!?!?!?!?!?

방법1 ; substr

1
2
3
4

let N = 7;
let padding = '00000000';

let result = (padding + N.toString(2)).substr(-padding.length);

“00000111”

• 2진수, 16진수 등 표현할 때 앞에 0을 추가해서 보여주고싶을 때가 있다
• 8자리로 표현하고싶으면, padding 변수에 0으로 8자리를 채운다
• padding 과 이진수를 더하고 substr로 뒤에서부터 8자리만큼 잘라주면된다

방법2 ; padStart

1
2
3
4

let N = 7;
let padding = '00000000';

let result = N.toString(2).padStart(8, '0');

• 오후 3:25 2021-03-24 추가
• 훨씬 더 간단한 방법이 있었다
• padStart() 첫 번째 인자로 자릿수를 지정하고,
• 두 번째 인자로 추가할 문자열을 입력한다
• 만약에 첫 번째 인자보다 긴 문자열일 경우 아무 일도 일어나지 않는다

• 비슷한 메서드로 padEnd() 가 있는데 이거는 패딩을 뒤에 추가한다

참고

• way-to-add-leading-zeroes-to-binary-string-in-javascript
• substr
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

1
2
3
4

const log = console.log;

log(12312313);
log('안녕');

• console. 쓰는 수고를 덜어준다
• log 까지지면 vscode의 경우 console.log(); 자동완성 시켜주는데
• 가끔 자동완성 우선순위가 첫번째가 아닌경우가 있다
• 그래서 그냥 별명을 붙여 쓰는게 맘편한 것 같다

clg (코드 스니펫)

• 오후 3:01 2021-04-28 추가
• https://chinsun9.github.io/2020/11/18/vscode-console-log-빨리치기/
• vscode 스니펫 익스텐션을 깔면 clg로 쉽게 자동완성 시 킬 수 있다

1
2
3
4

// 프로미스 병렬처리 ; all
await Promise.all([delay2(1000), delay2(2000)]).then((result) => {
  console.log(result.join(' + '));
});

• 처음에는 익숙해지기 어렵지만, 꿀인 비동기

promise

• js에는 promise라는게 있다
• 비동기 흐름에서 중요하다
• 프로미스는 선언과 동시에 실행이된다
• 프로미스 결과를 처리하려면 then을 통해 받아 볼 수 있다

async await

1
2
3
4
5
6
7
8

async function delay2(ms) {
  await new Promise((resolve) => {
    setTimeout(() => {
      resolve(ms);
    }, ms);
  });
  return ms;
}

• await 키워드는 async 함수 내에서만 사용가능하다
• await 를 통해서 promise가 Fulfilled상태가 되야지만 다음줄의 코드가 실행된다

병렬처리

Promise.race

1
2
3

await Promise.race([delay2(1000), delay2(2000)]).then((result) => {
  console.log(result);
});

• 1초뒤에 1000만 반환하는 코드이다

Promise.all

1
2
3

await Promise.all([delay2(1000), delay2(2000)]).then((result) => {
  console.log(result.join(' + '));
});

• 2초뒤에 1000 + 2000을 반환하는 코드이다

요상한 문법

1
2
3

(async () => {
  console.log(await delay2(1000));
})();