Build & Record

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

han.log — Mon, 20 Jan 2025 14:06:47 +0900

// script
const { 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: Cannot read properties of undefined (reading '0')

해결방법

초기값 설정하기

{
      enabled: Boolean(activityId.value),
      initialData: [],
},

각 타입에 맞게 데이터 초기화하기

could not initialize proxy [ ... ] - no Session(JPA)

han.log — Fri, 17 Jan 2025 15:05:53 +0900

org.springframework.http.converter.HttpMessageNotWritableException: Could not write JSON: could not initialize proxy [kr.co. ... ] - no Session

Caused by: org.hibernate.LazyInitializationException: could not initialize proxy [kr.co. ... ] - no Session

[http-nio-8081-exec-3] WARN o.s.w.s.m.m.a.ExceptionHandlerExceptionResolver - Resolved [org.springframework.http.converter.HttpMessageNotWritableException: Could not write JSON: could not initialize proxy [kr.co. ... ] - no Session]

해당 에러는 JPA를 사용해 데이터를 select할 때 발생할 수 있는 에러로

1:N의 관계를 가지고 있는 변수에 설정한 LAZY Loading 때문에 발생한다.

@ManyToOne(fetch = FetchType.LAZY)

// application.yml

jpa:
  database: MYSQL
  show-sql:
  properties:
  open-in-view: false

Open Session In View를 true로 설정하지 않으면 트랜잭션 시작 시점에 영속성 컨텐스트가 시작되어 트랜잭션이 종료되는 시점에 영속성 컨텍스트가 소멸되게 된다.

영속성 컨텐스트가 없어졌기 때문에 컨트롤러에서 가져올 때 조회할 수 없는 것이다.

해결 방법

1. Service.java 파일에서 DTO로 변환 후에 Controller로 리턴한다.

new ObjectDTO(ObjectEntity);

2. 변수의 설정을 즉시 로딩(Earger)으로 변경한다.

@ManyToOne(fetch = FetchType.EAGER)

그러나 즉시 로딩을 사용하는 경우 JPQL을 사용하면 N+1 문제가 발생할 수 있기 때문에 권장하지 않는다.

출처

https://jwdeveloper.tistory.com/310

(JPA) could not initialize proxy - no Session (1)

JPA를 사용하다 보면 아래 오류를 빈번하게 마주치게 된다. could not initialize proxy - no Session 해당 오류의 원인을 Open Session In View와 관련지어 정리해보고자 한다. 또한 영속성 컨텍스트의 시작과

jwdeveloper.tistory.com

https://cantcoding.tistory.com/78

JPA/ could not initialize proxy - no Session

1.문제점 JPA를 통한 개발을 하다보면 한번쯤 만날 수 밖에없는 에러이다. JPA를 사용하여 DB에 저장된 리소스를 불러와서 반환하는 경우, 혹은 사용할 때 발생했던 에러이다. 2.접근 JPA에 대한 이

cantcoding.tistory.com

트리쉐이킹이란?

han.log — Fri, 8 Nov 2024 17:16:48 +0900

코드에서 사용되지 않는 부분을 제거하는 과정을 시각적으로 설명하기 위해 붙여진 이름으로, 나무(tree)를 흔들어(dead branches) 불필요한 가지를 떨궈내는 것에 비유한 것이다.

tree에 비유하는 이유

모듈 시스템과 코드베이스는 일반적으로 트리 구조와 비슷하게 구성된다. 즉, 애플리케이션의 최상위 모듈에서 시작해 하위 모듈로 연결된 의존성 그래프를 생각할 수 있다. 이 트리에는 실제로 사용되는 모듈(가지)과 사용되지 않는 모듈(불필요한 가지)이 모두 포함된다.

'shaking'의 의미

'쉐이킹'은 나무를 흔들어서 쓸모없는 가지를 떨어뜨리는 과정처럼, 코드베이스에서 사용되지 않는 모듈이나 코드를 탐지하고 제거하는 것을 의미한다.

코드 분석: 번들러가 코드 트리(의존성 그래프)를 탐색하여 각 모듈이 실제로 참조되고 사용되는지를 확인
불필요한 코드 제거: 사용되지 않는 모듈이나 함수가 탐지되면 최종 번들에서 제외되어, 결과적으로 작은 크기의 번들을 생성

이 트리쉐이킹드에서 사용되지 않는 부분을 제거하는 과정을 시각적으로 설명하기 위해 붙여진 이름으로, 나무(tree)를 흔들어(dead branches) 불필요한 가지를 떨궈내는 것에 비유한 것이다.

tree에 비유하는 이유

모듈 시스템과 코드베이스는 일반적으로 트리 구조와 비슷하게 구성된다. 즉, 애플리케이션의 최상위 모듈에서 시작해 하위 모듈로 연결된 의존성 그래프를 생각할 수 있다. 이 트리에는 실제로 사용되는 모듈(가지)과 사용되지 않는 모듈(불필요한 가지)이 모두 포함된다.

'shaking'의 의미

'쉐이킹'은 나무를 흔들어서 쓸모없는 가지를 떨어뜨리는 과정처럼, 코드베이스에서 사용되지 않는 모듈이나 코드를 탐지하고 제거하는 것을 의미한다.

이 트리쉐이킹을 통해 번들 크기를 줄이고, 로딩 속도를 개선할 수 있다.

[Vue] ref와 reactive의 차이점

han.log — Thu, 7 Nov 2024 19:58:12 +0900

데이터 타입:
- ref: 단일 값이나 원시 타입
- reactive: 객체, 배열 등 복합 데이터 구조
데이터 사용법:
- ref: .value를 통해 접근
- reactive: 일반 객체처럼 속성에 직접 접근

ref와 reactive 모두 반응형 데이터를 다룰 때 사용하지만, 다루는 데이터 타입이 다르다는 특징이 있다. 그러나 reactive는 ref와 달리 데이터의 값이 수정되거나 추가될 때 등 반응성을 잃는다는 점에서 주의해야 한다.

Vue의 반응형 시스템은 reactive 객체 생성 시점에 존재하는 속성들만 추적하기 때문에, 새로 추가된 속성은 반응형으로 처리되지 않는다.

1. 속성 추가

const state = reactive({ count: 0 }); 
state.newProperty = 5;
console.log(state.newProperty); // 5
// Vue는 더이상 newProperty를 반응형으로 추적하지 않는다.

2. 데이터 수정

let state = reactive({ count: 0 }); 
state = { count: 1 };

이 경우 state 자체를 다른 객체로 할당했기 때문에 반응형으로 추적하지 않는다.

3. 배열의 인덱스 값 또는 길이를 수정하는 경우

const state = reactive([1, 2, 3]); 
state[1] = 10;

해결방법

reactive를 사용한 반응형 객체가 반응성을 잃었을 때, 아래와 같은 방법을 사용해 반응성을 유지할 수 있다.

Vue.set() 또는 Object.assign(): 객체에 새로운 속성을 추가할 때 Vue.set() (Vue 2의 경우) 또는 Object.assign() 등을 사용.
toRefs() : 개별 속성을 반응형으로 만들어주는 toRefs() 사용.
배열 메서드 주의: 배열은 push, pop, splice 등 Vue에서 감지할 수 있는 메서드 사용.

Object.assign()

const initState = {
    isEmpty: false,
    name: "",
    phone: "",
};

const formState = reactive({ ...initState });

const reset = () => {
    Object.assign(formState, initState);
};

const formState = reactive({
    isEmpty: false,
    name: "",
    phone: "",
});

const getData = (params) => {
    Object.assign(formState, params);
    refetch();
};

toRefs()

const state = reactive({
    isEmpty: false,
    name: "",
    phone: "",
});
const { isEmpty, name, phone } = toRefs(state);

ref 또는 reactive 중 한 가지만 사용하길 권장하는 이유

1. 코드 일관성

ref의 경우 value를 통해 데이터에 접근할 수 있기 때문에 혼란을 야기할 수 있고, 코드의 일관성이 떨어진다.

2. 가독성과 유지보수성

코드 스타일이 일관되지 않아 유지보수가 어려울 수 있다.
코드 작성 시 어떤 상황에 무엇을 사용할지 매번 고민하게 되기 때문에 개발 효율성이 떨어질 수 있다.

3. 타입스크립트 호환성

TypeScript를 사용할 때는 reactive보다 ref가 더 명확한 타입 정의를 제공하는 경우가 있다. 혼합 사용 시 타입 정의가 복잡해지거나 의도하지 않은 타입 오류가 발생할 수 있다.
한 가지 방식을 일관되게 사용하면 타입 시스템과의 호환성을 더 쉽게 유지할 수 있다.

4. 사용성

ref는 원시 값이나 단일 값의 반응성을 다루는 데 적합하고, reactive는 객체나 배열 같은 복합 데이터 구조에 적합하기 때문에 한 가지 방식으로 통일하게 되면 "어떤 데이터에 어떤 함수를 쓸지"에 대한 모호함이 줄어들게 된다.

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

han.log — Wed, 6 Nov 2024 17:10:10 +0900

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위.

순위를 건너뛰지 않고 이어지게 하고 싶은 경우에는 DENSE_RANK()를 사용해야 한다.

- 각 행에 대해 개별적으로 순위를 부여한다.
- PARTITION BY로 그룹화하여, 그룹별 순위를 계산한다.
- ORDER BY로 정렬 기준을 설정하여 순위를 매긴다.

2. RANK() WITHIN GROUP()

RANK() WITHIN GROUP()은 집계 함수로, 집계된 결과에서 특정 값의 순위를 계산한다. RANK() WITHIN GROUP은 행마다 순위를 반환하는 것이 아니라, 집계된 값에 대해 특정 조건에 맞는 순위를 구할 때 사용한다.

SELECT 
    DNAME, 
    RANK(3000) WITHIN GROUP (ORDER BY SAL DESC) AS rank 
FROM employees 
GROUP BY DNAME;

각 DNAME 그룹에서 SAL을 내림차순으로 정렬하고, SAL의 값이 3000인 데이터의 순위를 매긴다.

- 집계 함수로서, 집계된 결과에 대해 순위를 부여한다.
- 여러 행을 그룹화(GROUP BY)한 후 특정 열에 대해 순위를 매길 때 사용한다.
- RANK() WITHIN GROUP은 그룹화된 데이터에 대한 특정 값의 순위를 구할 때 유용하게 사용할 수 있다.

차이점 요약

함수 종류	윈도우 함수	집계 함수
반환 형태	원본 데이터의 각 행에 순위 부여	그룹화된 결과에서 특정 값의 순위를 계산
문법	PARTITION BY, ORDER BY	WITHIN GROUP (ORDER BY ...)
사용 용도	각 행에 대해 순위를 부여하고 결과 집합 유지	그룹화된 데이터에서 특정 값의 순위를 얻고자 할 때

RANK() OVER()는 주로 개별 행에 순위를 매길 때 사용하고, RANK() WITHIN GROUP()은 집계된 그룹에서 특정 값의 순위를 구할 때 사용한다.

예시) Table. employees

