강의 내용들..
DOM
오늘은 DOM에 관해 배웠습니다.
현재 데브코스를 진행하며 팀원분들과 모딥다 스터디를 진행하고 있습니다.
덕분에 복습하기 좋은 시간이었습니다.
정리한 내용은 깃허브 레파지토리에서 확인하실 수 있습니다.
추가
돔 조작은 리플로우, 리페인팅이 발생하게되어 많은 비용이 발생하게 됩니다.
따라서 loop를 돌며 많은 요소들을 생성하고 돔에 연결/삭제하면, 그만큼 엄청 많은 비용이 발생합니다.
이를 방지하기위해 div와 같은 컨테이너 안에 생성할 요소들을 담아, 컨테이너를 한 번만 DOM에 연결한다면 조금 더 비용을 아낄 수 있겠습니다.
하지만 그렇게되면 div 태그 안에 생성한 요소들이 담기게되어, 우리가 원하는 형태의 DOM 트리가 구현되지 않을 것 입니다.
이때 DocumentFragment를 사용하면 좋을 것 같습니다.
DocumentFragment 는 실제 DOM 트리와 분리되어 메모리에서 작업을 수행하기 때문에 실제 페이지 렌더링에 영향을 주지 않습니다.
때문에 div와 비슷한 방식으로 생성할 요소들을 조각(Frgament)안에 담은 후 요소들을 원하는 노드에 연결시켜주지만, 조각 자체는 트리에 남아있지 않습니다.
덕분에 우리가 원하는 DOM 트리가 구현될 수 있습니다.
이는 가상 돔을 쓰지 않고 최적화하기 좋습니다.
가상 돔
리액트에서도 사용되는 가상 DOM 입니다.
가상 DOM은 메모리 내의 DOM 트리를 표현하는 프로그래밍 개념입니다. 실제 DOM 대신 메모리에서 빠르게 변경하고 최종적으로 실제 DOM에 결과를 반영하는 방식으로 작동합니다.
그런데, 과연 가상 돔은 돔보다 속도가 빠를까요?
'크게 차이가 나는 것은 아니며, 개발 편의성과 대부분의 상황에서 충분히 빠르기 때문에 사용하는 것'
이라고 합니다.
추가적인 내용은 리액트를 공부할때 익히는 것이 좋은 것 같아, 큰 개념만 알아보고 넘어가겠습니다.
추가적인 내용
즉시 실행 함수 (IIFE)
수업에서 강사님께서 즉시 실행 함수를 사용하셔서, 이에 대해 간단히 알아보고자 합니다.
// 즉시 실행 함수
(function() {
// 함수 내부의 코드
})();- 전체 함수를 괄호 ()로 감싸고 있습니다. 이 괄호는 함수를 표현식으로 취급하게 만듭니다.
- 마지막에 있는 ()는 함수를 호출합니다. 따라서, 이 구조의 함수는 정의되자마자 바로 실행됩니다.
즉시 실행 함수는 정의되자마자 바로 실행되는 JavaScript 함수입니다.
즉시 호출하여 실행 한다는게 함수의 정의와 호출이 동시에 이루어진다는 것입니다.
IIFE의 주요 목적은 변수와 함수를 전역 스코프로부터 격리하여 '프라이빗'하게 만드는 것 입니다.
이로써 다른 코드와의 충돌 없이 코드를 모듈화하거나 라이브러리를 작성하는 데 유용하게 사용됩니다.
- 외부 스코프에서 IIFE에 접근할 수 없습니다.
덕분에 global namespace를 오염시키지 않고 코드를 작성할 수 있습니다. - 하지만 인자는 받을 수 있습니다.
전역 변수를 IIFE에 받아와서 사용할 수 있습니다.
좋아보이는 IIFE지만, ES6의 모듈 시스템이 도입되면서 IIFE의 사용 빈도가 줄어들었습니다.
ES6 모듈은 기본적으로 격리된 스코프를 제공하기 때문에, 몇몇 상황에서는 IIFE 대신 모듈을 사용하는 것이 더 나을 수 있습니다.
깃 & 깃허브 브랜치 관련
스터디를 위해 깃허브에 모딥다 레파지토리를 생성했었습니다.
거기에 개인 브랜치를 파서, 해당 브랜치에 각자 공부한 내용을 작성합니다.
이후 작성한 내용을 메인에 머지 요청을 위해 풀 리퀘스트를 날립니다.
여기까지는 지난 과제를 통해 경험해보았습니다만, 본인 브랜치를 메인 브랜치 데이터로 갱신하는 방법을 몰랐습니다.
깃허브 데스크탑 앱에서 Fetch 버튼만 하염없이 눌렀던... ;ㅅ;
해서 해결 방법을 기록하고자 합니다.
-
VSC - 소스제어 - etc 버튼 클릭
-
풀, 푸시 - 가져올 위치... 클릭
-
갱신하고자 하는 브랜치를 선택합니다. (저는 메인 브랜치로 갱신하고 싶어, origin/main을 선택했습니다.)
짜잔- VSC에 개인 브랜치 파일들은 사라지고, 메인 브랜치 파일들로 바뀌었습니다~
그런데, 잘못눌러서 기존에 작업하던 파일들이 다 날아갈 수 있다고 생각하니, 조금 무섭긴 하네요...
후기
깃 & 깃허브.. 아직 많이 사용해보지 않아서 낯선 존재입니다.
아시는 분이 팀플 잘못하다가 코드 싹 다 날리셨다고 하셔서.. 더욱 무서운 존재기도 합니다.
얼릉 친해지고싶다요..!
