DocumentFragment와 Dollar sign($) 변수명

프로젝트 시작 전, 공부했던 자바스크립트를 다듬을 요량으로

우아한 테크코스 프리코스 과제를 수행해보고, 다른 사람들의 코드도 보고 있다.

 

보통 우테코 과제는 1, 2차는 숫자야구, 자동차 경주이고 3차가 바뀐다고 한다.

3차 과제가 무엇이었는지 확인하기 위해 검색하던 중 지난 4기 우테코에 프론트엔드로 지원하고 합격한 사람의 블로그를 발견했다.

 

compy (Ryu Hyun Seung) - velog

 

개발을 오래해보신 분 같고, 프리코스 과제를 수행하며 겪은 과정을 상세히 적어있기에 정독하며 공부했다.

저분의 코드를 보며 모듈 혹은 특정 코드를 이런 식으로도 짤 수 있구나! 라는 깨달음을 얻었다.

두 가지 정도로 요약할 수 있다.

---

 

1.  DocumentFragment

먼저 document.createDocumentFragment 라는 웹 API 메서드였다.

DocumentFragment라는 걸 create한다는 것 같은데 그럼 DocumentFragment가 뭐지?

MDN에서 답을 얻을 수 있었다.

DocumentFragment - Web API | MDN

보통 어떤 엘리먼트 A 밑에 하위 엘리먼트 B, C, D 를 추가할 때

B를 만들어 A에 붙이고, 또 C를 만들어 A에 붙이고 이런 식으로 작업하곤 한다.

 

그러나 그렇게 작업하면 reflow와 렌더링이 수시로 발생하기 때문에 비효율적일 것이다.

그래서 기존 DOM 트리에 포함되지 않는 빈 엘리먼트 조각을 만들어 여기에 추가할 엘리먼트 B, C, D를 묶어

이 조각 엘리먼트를 기존 엘리먼트 A에 한번만 붙이며 효율성을 추구하는 것이다.

 

이 과정에서 알게된 reflow라는 개념에 대해서는 아래 블로그를 참고했다. 렌더링 과정에 대해 자세히 설명해준다.

폴시랩

 

---

 

2.  변수명에 적힌 Dollar sign ($)의 정체

다른 하나는 모듈을 import 해올 때였는데 아래와 같은 코드였다.

{ $ } from "./~~~.js";
const $result = $("#result");

여기서 도대체 $는 뭔가 싶어서 해당 모듈로 들어가 보니

 

export const $ = (selector) => document.querySelector(selector);

CSS selector를 인자로 DOM 요소를 가져오는 함수를 $라는 이름으로 export 한 것이었다.

실제로 다른 프로젝트를 진행하며 document.querySelector를 쓸 일이 정말 많았다.

정말 귀찮다고만 생각했는데 이것을 util이라는 모듈로 만들어 이렇게 쉽게 꺼내 쓸 수 있도록 만든 것이 놀라웠다.

 

그와 동시에 왜 dollar sign($)을 함수 이름으로, 또 엘리먼트를 받아와 변수 이름 앞에 왜 $를 붙인 것인지에 대한 의문이 들었다.

검색해본 결과 답을 찾을 수 있었는데 그것은 private 변수에 under score(_)를 사용하는 것과 비슷했다.

 

JavaScript Dollar Sign($)과 Underscore(_)

 

CSS selector로 HTML의 DOM 엘리먼트를 받아오는 querySelector나 getElementById의 관용적인 줄임말인 것이었다.

그리고 그 메서드를 통해 가져온 변수명을 선언할 때 앞에 $를 붙여 구분해 준 것이다.

 

---

잘하는 사람의 코드 일부분을 봤을 뿐인데 벌써 새로운 개념을 두 개나 알았다.

당분간 내 코드를 짜며 다른 코드도 정말 많이 볼 텐데 이 과정이 끝났을 때

내가 얼마나 성장해 있을지 기대된다.

은근히 재밌다!