ID	NAME	DNAME	SAL
1	홍길동	아시아지부	300
2	박길동	아시아지부	400
3	최길동	아시아지부	500
4	김길동	남유럽지부	450
5	이길동	남유럽지부	550

1. RANK() OVER()

각 직원의 급여 순위를 DNAME별로 계산하기.

SELECT 
    DNAME, 
    NAME, 
    SAL, 
    RANK() OVER(PARTITION BY DNAME ORDER BY SAL DESC) AS rank 
FROM employees;

PARTITION BY DNAME을 통해 DNAME별로 데이터를 그룹화하고, 각 DNAME 그룹 내에서 SAL을 내림차순으로 정렬하여 순위를 매긴다.

아시아지부	최길동	500	1
아시아지부	박길동	400	2
아시아지부	홍길동	300	3
남유럽지부	이길동	550	1
남유럽지부	김길동	450	2

2. RANK() WITHIN GROUP() 예제

각 DNAME 그룹에서 특정 급여(SAL = 450 )가 몇 번째 순위에 있는지 구하기.

SELECT 
    DNAME, 
    RANK() WITHIN GROUP (ORDER BY SAL DESC) AS rank_for_450 
FROM employees 
WHERE SAL = 450 
GROUP BY DNAME;

GROUP BY DNAME을 통해 DNAME별로 그룹화한 후, SAL이 450일 때의 순위를 각 그룹 내에서 구한다. WITHIN GROUP을 통해 그룹 내에서 SAL을 내림차순으로 정렬한 후, SAL = 450이 몇 번째 순위에 있는지 계산한다.

