Melting Face Emoji

notes

1st world problemamplifyanalyticsapp routerapplearchitectureasdfawsbookoabooksbrowsercallback refchromechrome devtoolsclojurescriptcolorcookiecsscutedeprecatedecmascriptelixireslintfirefoxflexboxflowfontformikgitgit strategygithubgithub cligoalsgoogle fontsgraphitehistoryhtmlimage optimizationiOSjavascriptlearningm1macosmdxmediameditationmental healthmetamindmsnerd fontsnext.jsnodenode-sassnpmnvimnvmoopopengraphpanda cssphoenixpreactpwareactreasonredirectsrefrescriptresponsiveRSCsadsafariserver actionssharpshellssrswifttailwindterminaltermstips and trickstriviatypescriptunicodevercelversion managervimvscodeWAI-ARIAwindowsxcodeyarnyarn2

2020. 12. 11.
xcrun: error: active developer path ("/Applications/Xcode.app/Contents/Developer") does not exist

GHCi, version 8.4.3: http://www.haskell.org/ghc/  :? for help
xcrun: error: active developer path ("/Applications/Xcode.app/Contents/Developer") does not exist
Use `sudo xcode-select --switch path/to/Xcode.app` to specify the Xcode that you wish to use for command line developer tools, or use `xcode-select --install` to install the standalone command line developer tools.
See `man xcode-select` for more details.
`clang' failed in phase `gcc'. (Exit code: 1)
GHCi, version 8.4.3: http://www.haskell.org/ghc/  :? for help
xcrun: error: active developer path ("/Applications/Xcode.app/Contents/Developer") does not exist
Use `sudo xcode-select --switch path/to/Xcode.app` to specify the Xcode that you wish to use for command line developer tools, or use `xcode-select --install` to install the standalone command line developer tools.
See `man xcode-select` for more details.
`clang' failed in phase `gcc'. (Exit code: 1)

⏬

sudo xcode-select -switch /Library/Developer/CommandLineTools
sudo xcode-select -switch /Library/Developer/CommandLineTools
macos

2020. 11. 19.
Beware! Array methods will do shallow copies

const obj1 = { id: 1, name: "obj1" };
const obj2 = { id: 2, name: "obj2" };
const obj3 = { id: 3, name: "obj3" };

const arr = [obj1, obj2, obj3];

const mappedArr = arr.map((obj) => obj);
const filteredArr = arr.filter((obj) => obj.id !== 3);
const reducedArr = arr.reduce((acc, item) => {
  if (item.id === 3) {
    return acc;
  }
  return [...acc, item];
}, []);

const mappedAndSpreadedArr = arr.map((obj) => ({ ...obj }));
const reducedAndSpreadedArr = arr.reduce((acc, item) => {
  if (item.id === 3) {
    return acc;
  }
  return [...acc, { ...item }];
}, []);

console.log(obj1 === mappedArr[0]); // true
console.log(obj1 === mappedAndSpreadedArr[0]); // false

console.log(obj1 === filteredArr[0]); // true

console.log(obj1 === reducedArr[0]); // true
console.log(obj1 === reducedAndSpreadedArr[0]); // false

const findedObj1 = mappedArr.find((obj) => obj.id === 1);
findedObj1.name = "lol";
console.log(obj1.name); // 'lol'

const findedObj2 = mappedAndSpreadedArr.find((obj) => obj.id === 2);
findedObj2.name = "lol";
console.log(obj2.name); // 'obj2'

const obj1 = { id: 1, name: "obj1" };
const obj2 = { id: 2, name: "obj2" };
const obj3 = { id: 3, name: "obj3" };

const arr = [obj1, obj2, obj3];

const mappedArr = arr.map((obj) => obj);
const filteredArr = arr.filter((obj) => obj.id !== 3);
const reducedArr = arr.reduce((acc, item) => {
  if (item.id === 3) {
    return acc;
  }
  return [...acc, item];
}, []);

const mappedAndSpreadedArr = arr.map((obj) => ({ ...obj }));
const reducedAndSpreadedArr = arr.reduce((acc, item) => {
  if (item.id === 3) {
    return acc;
  }
  return [...acc, { ...item }];
}, []);

console.log(obj1 === mappedArr[0]); // true
console.log(obj1 === mappedAndSpreadedArr[0]); // false

console.log(obj1 === filteredArr[0]); // true

console.log(obj1 === reducedArr[0]); // true
console.log(obj1 === reducedAndSpreadedArr[0]); // false

const findedObj1 = mappedArr.find((obj) => obj.id === 1);
findedObj1.name = "lol";
console.log(obj1.name); // 'lol'

const findedObj2 = mappedAndSpreadedArr.find((obj) => obj.id === 2);
findedObj2.name = "lol";
console.log(obj2.name); // 'obj2'
javascript

2020. 11. 13.
`Component.displayName`

forwardRef로 wrap한 컴포넌트의 경우 devtool에서 컴포넌트명이 뜨지 않는다. 그럴땐:

Component.displayName = 'Component'
Component.displayName = 'Component'

로 일단 해결할 수 있다.

react

2020. 10. 23.
Promise.allSettled

모든 promise가 resolve/reject 되기를 기다렸다가 각 promise의 result를 반환한다.

Promise.all과 다른점

  1. promise 중 reject가 있어도 일단 모두 pending 상태를 벗어나길 기다렸다가 결과값을 반환한다.
  2. reject를 따로 하지 않고 반환값을 변경하므로 catch를 타지 않는다.
  3. 대신 반환 결과값이 보통의 promise와 다르다. Promise<T>가 아니고 PromiseSettledResult<T>를 반환.
  4. PromiseSettledResult는 아래와 같이 생겼다.
// fullfiled
{
  status: "fullfiled",
  value: T
}

// rejected
{
  status: "rejected",
  reason: any
}
// fullfiled
{
  status: "fullfiled",
  value: T
}

// rejected
{
  status: "rejected",
  reason: any
}

실제로 돌려보면 아래와 같다.

Screen Shot 2020-10-23 at 12 04 57 PM Playground

Ref

Promise.allSettled

typescriptjavascript
12345678910111213