vue.js 에서 axios를 이용하여 백단에게 데이터를 넘겨주었다면 백엔드에서는 해당 값들을 이용하여 카카오톡 서버와 통신하여 값을 주고받는 일을 한다. [컨트롤러] package com.example.demo.kakaologin; import java.util.HashMap; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PathVariable..

이클립스에서 백단으로 사용하는 spring과 비쥬얼 스튜디오에서 프론트로 사용하는 vue를 이클립스로 연동하는 방법에 대해 알아보자. 보통은 이렇게 두개의 개발도구를 이용해 동시에 다른 서버를 이용하여 웹페이지를 구현 하는게 정석이지만 만약에 내가 진짜로 서버에 해당 페이지를 올리고 싶다면 함께 넣어 놓는 것이 편리하고 + 어떤 거래처에서 프론트와 백까지 한번에 개발해 달라고 할 수 있기 때문에 연동하는 방법을 알아 두는 것이 좋다고 한다. 첫 번째 vscode에서 생성한 프로젝트의 제일 하단에 보면 vue.config,js 를 클릭한다. 두 번째 아래의 코드를 작성해준다. ● outputDir은 뷰의 입장에서 이클립스의 resources/static 폴더까지 가는 경로를 작성해준다. 예를 들어, 나는 ..

Class 시작 전 작성 할 Annotation @RestController : 기존 Controller 에서 Rest를 붙여줘서 RestController 임을 알려준다. @CrossOrigin(Origins =" * ") : CrossOrigin 어노테이션은 여러 Properties를 가지고 있다. 그 중, origins는 허용할 도메인을 나타낸다. CrossOrigin 어노테이션에 대한 글이니까 참조! REST API CrossOrigin Annotation 간단 정리 Front와 Back 으로 나눠서 개발을 진행 하는 수업을 하였다. 근데 말입니다? 코드가 틀린 곳이 없는데 자꾸 에러가 뜨는거에요? 자꾸 CORS가 어쩌고 저쩌고, CrossOrigin이 어쩌고 저쩌고 이런 말이 개발 henniee..

REST API 를 알아보기 전에 REST가 무엇인지 먼저 알아보자. REST(Representational State Transfer) 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미한다. URI를 통해 자원을 명시하고, Method (POST, GET, PUT, DELETE, PATHCH..)를 통해 자원에대한 CRUD 연산을 적용하는 것이다. REST API REST의 원리를 따르는 API를 의미한다. 하지만 REST API를 올바르게 설계하기 위해서는 지켜야 하는 몇가지 규칙이 있다. REST API 설계 예시 1. URI는 동사보다는 명사를, 대문자보다는 소문자를 사용한다 ⛔️ : http://localhost:xxxx/MEMOS 👍 : http://localhost:xxx..