아시아지부	2
남유럽지부	2

S3 browser add new Account

han.log — Mon, 14 Oct 2024 10:39:20 +0900

system.config.properties 설정 파일 확인하여 Account만들기

1. REST Endpoint

aws.s3.bucket.url

2. Access Key Key ID

aws.s3.access.key

3. Secret Access Key

aws.s3.secret.key

라이브러리 파일 Git에서 제외시키기

han.log — Sun, 15 Sep 2024 02:37:25 +0900

'.gitigonre' 파일에서 제외시켰음에도 불구하고 사진과 같은 파일들이 추가될 경우

git rm -r --cached .idea/libraries/

.idea/libraries/ 폴더 아래의 파일들을 Git의 트래킹 목록에서 제거

로컬 디스크에서는 파일을 그대로 유지되므로 프로젝트에는 문제없음

[JPA] jpa SqlExceptionHelper - SQL Error: 1064, SQLState: 42000

han.log — Thu, 12 Sep 2024 18:11:21 +0900

* Entity에 예약어 사용되고 있는지 확인

예시)

@Column(name = "`order`")
private int order;

PC 갑자기 물음표 거꾸 입력될 때/띄어쓰기 두 배로 넓어졌을 때 해결

han.log — Wed, 14 Aug 2024 16:17:44 +0900

