오늘은 하루를 보내면서
궁금했던 부분과 새로 알게된 부분들을 정리하면서 마무리하려고 한다.
1. 왜 App과 main을 분리하는가?
- 컴포넌트를 불러올 root가 필요하기 때문이다.
- 컴포넌트를 선언하는 부분과 만들어서 실행하는 부분의 분리이다.
2. 무한 스크롤 UI 구현 2가지 방식
- 컨텐츠를 페이징 하는 기법 중 하나
- 아래로 스크롤하다 컨텐츠의 마지막 요소를 볼 즈음 다음 컨텐츠가 있으면 불러온다.
- Faceboo, Twitter, Instagram 등 SNS에서 주로 사용
- 사용자에게 중독을 일으켜서 요즘 이슈가 있다.
왜 사용?
브라우저마다 한번에 네트워킹을 할 수 있는 개수에 제한이 있을 수 있다.
그래서 이미지 아래 것이 먼저 불려오면 이미지가 밀릴 수 있다.
a. window의 scroll event 방식
스크롤링이 일어날 때마다 화면 전체의 height와 스크롤 위치를 통해 스크롤이 컨텐츠 끝 즈음에 다다랐는지 체크해서 처리하는 방식
단점 ) content 맨 아래 footer에 접근 하려고하면 접근하지 못한다.
✔ 마지막 데이터를 불러왔다는 것 check하기 위한 방법
- 컨텐츠 전체 개수를 불러오는 api가 있을 경우
현재 내가 불러온 데이터의 개수를 비교하는 방법이다. - api가 없는 경우
만약 5개씩 불러온다면, 다음 불러온 데이터가 5보다 작은 경우
더이상 불러올 데이터가 없다고 판단한다.
문제점 ) 마지막에 불러온 데이터가 5개라면 check하기 힘들다.
b. intersectionObserver
MDN 문서
장점 ) 매번 event를 하는 것이 아니므로 성능상에서도 이점이 있다.
단점 ) IE에서는 사용이 불가능하다.
3. @import 대신 < link >을 사용해야 하는 이유
참고문서
만약 < link > 내에서 @import를 사용할 경우 @import한 자원을 받는 동안 브라우저는 CSS를 처리할 수 없어 로딩 시간이 길어진다. 또한, 해당 CSS의 다운로드 순서로 인해 문제가 생겼을 경우 추적이 힘들다.
4. 코드에 세미콜론을 붙여야하는 이유
개행실수가 있다면 버그 유발 가능성이 높아진다.
5. 효율적인 렌더링에 대한 고민
이번 노션 클로닝 프로젝트를 하면서 아래와 같은 코드처럼
$form을 $target에 추가한 후 렌더링 하였다.
$target.appendChild($form)
this.rener()이 경우 $target에 $form이 append되고 다시 innerHTML을 통해 $form이 변경되서 비효율적으로 렌더링이 된다.
쉽게 말하면, 화면에 나타나버린 요소의 내용을 변경하고 조작하면 DOM을 조작하는 것은 비용이 매우 큰 일이기 때문에 한번에 여러가지 작업을 처리해주는 것이 좋다.
따라서 아래 코드처럼 append를 render이후에 해준다면 작업이 모두 처리된$form이 추가 되기 때문에 좀 더 효율적이게 렌더링 될 수 있다.
this.render();
$target.appendChild($form);CRP는 Critical Rendering Path라고 브라우저에서 렌더링 하는 주요 과정을 부르는 명칭이다. 왜 DOM조작 하는 부하가 클지에 대한 고민을 해보았다.
DocumentFragment:
를 언제 사용하는지를 보면 이 경우랑 조금 비슷하게 이해할 수 있다.
오늘 일기
동영멘토님과의 마지막 멘토링이었다 :)
그래서 이런저런 얘기를 하느라 2시간이 넘어버렸다 😀
저녁 먹고 오니까 11시이지만 기분이 좋다아아ㅏㅏ
오늘도 5시에 자게 생겼다 😊
아 요즘 수림님과 밤에 스몰톡 하면서 하루 일과를 나누고 짧게 스크럼을 하는데 하루를 마무리하는 기분이라 뿌듯하고 행복해진다 :) 햅삐~~
