Review 157

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0')

// scriptconst { data: testData, isLoading } = useQuery([""], () => fetchGetData(id), { enabled: Boolean(activityId.value), },)// tamplate{{ testData[index]?.name }} 1. enabled  옵션을 활성화한 상태에서, 조건에 맞지 않아 useQuery가 데이터를 가져오지 않는 경우 => isLoading이 계속 true인 상태로 변하지 않음 2. useQuery가 데이터를 가져오지 않았기 때문에, 초기 데이터가 undefined 상태에서 화면에 데이터를 렌더링할 경우 => Uncaught (in promise) TypeError: Ca..

Error 2025.01.20

트리쉐이킹이란?

코드에서 사용되지 않는 부분을 제거하는 과정을 시각적으로 설명하기 위해 붙여진 이름으로,  나무(tree)를 흔들어(dead branches) 불필요한 가지를 떨궈내는 것에 비유한 것이다.  tree에 비유하는 이유 모듈 시스템과 코드베이스는 일반적으로 트리 구조와 비슷하게 구성된다. 즉, 애플리케이션의 최상위 모듈에서 시작해 하위 모듈로 연결된 의존성 그래프를 생각할 수 있다. 이 트리에는 실제로 사용되는 모듈(가지)과 사용되지 않는 모듈(불필요한 가지)이 모두 포함된다. 'shaking'의 의미 '쉐이킹'은 나무를 흔들어서 쓸모없는 가지를 떨어뜨리는 과정처럼, 코드베이스에서 사용되지 않는 모듈이나 코드를 탐지하고 제거하는 것을 의미한다. 코드 분석: 번들러가 코드 트리(의존성 그래프)를 탐색하여 각 ..

정리 2024.11.08

[Vue] ref와 reactive의 차이점

데이터 타입:ref: 단일 값이나 원시 타입reactive: 객체, 배열 등 복합 데이터 구조데이터 사용법:ref: .value를 통해 접근reactive: 일반 객체처럼 속성에 직접 접근  ref와 reactive 모두 반응형 데이터를 다룰 때 사용하지만, 다루는 데이터 타입이 다르다는 특징이 있다. 그러나 reactive는 ref와 달리 데이터의 값이 수정되거나 추가될 때 등 반응성을 잃는다는 점에서 주의해야 한다. Vue의 반응형 시스템은 reactive 객체 생성 시점에 존재하는 속성들만 추적하기 때문에, 새로 추가된 속성은 반응형으로 처리되지 않는다. 1. 속성 추가const state = reactive({ count: 0 }); state.newProperty = 5;console.log(s..

Vue 2024.11.07

[SQL] RANK() OVER() vs RANK() WITHIN GROUP() 차이점

1. RANK() OVER() RANK() OVER()는 윈도우 함수로, 각 행에 대해 순위를 매기고 그 결과를 반환한다. 주로 OVER(PARTITION BY ...) 구문과 함께 사용하며, 특정 그룹 내에서 순위를 구할 수 있다. SELECT DNAME, NAME, SAL, RANK() OVER(PARTITION BY DNAME ORDER BY SAL DESC) AS rank FROM employees; DNAME별로 데이터를 그룹화고, 각 그룹 내에서 SAL을 내림차순 정렬하여 순위를 매긴다.RANK() 함수는 동일한 값에 동일한 순위를 부여하고, 다음 순위는 건너뛴다. ex) 1위가 2명이면 다음은 2위가 아닌 3위.순위를 건너뛰지 않고 이어지게 하고 싶은 경우에는 DE..

SQL 2024.11.06

reduce() 정리

reduce()  : 배열의 각 요소에 대해 주어진 reducer() 함수를 실행하고, 하나의 결과값을 반환reducer() 함수의 반환 값은 누적값에 할당되고, 누적값은 순회 중 유지되므로 결국 최종 결과는 하나의 값이 된다. 누적 (acc)현재 값 (cur)현재 인덱스 (idx)원본 배열 (src) 매개변수- callback배열의 각 요소에 대해 실행할 함수로 다음 네 가지 인수를 받는다. - accumulator누산기는 콜백의 반환값을 누적한다.콜백의 이전 반환값 또는 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값이 할당된다. - currentValue처리할 현재 요소 - currentIndex처리할 현재 요소의 인덱스로, initialValue를 ..

JAVASCRIPT 2024.08.14