"new를 붙이면 다 같은 거 아닌가?" 싶은 그 지점부터 한 번 정리해보자 🧑‍💻자바스크립트에서 객체를 만드는 방법은 여러 가지가 있다.리터럴 객체 {}생성자 함수 function Something() { ... }ES6 클래스 class Something { ... }겉으로 보기엔 다 비슷하게 동작하는 것 같지만,실제로 개발할 때는 클래스 vs 생성자 함수 선택에서 꽤 차이가 난다.이 글에서는 둘의 차이를 주니어 기준으로 정리하고,"지금은 뭘 쓰는 게 좋은지" 감을 잡는 게 목표다.결론 먼저먼저 선택부터 정리하면ES6 클래스문법이 직관적이고, 코드가 잘 읽힌다.TypeScript와도 자연스럽게 잘 맞는다.새로 만드는 코드라면 기본값으로 이걸 쓰는 편이 좋다.생성자 함수ES6 이전 스타일, 레거시 ..

"HTML 문자열을 어디에, 어떻게 넣을까" 정리해 두면성능이랑 보안 둘 다 덜 털린다.처음에 DOM 다룰 때는 거의 무조건 이렇게 시작한다.target.innerHTML = "뭐라도 나오게 해봐...";빠르고 편하다. 근데 규모가 커지면 갑자기 이런 고민이 튀어나온다.innerHTML += 로 계속 추가해도 되나?특정 위치에만 쏙 끼워 넣고 싶을 땐 뭐 쓰지?XSS 같은 보안 이슈는 어떻게 피하지?이번 글에서는 HTML 삽입/조작할 때 자주 쓰는 3가지 DOM 메서드를내가 실제로 써본 기준으로 정리해 본다.innerHTMLinsertAdjacentHTMLdocument.createRange().createContextualFragment결론 먼저한 줄씩만 꽂으면 이렇게 정리할 수 있다전체 교체 → in..

함수가 그냥 실행되는 게 아니라, "누가 호출했냐"에 따라 표정이 바뀌는 존재라는 걸 깨닫기 시작하면 나오는 삼총사. call, apply, bind 🧑‍💻자바스크립트 함수는 단순히 "코드 묶음"이 아니라,일급 객체라서 여기저기 넘기고, 변수에 담고, 메서드도 붙일 수 있다.그중에서도 꽤 자주 이름이 나오는 애들이 있다.Function.prototype.callFunction.prototype.applyFunction.prototype.bind공통점은 하나다."이 함수가 실행될 때 this를 뭘로 볼지"를 내가 직접 정하는 도구이번 글에서는 이 세 가지를 정리해보고,실제로 언제 써먹는지까지 같이 정리해본다.결론 먼저한 줄로 요약하면 이렇게 볼 수 있다.call / apply함수를 바로 실행하면서"이번..

1편에서 왜 CRDT·Yjs·WebSocket을 파게 됐는지 정리했고2편에서 WebSocket 서버 구조랑 회사 네임스페이스에 적응한 기록을 남겼다.3편은 이제 그 위에 올라가는 UX 레이어 이야기다."실제로 폼 화면에서 상대가 뭘 하고 있는지 어떻게 보여줬는지" 정리해 둔다.0. 이 글에서 다루는 범위이 글은 Yjs 기본 개념이나 Y.Doc, Y.Map 같은 타입 설명을 다시 하지 않는다.이미 전제는 이렇다.Yjs로 폼 상태를 동기화하고 있고WebSocket 서버를 통해 델타를 잘 주고받는 상태다여기서 한 발 더 나가서 아래를 다룬다.누가 폼을 보고 있는지상대가 지금 어느 필드를 편집 중인지동시에 수정할 때 "부딪혔다"는 느낌을 어떻게 줄일지"내가 뭘 하고 있는지"를 Awareness에 어떻게 싱크할지..

