JavaScript new 연산자
·
FrontEnd/JavaScript
new는 그냥 "객체 만드는 키워드"가 아니다.this를 어떻게 묶고, 어떤 과정을 거쳐 인스턴스를 만드는지 아는 게 핵심이다. 🧑‍💻예전에 자바스크립트 공부할 때,"생성자 함수에는 무조건 new 붙여라""클래스는 new 없으면 에러 난다"이런 말만 듣고 넘겨버리기 쉬운데,정작 new가 내부에서 무슨 일을 하는지 모르면버그가 생겨도 감으로만 디버깅하게 된다.이번 글에서는 new가 실제로 하는 일을4단계 과정으로 풀어서 정리해본다.결론 먼저한 줄 요약하면new = 새 객체(인스턴스)를 만들고, 그 안에서 this를 알맞게 바인딩해 주는 연산자내부적으로는 대략 이런 일이 일어난다.빈 객체 하나 만든다그 객체에 프로토타입을 연결하고, this로 묶는다생성자 함수(또는 클래스의 constructor)를 실행..
[실무 기록] jQuery jsTree를 모듈로 감싸서 쓰면서 배운 것들
·
FrontEnd/JavaScript
회사 프로젝트에서 카테고리 트리 같은 걸 보여줘야 하는 요구가 생겼다."검색 필터에 트리 UI 하나 붙이면 되겠지" 정도로 생각했는데, 막상 손대 보니 생각보다 고려할 게 많았다.트리 데이터를 백엔드에서 받아와서 jsTree 형식으로 변환해야 하고화면에 트리가 여러 개 붙을 수 있고탭 전환/필터 리셋 시 기존 트리를 깔끔하게 destroy 해줘야 하고같은 ID로 여러 번 초기화하면 메모리 누수도 신경 써야 했다그래서 그냥 여기저기서 $().jstree(...)를 호출하는 대신,jsTree 관리 모듈을 하나 만들고 그 위에서만 트리를 제어하는 구조로 정리했다.이 글은 그때 썼던 패턴을 나중에 내가 다시 봐도 이해할 수 있게,조금 일기처럼 정리해놓은 기록이다.1. 객체 리터럴 vs class, 뭐로 묶을지 ..