[기록결산] 내 것으로 만들기

[기록결산] 내 것으로 만들기

기록은 중요하다. 하지만, 기록을 잘 정리했는지 혹은 기록으로 인한 지식이 내 것이 되었는지는 더 중요하다. 인간은 망각의 동물로 그 때 당시엔 이해됐던 것들이 지금은 전혀 기억나지 않는 경우도 종종 발생한다. 아래 글은 불가 7개월 전에 작성한 글에서 태도에 대한 부분말고는 기억이 잘 나지 않아 몹시 당황스럽다. (월별기록결산은 실패 ^^)

[기록결산] 애쓴 것은 언젠가 정산된다.

그래서 내 것으로 만든 것들을 잘 정리해보았다. 

 

1. pnpm은 performant npm의 약자로, private npm과 다르다.
2. pnpm은 패키지를 글로벌 저장소에 저장하고, 심볼릭 링크를 사용하여 프로젝트에서 참조하는 방식으로 패키지를 공유한다. 덕분에 디스크 공간도 절약하고 중복된 의존성 설치를 방지할 수 있다.
3. AWS Code Artifact로, npm이 아닌 곳에 private하게 배포할 수 있다.
4. AWS Code Artifact는 서울 리전이 없어 도쿄 리전을 사용 중이다.
5. 모노레포 내 다른 package를 수정한다면, 꼭 빌드를 하자.
6. devDependencies는 빌드될 때 필요로 하며, 실제로 코드 상에 필요한 의존성은 dependencies에 넣는다.
7. entry.ts 파일에는 가급적 export 할 함수 혹은 컴포넌트만 명시하도록 한다.
8. git commit —amend 명령어로 이미 커밋된 마지막 커밋을 수정할 수 있다. (master에서는 지양)
9. git cherry-pick <HASH>으로 필요한 commit만 골라서 가져올 수 있다.
10. chrome을 기준으로 memory cache는 클라이언트의 RAM, disk cache는 클라이언트의 disk(ssd, hdd)에 저장된다.
11. 모노레포에서는 서비스마다 버전이 상이할 수 있기에 이를 알 수 있도록 빌드 시 VERSION을 명시한다.
12. useLayoutEffect와 useEffect의 렌더링 시점이 다르기에 이 점을 활용하여 사용할 수 있다.
13. useLayoutEffect는 DOM을 변경하거나 측정을 수행해야 할 경우 사용하고,
14. useEffect는 DOM과 전혀 상호 작용할 필요가 없거나 DOM 변경 사항이 관찰되지 않을 경우 사용한다.
15. 일부 정보를 ‘기억’하고 싶지만, 해당 정보가 렌더링을 유발하지 않도록 하려면 useRef를 사용한다.
16. useState의 상태값을 useRef에 저장하는 형태를 지양해야한다지만(?), 현재 이렇게 사용 중인 부분이 있다.
17. memo는 컴포넌트를 메모이제이션한다. 부모 컴포넌트가 리렌더링 되어도 전달받은 props 값이 변경되지 않는다면 리렌더링하지 않는다.
18. Pick<T, K>의 역할은 타입 T에서 키가 유니온 K에 있는 속성 집합을 선택하여 타입을 구성한다.
19. Omit<T, K>의 역할은 타입 K에 있는 속성을 제외한 타입 T의 속성을 가진 타입을 구성한다.
20. NonNullable<T>의 역할은 T에서 null과 undefined를 제외한 타입을 구성한다.
21. ReturnType<Type>은 함수 Type의 반환 타입으로 구성된 타입을 생성한다. type T1 = ReturnType<(s: string) => void>; // void
22. Exclude<T, U>의 역할은 T가 U의 타입이라면, never (빈 타입)을, 그렇지 않다면 T 자체를 구성한다. type Exclude<T, U> = T extends U ? never : T
23. + 더하기 연산자는 숫자가 아닌 값을 숫자로 변환하려고 시도한다. console.log(+(’5’))의 결과는 5이다.
24. HTML Drag & Drop API는 생각보다 별로다. html 태그에 draggable 속성을 true로 주면 사용가능하다.
25. 기본 drag drop 기능은 라이브러리를 사용하지 않고, document의 mousedown, mousemove 이용했다.
26. JS에서 this 키워드는 실행 컨텍스트에 따라 동적으로 결정된다. 이벤트 핸들러가 호출될 때, this는 일반적으로 이벤트를 트리거한 DOM 요소를 가리키게 된다.
27. 클래스 내에서 특정 메소드가 이벤트 핸들러로 사용된다면, 메소드 내에서 this가 클래스의 인스턴스를 가리키도록 생성자에서 메소드를 bind를 해준다.
28. JS에서는 클래스가 단일 상속만 지원하기에 다중 상속과 유사한 mixin 패턴 구현할 수 있다.
29. 객체들이 가지고 있는 공통된 로직을 mixin 패턴으로 적용하였다. - 숨김 및 잠금 처리 관련 로직
30. 배열에서 조건이 모두 맞는지 체크하려면 every(), 일부만 맞는지 체크하려면 some()을 쓰면 된다.
31. setInterval(()⇒ console.log(document.activeElement), 1000); 를 이용하여 현재 선택된 element를 확인함으로써 element에 따른 작동을 확인하기 위한 디버깅에 유용하다. (약간의 딜레이 존재)
32. 중복되는 type 체크는 함수로 빼두자. / 배열인 경우 if문보다는 filter를 사용. objs.filter(isLocked)
33. json-diff-ts 라이브러리는 json에서 변경점만 기록해주는 라이브러리이다.
34. flat(depth)는 배열 내부의 하위 배열을 쉽게 합칠 수 있는 메서드로, depth에 따라 평탄화할지 결정할 수 있다. 반환값 → 하위 배열 요소가 연결된 새 배열 arr = [1, [2, 3]] -> arr.flat() = [1, 2, 3]
35. slice(start, end) 는 배열의 index start부터 index end - 1까지 새로운 배열 객체를 반환한다. 원본을 건들이지 않는다.
36. 사용자의 설정에 의해 localStorage나 sessionStorage를 사용 불가능하다면 메모리에 저장할 수 있게끔 클래스를 구성하면 된다.
37. CanvasRenderingContext2D : drawImage(image, dx, dy) 는 이미지의 원본 크기를 유지하면서 (dx, dy) 좌표에 이미지를 그린다.
38. CanvasRenderingContext2D : drawImage(image, dx, dy, dWidth, dHeight) 는 이미지의 크기를 (dWidth, dHeight)로 조정하여 (dx, dy) 좌표에 이미지를 그린다. 여기서 (dx, dy)는 현재 이미지의 중심을 기준으로 구한 좌표를 설정한다.
39. fabric.js 공식 홈페이지에서 Fabric.js를 강력하고 간편한 HTML5 캔버스 라이브러리 라고 소개하고 있다…
40. fabric.js는 요소를 하나의 객체로 관리할 수 있으며, 요소를 조작(이동, 회전 등) 및 이벤트 기능을 제공한다.
41. fabric.js의 기본 함수로 구현이 안 된다면 함수를 오버라이드하여 입맛에 맞게 수정해야한다.
42. canvas에서의 eventName과 object에서의 eventName이 구별되어 사용된다.
43. ‘배경이 있는 텍스트’ → fabric.Rect 클래스와 fabric.Textbox 클래스를 fabric.Group으로 묶었다.
44. 라이브러리 내 _ 가 붙어있는 속성은 보통 private으로 간주되기 때문에 라이브러리 업데이트 시 예고없이 제거되거나 기능이 변경될 가능성이 있어 public 인터페이스를 사용하는 것이 좋다.
45. canvas 내 좌표인지, 객체 내의 좌표인지에 대한 판단이 중요하다.
46. 순환 참조가 발생했을 때, 디버깅이 어렵기 때문에 이를 방지해야한다.
47. 순환 참조가 발생하지 않도록, vite 플러그인 vite-plugin-circular-dependency 를 사용하고 있다.
48. fabric event 속성 中 [absoultePointer : canavs 내 좌표 / pointer: 브라우저 내 좌표 / e: 발생 이벤트 ..]
49. runOutsideHistory(callback()) : callback 함수가 호출되는 동안 조작된 데이터를 undo/redo history에 기록하지 않도록 하는 함수 / callback() 내부 구현: 기록될 필요없는 데이터를 조작하는 과정
50. 콜백 함수가 실행되는 동안 특정 상태를 일시적으로 변경하고, 콜백함수가 실행된 후 원래 상태로 되돌리는 함수이다. 보통 백엔드에서 transaction 처리 시 이런 형태의 함수를 사용한다.

 

gpt에게 물어보면 바로 알 수 있는 것들이지만 내 것으로 만드는데에는 어느 정도의 암기가 필요하다.

카테고리 별로 여러 지식들이 쌓이고 있어 재미지다..

기본적인 지식이 바탕이 되어야 그에 맞는 쓰임을 발휘할 수 있다. 사실 내가 가장 관심 있는건 바로 문제 해결 능력을 어떻게 늘릴 수 있는지이다. 디버깅을 어떻게 해야하는지 혹은 이 문제에선 어떤 구조를 짜야하는지 등등 .. 더 넓은 사고를 할 수 있게 공부함과 동시에 문제 해결 방식을 더 사고해봐야겠다. (해당 글을 읽어보지 않았다면 추천한다.)

개발자의 평생 공부 : [임백준 칼럼] 실력은 고통의 총합이다.