1편에서 "왜 이 일을 하게 됐는지"와CRDT, Yjs, WebSocket을 손에 익히기까지 과정을 정리했다.2편에서는 그다음 단계였던 WebSocket 서버 구조 설계랑회사 네임스페이스 환경에 적응한 기록을 남겨 둔다.0. 1편에서 여기까지 왔었다1편 기준으로는 대략 여기까지 정리가 되어 있었다.회사에서 "CRDT를 검토해서 폼 실시간 공유에 써보자"는 요구가 내려왔다CRDT 라이브러리는 Yjs로 결정했다로컬에서 Node WebSocket 서버와 Next 페이지 하나로 기본 통신 테스트를 완료했다Yjs 문서와 WebSocket을 묶어서 폼 데이터를 실시간으로 동기화하는 구조를 한 번 돌려 봤다이제 남은 일은이 로컬 구조를 회사 WebSocket 인프라에 맞게 옮기는 것네임스페이스 기반 구조 안에서 Yj..

회사에서 "CRDT라는 게 있으니 이걸 한 번 검토해서 폼 화면 실시간 공유에 써보자"라고 내려왔고,그때부터 내가 뭐를 어떻게 파기 시작했는지 정리해 둔 기록. 나중에 비슷한 요구가 다시 나왔을 때"그때 어떻게 붙였지?"를 빠르게 복기하려고 남겨두는 글이다.1. 왜 이걸 하게 됐는지출발점은 아주 단순했다.상담/멘토링 화면에서 폼 입력 상태를 실시간으로 공유하고 싶다CRDT라는 개념이 있으니 이쪽을 한 번 조사해서 활용해 봐달라채팅처럼 텍스트만 왔다 갔다 하는 수준이 아니라텍스트 인풋 값체크박스, 셀렉트 선택 상태진행 단계같은 것들을 두 화면에서 동시에 보고 싶다는 요구였다.여기에 현실적인 제약이 몇 가지 붙었다.네트워크 환경이 항상 좋지 않다브라우저 탭을 여러 개 띄울 수 있다재접속했을 때 상태를 자연스..

회사 프로젝트에서 카테고리 트리 같은 걸 보여줘야 하는 요구가 생겼다."검색 필터에 트리 UI 하나 붙이면 되겠지" 정도로 생각했는데, 막상 손대 보니 생각보다 고려할 게 많았다.트리 데이터를 백엔드에서 받아와서 jsTree 형식으로 변환해야 하고화면에 트리가 여러 개 붙을 수 있고탭 전환/필터 리셋 시 기존 트리를 깔끔하게 destroy 해줘야 하고같은 ID로 여러 번 초기화하면 메모리 누수도 신경 써야 했다그래서 그냥 여기저기서 $().jstree(...)를 호출하는 대신,jsTree 관리 모듈을 하나 만들고 그 위에서만 트리를 제어하는 구조로 정리했다.이 글은 그때 썼던 패턴을 나중에 내가 다시 봐도 이해할 수 있게,조금 일기처럼 정리해놓은 기록이다.1. 객체 리터럴 vs class, 뭐로 묶을지 ..

이전 글에서 비동기 기본 개념을 훑어봤다면, 이번 글은 실제 코드에서async/await와 Promise 체이닝을 어떻게 나눠 쓰는지가 중심이다. 결론 먼저Promise는 비동기 작업의 결과를 담는 그릇이다async/await는 Promise를 읽기 좋게 쓰기 위한 문법이다순차 처리만 보면 async/await 쪽이 코드 읽기가 훨씬 편하다병렬 처리, 여러 작업을 한 번에 돌릴 때는 Promise.all 같은 API를 그대로 쓴다결국 실무에서는 "로직 구조는 async/await"에 두고, "병렬 제어는 Promise API"로 가져가는 패턴이 많다1. Promise 한 번만 다시 짚고 가기Promise는 비동기 작업이 끝났을 때성공했는지실패했는지결과 값이 무엇인지를 표현하는 객체다.내부적으로는 대략 이..