전역변수 관리하는 프론트엔드 쪽의 라이브러리 사용시 주의점!!!!!

 

이것때문에 정말 몇시간을 그냥 날렸다... 나는 지금 ZustAnd라이브러리를 사용하고 있는데, 당연히 프론트 엔드쪽의 변수를 관리하는 것이므로 프론트 엔드파일안에 있는, 전역적으로 관리하는 변수의 이름에만 신경을 썼었다.... 하지만 이렇게 하면 안된다. 벡단에서 넘어오는 변수를 프론트쪽에서 관리하는 것이므로 그 전역변수의 이름은 벡단에서 사용하던 이름이 그대로 전달되는 것이다. 그래서 벡단과 다른 이름이지만 의미는 같은 그 변수명을 사용하면 당연히 에러가 나지 않지만 해당값이 없다고 읽히는 것이다...

 

프론트단에서 찍으면 위 그림과 같이 undefined라고 정의되지 않은 값이라고 표현된다.

 

그 이유는 바로바로...

벡단에서 데이터를 전달할 때쓰이는 DTO객체 안의 변수이름이 userId이지만

 

 

전역변수로 관리되는 loginUser의 타입인 User타입의 맴버변수인 id는 그 이름이 말그대로 id인 것이다.

따라서!!!

이와 같이 값을 찍으면!

이렇게 값이 undefined로 나오는 것이다

 

즉!! 해결책은 백단의 DTO객체의 맴버변수 이름과 프론트에서 전역적으로 관리하는 변수의 이름을 같게 해주어야 한다!!!