[독서 일기] 2023-04-28 (금)
p.71~83 프레임워크 없이 만드는 렌더링 엔진. 레지스트리 작성 방법과 가상 DOM 알고리즘. 변경이 발생하게 만드는 것이 이벤트. YAGNI 원칙. 실제로 필요할 때 구현하라. DOM 이벤트 API on + event, addEventListener 캡처 단계, 목표 단계, 버블 단계.
p.71~83 프레임워크 없이 만드는 렌더링 엔진. 레지스트리 작성 방법과 가상 DOM 알고리즘. 변경이 발생하게 만드는 것이 이벤트. YAGNI 원칙. 실제로 필요할 때 구현하라. DOM 이벤트 API on + event, addEventListener 캡처 단계, 목표 단계, 버블 단계.
# 오랜만에 책 쇼핑 회사 법인카드를 4월에는 제대로 안써서 돈이 조금 남아서 책 쇼핑을 왕창 했다. '아샬이 추천하는 책 목록' 영상을 보고 장바구니에 마구 담았다. - 어떻게 공부할 것인가 - 실용주의 사고와 학습 - 어떻게 문제를 풀 것인가? - 프로그래머, 열정을 말하다 - 프로그래머의 길, 멘토에게 묻다 - 소프트웨어 장인 - 이 책도 읽지 마세요 최근에는 매일 책을 읽는 시간이 조금 줄었는데, 다시 열심히 달려야겠다. 😎
~p.71 프레임워크는 코드를 호출한다. 코드는 라이브러리를 호출한다. Angular와 Moment.js로 설명한다. 커뮤니티의 표준도 프레임워크의 제약으로 간주한다. 리액트의 제약 사항은 선언적 패러다임의 사용. 기술적으로 보면 리액트는 렌더링 라이브러리다. 내 문제를 해결하는 데 있어 다른 사람의 코드가 최적일 수 없다는 관점. 렌더링은 웹 애플리케이션에서 가장 중요한 기능. 순수 함수로 요소를 렌더링 하는 것. view = f(state) 돔 조작이나 애니메이션은 requestAnimationFrame 내부에서 하는 것 권장. 가상 DOM의 개념은 선언적 렌더링 엔진의 성능을 개선시키는 방법, reconciliation, diff 알고리즘.
# 개선점 찾기 서버단에서 캐싱해서 사용하고 있던 데이터가 있었는데 캐시 무효화가 언제는 됐다가 언제는 안됐다가 하는 경우가 발생했다. 그래서 데이터가 잘못 전달이 되었고 문제가 조금 있었다. 디버깅을 해봤는데 우선은 코드 레벨에서도 문제가 있었다. 당연하다는 듯이 사용하고 있었는데 동작은 하지만, 의도와 다르게 동작하고 있었다. 곰곰이 생각하다가 아키텍처 측면에서도 굳이 이렇게 해야하나? 라는 게 있어서 다른 방식을 제안을 했고 좋은 것 같다고 하여 POC를 하기로 했다. 스스로 계속 배우면서 발전시켜 나가고 싶다. 딱 퇴근할 때 저녁에 장애가 나서 한 달에 책 한 권 읽기 모임에 참여를 못했다 😭
# 다양한 업무속에서 연결되는 지식들 작은 스타트업에서 근무하다 보니 다양한 업무를 하게 된다. 개발자이고, 프론트엔드 개발자로 회사에 취업을 한 것이지만, 필요할때는 다른 업무도 진행할 수 있어야 하고 이것이 돈을 받고 일을 할 때의 프로 정신이라고 생각한다. 다양한 것들을 하다 보니 이전에 그냥 그런가보다~ 하고 넘겼던 부분들이 왜 그렇게 됐었는지 이해가 되는 부분들이 있었다. 물론 하나를 깊게 파는것도 중요하지만, 적당히 넓고 얕게 아는 것도 하나를 깊게 파기 위해 좋은 지식이 되는 것 같다.
p.72~83 클로저로 모듈 만들기. 연속 호출, 메소드에서 this를 반환한다. 커링, 함수와 인수를 결합하여 새로운 함수를 만든다. 메모이제이션. 불필요한 작업을 피하기 위해 연산 결과를 저장해놓고 사용한다. 프로토타입으로 상속.
# 깊이 공부한다는 것 개념을 제대로, 깊이 공부한다는 것은 매우 중요하다. 우연히 어떤 블로그에 들어가서 프론트엔드 개발자분께서 공부하셨던 내용을 봤는데 자바스크립트는 더욱 깊은 이해를 위해 ECMA262 명세를 보고, 리액트는 공식 문서를 다 봐서 리액트 코드를 까보면서 공부한다는 내용이었다. 물론 어느 정도는 불필요할 수도 있지만, 깊게 공부를 한다는 것은 이렇게 까지 시작되는 근원지를 찾아가야 한다는 것에 많은 자극을 받았다. 제대로의 기준을 다시 세워보게 됐다.
p.62~72 재귀 호출. 하위 문제를 처리하기 위해 자신을 호출 (피보나치, 돔, 하노이의 탑) TCO(Tail Call Optimization). safari만 지원한다. Scope. 변수와 매개변수 접근성. 생존 기간. Closure. 내부 함수에서 외부 함수의 매개변수와 변수 접근. callback, 비동기 처리.