https://blog.naver.com/6250hijk/223010824623

PC카톡 갑자기 물음표 거꾸로 입력될 때 해결 방법

blog.naver.com

위의 해결 방법을 다 해봐도 되지 않는다면 아래의 방법도 시도해보기

* 반자로 설정해야 일반적인 설정으로 돌아옴

reduce() 정리

han.log — Wed, 14 Aug 2024 14:30:40 +0900

reduce()

: 배열의 각 요소에 대해 주어진 reducer() 함수를 실행하고, 하나의 결과값을 반환

reducer() 함수의 반환 값은 누적값에 할당되고, 누적값은 순회 중 유지되므로 결국 최종 결과는 하나의 값이 된다.

누적 (acc)
현재 값 (cur)
현재 인덱스 (idx)
원본 배열 (src)

매개변수

- callback

배열의 각 요소에 대해 실행할 함수로 다음 네 가지 인수를 받는다.

- accumulator

누산기는 콜백의 반환값을 누적한다.

콜백의 이전 반환값 또는 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값이 할당된다.

- currentValue

처리할 현재 요소

- currentIndex

처리할 현재 요소의 인덱스로, initialValue를 제공한 경우 0, 아니면 1부터 시작한다.

- initialValue

콜백백의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용한다. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생한다.

// 사용법
arr.reduce(callback[, initialValue])

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue,
);

console.log(sumWithInitial);
// Expected output: 10

출처

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce