Error Mesage [Vue warn]: Error in v-on handler (Promise/async): "AxiosError: Request failed with status code 400" Vue로 구현한 페이지에서 기존에 등록되어있던 데이터 정보를 수정해서 서버로부터 저장해 달라는 요청을 했는데, 이러한 에러 메세지가 떴다. 수정 요청은 axios를 사용했는데 에러 메세지에 보이는 것과 같이 axios 요청하는데 무슨 에러가 생긴 것임. 디버깅 과정 우선 프론트와 백 어디서 에러가 나는 것인지 먼저 확인을 했는데, 서버에선 아예 요청 자체가 들어오지 않는다는 것을 확인함. 컨트롤러에서 요청이 들어오면 console창에 해당 로그가 뜨도록 해놨는데 서버에서는 아무 반응이 없었음. 그래서 V..

오늘 Vue - Spring - jpa를 모두 연결해봤는데 앞으로 Spring에서 쓰일 구조들을 정리해보았다. 우선, Spring에서 크게 4가지 구조로 나눠서 개발을 할 수 있는데 controller & entity & repository & service 이렇게 4가지로 나눌 수 있다. DDD(Domain Driven Design) 도메인 주도 설계로 한다면 구조를 조금 바꾸긴 해야 하지만 우선은 이 정도 구조로 개발해도 된다고 한다. controller URL 맵핑 기능 Vue에서 요청 온 것들을 컨트롤러에서 관리할 수도 있고, URL을 맵핑시켜 아래와 같이 요청 들어온 기능들을 실행시킬 수 있다. ⭐entity 핵심 업무 규칙 사실 이 구조들 중에서 가장 중요한 역할을 하는 게 엔티티라고 보면 됨..

우선 GET과 POST 모두 HTTP 프로토콜을 이용해서 서버에 무언가를 전달할 때 사용하는 방식이다. GET HTTP 프로토콜의 default 방식 URL 입력을 통해 데이터를 요청하는 방식 URL에 값이 따라붙기 때문에 길이 제한에 있어 많은 양의 데이터를 보내기 어려움 주소창(URL )에 전달하려는 정보가 보임 (그렇기 때문에 로그인 같은 기능에서는 절대 사용하면 안 됨) 가져오는 것 (서버에서 어떤 데이터를 가져와서 보여주는 용도, 서버의 값이나 상태 변경 X) POST json 데이터를 전송하려는 목적으로 사용 많은 양의 데이터를 보내기에 적합함 전달하려는 정보가 웹 브라우저 사용자의 눈에 보이지 않음 전송할 데이터를 HTTP 메시지의 Body 태그 안에 담아 전송 수행하는 것 (서버의 값이나 ..

사실 이 부분에 대해서 꽤 많은 시간을 들여 고민하고, 해결방법을 찾으려고 했던 것 같다. 근데 계속 한 부분에 꽂혀서 다른 관점으로 바라보지 못했던 것이 있다. 현재 웹에서 RPG 게임의 기능을 구현을 하고 있는데, 가지고 있는 경험치로 경험치 상점에서 체력이나, 마력으로 교환을 했을 때 캐릭터 상태정보에 바로 교환엔 체력과 마력이 올라가는 것을 확인하고 싶었는데 이것을 계속 캐릭터 상태 정보가 변동 사항이 있을 때 자동으로 업데이트되는 것만 생각을 했다. 하지만, 조금만 나아서 생각해보면 경험치 상점에서 교환이 일어났을 때 캐릭터 상태 정보가 업데이트가 되면 되는 것이다. 즉, Vue에서 Spring 서버로 경험치 교환으로 인한 액션 요청이 들어갈 때, 캐릭터 상태 정보 업데이트 요청도 같이 들어가면..

연동하기 전 준비 Spring 1) spring-controller에 vue 패키지 따로 만든 후 클래스 생성해준다. Vue 1) vue - store에 패키지 아래 이미지와 같이 클래스들 만든다. (거의 이 형식 그대로 유지하면서 사용한다고 함) 2) view 패키지에도 클래스 하나 생성 3) cmd창에서 axios 인스톨하기. vue 프로젝트 폴더로 이동한 후에 npm install axios --save-dev 입력 입력 후 엔터 치면 설치완료! 연동하기 우선 테스트로 눌러봐! 라는 버튼을 누르면 밑에 랜덤한 숫자를 나타내는 동작을 구현했다. 이번 페이지에서는 연동할 때 들어가는 코드들의 전체적인 흐름을 설명하고, 생소한 것들 중에 디테일한 풀이들은 따로 새로운 글로 풀이를 해보려고 한다. vue와..

Vue란? vue는 자바스크립트의 프레임워크다. 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈소스 프로그레시브. 자바스크립트 라이브러리를 사용하는 웹,앱 프로젝트에 Vue.js를 도입하기 쉽게 설계되어 있는데, 이는 Vue.js가 점진적으로 채택할 수 있게 설계되어 있기 때문이다. Vue.js는 고성능의 싱글 페이지 애플리케이션(SPA)을 구축하는데 이용가능하다. 또한, vue는 HTML, CSS 및 JavaScript에 대한 중간 수준의 지식을 전제로 하고 있다.그렇기 때문에 위 항목들의 기본을 파악한 다음에 사용하는 것이 좋다. 한글 공식 문서 시작하기 | Vue.js 시작하기 NOTE 이미 Vue 2를 알고 있고 Vue 3의 새로운 점을 배우고 싶으신가요? Migration Gui..