주성현

1. computed 속성역할:반응형 계산 속성으로, 상태(state)나 데이터(data)의 의존 관계를 기반으로 값을 동적으로 계산합니다.데이터를 효율적으로 처리하며, 종속 데이터가 변경될 때만 실행됩니다.결과는 캐싱되며, 동일한 값에 대해 반복적으로 재계산하지 않습니다.이 코드는 Vuex 상태(state)에 있는 userInfo를 가져와 컴포넌트에서 사용할 수 있는 반응형 속성으로 제공합니다.즉, this.userInfo를 통해 userInfo에 접근할 수 있습니다.2. watch 속성역할:특정 반응형 데이터가 변경될 때 **부작용(side effect)**을 수행합니다.주로 데이터 변경 시 즉각적인 작업(예: API 호출, 추가 데이터 처리 등)에 사용됩니다.userInfo 속성이 변경될 때 upd..

Vuex란?Vuex는 Vue.js 애플리케이션에서 상태(state) 관리를 위한 라이브러리입니다. Vue 애플리케이션에서 중앙 집중식 상태 관리를 제공하여 컴포넌트 간 데이터 공유와 상태 관리를 효율적으로 처리할 수 있습니다. Vuex는 단방향 데이터 흐름(one-way data flow)을 따르며, 애플리케이션의 상태를 예측 가능하게 관리할 수 있도록 설계되었습니다.Vuex의 주요 기능중앙 집중식 상태 관리 (Centralized State Management)Vuex는 애플리케이션의 상태를 중앙에서 관리합니다. 상태는 모든 컴포넌트에서 접근 가능하며, 상태 변경은 통합된 방식으로 처리됩니다.Vue의 반응성 활용 (Reactivity)Vuex의 상태는 Vue의 반응성 시스템을 기반으로 하므로 상태가 변..

Vue Devtools는 Vue.js 애플리케이션을 디버깅하고 개발 과정을 더 편리하게 만들기 위해 제공되는 브라우저 확장 프로그램입니다. Vue.js를 사용한 애플리케이션의 상태, 컴포넌트 계층 구조, 반응형 데이터 등을 실시간으로 확인하고 조작할 수 있도록 도와줍니다.주요 기능컴포넌트 트리 탐색Vue 애플리케이션의 컴포넌트 계층 구조를 시각적으로 탐색할 수 있습니다.각 컴포넌트의 props, data, computed, methods 등의 상태를 확인하거나 수정할 수 있습니다.반응형 데이터 실시간 확인컴포넌트에서 사용하는 상태(예: data, props)와 반응형 데이터를 실시간으로 확인하고, 값을 직접 수정하여 애플리케이션이 즉시 반응하는지 테스트할 수 있습니다.Vuex 상태 관리 디버깅Vuex를 ..

Vue.js에서 .env 파일을 사용하는 이유는 환경 변수(environment variables)를 관리하기 위함입니다. .env 파일을 사용하면 프로젝트의 설정을 환경에 맞게 변경할 수 있고, 이를 통해 코드베이스에서 중요한 정보를 숨기거나 다양한 환경에서의 설정을 쉽게 다룰 수 있습니다.환경 분리: 개발, 테스트, 운영 환경에서 각각 다른 설정을 사용해야 할 때 유용합니다. 예를 들어, API 서버 URL이나 인증 키를 환경에 따라 다르게 설정할 수 있습니다..env.development, .env.production, .env.local 등을 사용하여 각 환경에 맞는 설정을 지정합니다.보안: API 키나 데이터베이스 비밀번호와 같은 민감한 정보를 코드에 하드코딩하지 않고 .env 파일에 저장함으로..

컨트롤러에서"안녕하세요! 어떻게 도와드릴까요?"  프론트로 이렇게 데이터를 보내주었는데  ?????! ????? ?????? 에 데이터로 받아지는 것을 확인했다. 디버깅를 보니.17:06:44.161 [http-bio-8081-exec-6] DEBUG o.s.w.s.m.m.a.HttpEntityMethodProcessor - Written [안녕하세요! 어떻게 도와드릴까요?] as "text/plain;charset=ISO-8859-1" using [org.springframework.http.converter.StringHttpMessageConverter@59e13ea] 17:06:44.161 [http-bio-8081-exec-6] DEBUG o.s.web.servlet.DispatcherServl..