오늘 한 것
스터디 순서 정하기
1.Styletron, Base (atomic css, overrides 문법)
2.React-query
3.Ts generic type
4.Loadash, React-use ( 사이드 프로젝트는 직점 커스텀 훅 같은걸로 구현해 보기, use-list 많이 사용)
5.Recoil
내일 할 것
1, 2 공부 병행 도큐먼트 이해될때까지 읽기, 실제 코드 간단 쳐보기
2. 아키텍쳐 내용 다시 읽어보고 모르는 내용 및 어휘 리스트업 / 내용 채워 가기
3. 클래스형 컴포넌트 함수형 컴포넌트 내용 정리
4. React 18 훑어보기
알게된 것
모노레포 / 멀티레포
멀티레포 단점
멀티레포 장점
깃 액션 수 만큼 다른 레포들에도 다 클론을 해야한다
모노레포 단점
모노레포 장점
Webpack module federation 가장 고도화된 모노레포 전략
어플리케이션 레벨에서는 레포끼리 참조 금지. 따로 빼서 참조시켜야 한다.
Static Site Generation
자바스크립트가 불러오기 전에 미리 렌더를 시작한다
구조표현 전에 미리 랜더링 쳐버림
Round trip
데이터 요청 및 반환하는 경로
-> CSR이 가장 비싸다
SSR이 무조건 빠름. 스트링으로 스탕리까지 한번에 말아서 전달하기 때문에
css 참조 필요 없이 바로 렌더해서 빠름
- 쓰로틀링(Throttling)과 디바운싱(Debouncing) - 알고보면 많은 이벤트 처리에 사용된다! UI 처리하는 부분은 입력의 오버클럭을 감당하기 위해 필수적이다. 많은 라이브러리, 프레임워크에 내장됨
쓰로틀링 - 쓰로틀링(Throttling) 을 이용하면 발생되는 이벤트 중간에 Delay 를 포함시킨다.
즉, Delay 이내로 연속적으로 발생된 이벤트에 대해서는 무시한다.
연속적으로 발생하는 이벤트에 대해 일정 시간을 묶어 그 시간이 지나기 전까지는 무시하는 방식
필터링방법 사용
디바운싱 - 디바운싱(Debouncing) 역시 쓰로틀링과 비슷하게 소프트웨어적인 오버클럭을 조절하는 테크닉
그루핑 방법 사용
이벤트 핸들러가 주기적으로 여러개의 발생한 이벤트를 하나로 묶어 처리하는 방식
먼저 발생한 이벤트가 처리를 대기하며, 대기 도중 새 이벤트 발생하면 이전 이벤트의 대기를 취소하고 해당 이벤트를 기준으로 다시처리를 대기한다.
일정 시간동안 연속적으로 발생한 이벤트는 마지막으로 발생한 이벤트를 기준으로 처리된다
Leading Edge 디바운싱 테크닉
앞의 이벤트를 기준으로 처리를 변경 가능하며 쓰로틀링과 유사하게 동작한다.
나중에 발생하는 이벤트를 무시하는 방식은 같지만 첫 이벤트 처리가 딜레이된다.
ISR(스로틀링 사용)
ISR, on-demand ISR 적극적 확용
개인정보 노출되면 안되는 것에서는 SSR
초기렌더속도를 최대한 끌어올리는 것이 중요하다
staledata
클라이언트 렌더링 경우에는 처음에 의미없는 html을 가져오기 때문에 그려줄게 없이 빈 화면 보냄
그 뒤로 js가 실행되면서 화면을 채워나감
싱글스레드 멀티스레드의 장단점 알기?
워커스레드?
워커스레드는 싱글스레드와 똑같이 스레드역할을 할 수 있다.
예를들어 몇백번 돌아야하는 작업이 싱글스레드가 워커스레드한테 작업을 넘겨주고, 워커스레드는 해당 작업을 마무리하고 콜백으로 메인스레드에게 알려준다. 그동안 메인스레드는 다른걸 처리한다.
웹 워커 (웹 싱글스레드 구원자 느낌)와 서비스 워커 (= 특정 목적으로 만들어진 pwa근간이되는)?
svg는 한 뷰포트 안에 많아질수록 복잡하게 생길 수록 무조건 느려진다. 리플로우할 때 점을 많이 찍는다.
스크롤링 컨테이너에서는 스프라이트로 처리한다 -> svg로 할 경우에 리플로우가 많이 일어나서 느려짐
cdn이 빠른이유?
Offline cache
네이티브가 빠른 이유는,
APK 대용량 파일을 받아서 미리 그릴 수가 있다. 통신 없이 그릴 수 있는 것이 많음
PWA에서 네이티브의 기능들을 제공하려고 함
예: Offline cache 페이지마다 js를 가지고 있다.
-> 참고 페이지: web.trost.co.kr
서비스워커?
React query?
웹은 다른 페이지 넘길 때에 다른 컴포넌트들이 마운트, 이전 것이 언마운트 되는 방식이지만 네이티브는 언마운트되지 않은채 위에 쌓이는 방식.
그래서 다시 마운트해야 보여지는 데이터같은 경우 안보일 수 있음
트리거를 사용해 마운트 언마운트를 실행할 수 있게한다.
Sonarling, deep source
Cypress 장점?
에어비엔비 스타일 가이드 읽어 보기 - 코드컨벤션
Error boundary
컴포넌트단위로 에러있는것들만 새로고침할 수 있게하여 에러 저항을 가진 컴토넌트로 만든다.
CLS
Preload
폰트, 이미지 최적화만 해도 성능개선을 많이 할 수 있다.
next.js -> Image font 태그는 많은 이점 제공 읽어보기
webp
Avif?
Can I use에서 사용할만한지 검색해보기
인터섹터 옵적버
서비스워커는 윈도우나 돔에대한 접근권한이 없음
로컬스토리지는 윈도우에 붙어있음
로컬스토리지 동기적으로 가져와 반환해서 느림
서비스워커는 비동기적으로 작용해서 로컬스토리지 이용 못해
indexedDB 를 사용한다
Cache storage
Stale while revalidate
pre-path
브라우저가 자체적으로 활용하는 http 캐싱 프로토콜단에서
오프라인 캐싱 - 서비스워커
Api 캐싱
Reactquery 사용하고 swr은 사용하지 않음
React 18 훑어보기
Hydration?
Html 에 js 이벤트 리스너 같은 것을 연결? 리액트처럼 동작하게?
-> component들이 json 형태로 내려와서 .. 알고리즘이 아예 바뀜
리액트라우터
가비지콜렉션?
웹훅?
-> 추후 다시 정리..
출처
쓰로틀링디바운싱개념
하루를 마치며..
새로 온 회사에는 멋진 시니어 분들이 많다. 빠른 대처능력과 많은 지식, 그리고 자신감과 여유를 겸비한 모습은 부럽고 또 닮고 싶다.
그동안 한 분야에서 프로로 인정받는 사람들을 보며
나도 언젠가 연차가 쌓이면 그렇게 되겠지라 막연히 생각한것 같다.
하지만 들어보면 정말 피땀 노력으로 견고히 만들어 온 결과더라.
스스로 열심히 한다 생각했는데, 사실은 요행을 바라는 순간들이 많았던 것 같다.
하루도 허투로 쓰지 않고 차곡차곡 노력으로 쌓아 가야겠다.
