본문 바로가기

코딩 - TIL40

[TIL]가상 DOM과 비교 알고리즘 DOM DOM(Document Object Model)은 JavaScript와 같은 스크립팅 언어가 등의 태그에 접근, 조작 할 수 있도록 브라우저가 태그들을 트리구조로 만든 객체화 모델이다. 트리구조는 저장된 데이터를 효과적으로 탐색할 수 있어 변경, 업데이트 또한 빠르게 할 수 있다. 그러나 DOM이 업데이트 되는 과정에서 DOM트리를 잦은 빈도로 재구축할 경우 비효율적인 재연산, 리플로우, 리페인팅으로 인해 진행속도가 느려지고 최악의 경우 프레임 드랍이 발생할 수 있다. 이런 경우를 방지하고자 바뀐 부분만 재렌더링 하기 위해 만든 것이 바로 가상 DOM이다. Virtual DOM(가상 DOM) React내의 모든 DOM에는 이에 대응하는 가상 DOM이 있다. 이는 실제 DOM에 비해 상대적으로 매우.. 2022. 9. 28.
[TIL]번들링과 웹팩 1.번들링(Bundling) 번들이란 묶음을 뜻한다. 번들링은 말 그대로 특정 기준에 따라 대상을 분류하는 것으로 생각하면 쉽다. 프론트엔드에서 말하는 번들이란 사용자에게 웹 애플리케이션을 제공하기 위한 파일묶음을 뜻한다. 번들링은 코드, 프로그램을 묶어 패키지로 제공하는 행위라고 생각하면 된다. 번들링이 되지 않은 상태에세 HTML, CSS, JS를 전송하는 것이 불가능 한 것은 아니다. 그러나 다음과 같은 문제가 생길 수 있다. - 2개의 .js파일에서 같은 변수를 사용해 충돌이 일어날 수 있다. - 배포코드가 쉬워 사용자가 코드를 임의로 조작 할 수 있다. - 번들 파일 사이즈를 줄이려 파일의 공백을 모두 지웠는데 가독성이 떨어져 공백을 되돌려 코딩해야 할 수 있다. 소프트웨어를 아무리 잘 만들어도.. 2022. 9. 26.
[TIL] section4 - stack & queue 거의 2주만의 TIL....section3의 어느 순간부터 정신을 잃은 것 같은 기분이다. 수업 내용이나 과제도 제대로 이해 못하고 넘어간 유닛이 몇개는 되는 것 같다. 좀 딥하게 우울하기도 했는데 다시 정신 차리고 section4에 들어왔다. 재귀나 고차함수 때 처럼 이론보다 코플릿이 더 어렵지만 오늘은 그래도 할 만 했다. 기본적인 stack과 queue의 개념을 정리해보려한다. 데이터는 분석하고 정리하고 활용할 때 의미를 갖는다. 필요에 따라 사용할 수 있도록 데이터를 체계적으로 정리하고 저장하는 것이 데이터 활용을 위한 기본이라고 할 수 있다. 자료구조는 이런 경우들을 카테고리 별로 잘 분류해 놓은 것이며 이중 선형 구조에 해당하는 stack과 queue를 배워보았다. 1. Stack 데이터를 순.. 2022. 9. 20.
[TIL] 웹표준/웹 접근성 section3... 어느샌가 정신을 놓고 있는 나를 발견했다...하기 싫다는 생각으로 저녁시간을 보내게 되지만, 하지않는다고 해서 해결 되는 것은 없다. Grit이란 책을 시작했는데 재능있는 사람들, 높은 수준의 기술을 달성한 사람들 역시 여러번의 작은 성취로 그만큼의 영역에 도달했다는 내용이 반복적으로 나온다. 매일 비슷하게 헤메고 있기에 이 어중간한 시기가 언젠가는 끝날 거란 생각도 못하게 된 것 같은데, 기억하자. 끝은 있다. 늦더라도 해내야 내 것이 된다. 늦어도 된다. 물이 끓기 전 99도 까지는 표시가 나지 않는다. 마지막 1도가 오늘일수도 있다. 오늘의 내용은 많은 편이지만 이 중 웹표준이 가장 중요하다. 1. 웹 표준 1)웹이란? 웹 : 문서, 이미지, 영상 등 다양한 정보를 공유할 수 .. 2022. 9. 7.

티스토리툴바