기술 아티클 읽고 메모📚_8월

8월

 

4일

 자바스크립트에 private이 있다고 착각했었는데, OOP 공부하다 자바의 클래스 코드들에서 private을 본 거랑 헷갈린 것 같다. 자바스크립트의 static이랑도 헷갈린 듯.. 그래서 찾아보다보니 몰랐던 private, protected에 대해 알게되었다!

 객체 지향 프로그래밍에서 두 그룹으로 분류가 되는데, internal interface는 동일 클래스 내에서 접근 가능, 밖에선 접근 불가. external interface는 클래스 밖에서도 접근 가능한 프로퍼티와 메서드!

 

- protected 필드: private과 비슷하지만, 자손 클래스에서도 접근이 가능하다는 점이 다르다. 내부 인터페이스를 만들 때 유용. 자손 클래스의 필드에 접근해야 하는 경우가 많아 private 필드보다 광범위하게 사용된다. _로 시작하는 것이 관습

+ 카일의 코드에서 _observers에 왜 언더바를 붙이나 궁금했었는데 protected 프로퍼티 명 앞엔 밑줄_이 붙는 게 관습이라고 한다. 이 글을 보고 알았다. 외부 접근이 불가능한 프로퍼티나 메서드를 나타날 때 앞에 밑줄을 붙이기! 

- private 필드: 프로퍼티와 메서드가 #으로 시작. #이 붙으면 클래스 안에서만 접근 가능하다. #은 자바스크립트에서 지원하는 문법으로, private 필드를 의미한다. 클래스 외부나 자손 클래스에서 접근할 수 없다. (private필드는 public 필드와 상충X, 다른 것으로 간주)

 

아직 익숙하지 않지만 필요한 적절한 때에 꼭 사용해보고 싶다! MDN에서 찾아보니까 static이랑 같이 쓰는 예제가 많이 있다. publicStatic, privateStatic으로 나뉘는 것 같은데 예제가 잘 나와있다. 잘 이해한 건진 모르겠지만 static + private 기능을 합친 느낌이다. 인스턴스가 아닌 클래스로만 접근 가능하면서 직접 접근이 안 되는 것이 privateStatic인듯.

private, protected 프로퍼티와 메서드
MDN - Private class fields

 

5일

동시성이란, 여러 작업을 처리할 수 있도록 작업들을 작은 조각들로 나누는 방법. 즉, 렌더링 과정을 더 작은 작업들로 나누고, 스케줄러를 통해 각 작업들에 중요도에 따른 우선 순위를 부여한다.

→ 메인 스레드를 블록X

→ 동시에 여러 작업들을 처리하고, 우선 순위에 따라 각 작업들 간에 전환 가능

→ 최종 결과로 확정하지 않고도 부분적으로 트리를 렌더링

(해당 글의 그리드 예시에서) 사용자 경험 개선을 위해서는 사용자 입력에 우선 순위를 부여하고, 그리드 렌더링은 후순위로 고려해야 한다. 렌더링 과정이 더 이상 스레드를 블록하지 않으므로, 사용자가 키를 누르는 등의 좀 더 높은 중요도를 가지는 작업이 실행되었을 때 렌더링이 나중으로 미뤄질 수 있다! 

 

useDeferredValue: "이 상태에 의존하는 컴포넌트라면 좀 나중에 렌더링해도 괜찮아" 주어진 시간 전에 준비가 끝나면 DOM에 적용

Suspense: 플레이스 홀더를 표시할 간단한 문법 제공

SuspenseList: 여러 Suspense 컴포넌트들을 감쌀 수 있는 컴포넌트. 자식들의 표시 순서 제어

useTransition: DOM에 변동 사항을 적용하기 전에 데이터가 모두 준비될 때까지 기다림.

What is React Concurrent Mode?
What is React Concurrent Mode? 번역 - velog

 

8일

순환 참조(Circular Dependancy) 문제에 대해 아직 겪어보지 않아 몰랐었다. 찾아보니 겪게 되면 꽤나 오래 고생할 수 있는 문제인 듯 하다..무섭😰  순환 참조가 존재하는 경우에는 모듈의 평가(코드를 처음부터 끝까지 읽는 것) 순서가 중요하다. 순환 참조 문제는 모듈의 평가 순서를 정해주면 대부분 해결된다. Michel Weststrate의 방법으로는 모듈의 평가 순서를 정의하는 파일을 따로 만드는 것. 규모가 큰 프로젝트에서는 어려운 일.. common 등의 이름을 가진 폴더로 공통 모듈을 모아 모듈의 평가 순서를 정해주면 순환 참조 문제의 상당 부분을 해결할 수 있다고 한다. 웹팩에 circular-dependecy-plugin로 미리 발견해 예방할 수도 있다.

 지금까지 별 생각없이 import를 사용했었는데 앞으로는 모듈의 평가 순서를 생각하면서 짜야겠다.

JS 모듈 시스템과 순환 참조 문제
순환 참조
[번역] 자바스크립트 & 타입스크립트의 순환 참조를 한 방에 해결하는 방법