전체 글(122)
-
TaskMaster AI 설치부터 활용해보기
TaskMaster AITaskmaster는 당신의 AI를 위한 개인 프로젝트 매니저입니다.작업을 손쉽게 정리·조사·확장·우선순위화하고 실행까지 도와줍니다.영구적인 컨텍스트 유지, 드리프트 없는 정확성, 즉각적인 명확함을 제공합니다.무료이며 오픈소스이고 API 연동도 친화적입니다.생산적으로 함께 일해봐요.공식문서에 나와있듯이 내 개인 프로젝트 매니저다. AI가 옆에서 복잡하고 광대할 수 있는 계획들을 작은 단위의 Task로 나눠준다. 개발하다보면 우선순위가 무엇이고 일정관리를 어떻게 할 것 이며 어느 기능을 구현해야할지 고민할때가 많다.TaskMaster AI를 사용하면 그 고민을 해결해준다. TaskMaster AI 설치npm install -g task-master-aitask-master initi..
2026.01.23 -
Promise와 setTimeout은 왜 실행 순서가 다를까?
console.log('시작'); Promise.resolve().then(() => { console.log('프로미스1');});setTimeout(() => { console.log('타임아웃');}, 0);Promise.resolve().then(() => { console.log('프로미스2');});console.log('끝');이 순서대로 호출시 콘솔이 어떻게 찍힐까?microtask queue와 macrotask queue를 모른다면 시작 -> 프로미스1 -> 프로미스2 -> 끝 -> 타임아웃이렇게 생각할 수 도 있을것 같다.실제 결과는 아래와 같다.시작 -> 끝 -> 프로미스1 -> 프로미스2 -> 타임아웃왜 이..
2025.12.24 -
JS 참조와 복사(깊은복사,얕은복사) feat. 리액트에서의 얕은 비교
참조 Reference객체 데이터 타입이 실제로 저장되는 메모리 주소를 가르킨다. 복사하지않고 공유하는것 원시타입원시타입은 각각 값자체가 메모리에 저장되어 독립적이다. 참조타입참조타입 같은 경우 메모리 주소에 저장을 하지만실제값은 힙(Heep)에 저장되고 변수는 메모리 주소만 가지고 있다.let obj1 = {name: 'cy'}let obj2 = obj1obj2.name = 'cy lee'console.log(obj1) // {name: 'cy lee'} obj1도 같이 변경 obj2 변수가 obj1을 참조하고 있을때obj2의 name값을 바꾸면 obj1의 name값도 바뀐다.obj2가 obj1을 참조하고 있기때문에 두개의 변수가 서로 다른 메모리주소를 갖고있지만 같은 참조값을 공유하고 있다는 증거이다..
2025.11.28 -
웹 성능 최적화를 위한 PageVisibility API 알아보기(CPU/GPU 사용률 감소🔻 )
pageVisibliity API웹페이지가 현재 사용자에게 보이는 상태인지 감지할수있는 API문서가 보이지 않을 때 페이지에서 불필요한 작업이 수행되지 않도록 하여 리소스를 절약하고 성능을 개선하는 데 특히 유용.사용자가 브라우저를 최소화 하거나 다른탭으로 이동했거나 탭을 보고있거나 했을 경우 API는 visibilitychange 이벤트를 전송해 상태 변경을 알린다 (가시성 상태 추적) 속성document.visibilityStatevisible 페이지가 보여지는 상태hidden 페이지가 숨겨진 상태document.hiddentrue 페이지가 보여지는 상태false 페이지가 숨겨진 상태두 속성의 기능상 차이는 거의 같음. hidden은 단순히 true/false값만 출력함. 이점불필요한 렌더링 감소Cp..
2025.09.25 -
공통 컴포넌트를 건드리지 않고 이벤트 제어하기 - 캡처링
캡처링최상위 요소(winow)에서 타겟 요소 까지 내려가는 단계, 하향식 전파최상위 요소부터 시작실제 클릭한 타겟까지만 내려가면서 이벤트 실행타겟에 도달하면 캡처링 단계 끝 wrap.addEventListener('click', () => console.log('wrap'), true);parent.addEventListener('click', () => console.log('parent'), true);child.addEventListener('click', () => console.log('child'), true);1. wrap을 클릭하면?wrap부터 시작 했으므로 끝-> console에 wrap이 찍힘2. parent를 클릭하면?wrap부터..
2025.09.19 -
리액트에서 클로저가 어떻게 사용되고 있는가?
클로저함수와 그 함수가 선언될 당시의 렉시컬 환경(선언 됬을때의 렉시컬 환경)의 조합.함수가 외부 스코프 변수를 참조 할 수 있고 외부 함수의 실행이 끝나도 변수에 접근 할 수 있다. 바닐라 JavaScript에서 클로저 이슈for (var i = 0; i 반복문을 돌며 setTimeout 호출 시 콘솔에 i를 출력하는 예시 코드다.결과가 어떻게 나올까?클로저를 모르면 0,1,2가 출력된다고 볼 수 있다.하지만 클로저는 외부 스코프의 변수를 참조하기 때문에 setTimeout 함수가 1초 후 실행됬을때는 i는 이미 3가 되어 콘솔에는 3이 출력된다.var는 함수 스코프이기 때문에 반복문을 돌며 새로운 i를 생성하지 않고 하나의 i로 공유가 되기 때문이다. 리액트에서의 클로저자바스크립트에서는 var를 사용..
2025.07.17