◆ JQuery와 axios를 사용한 form-data와 JSON 데이터 전송 및 Spring에서의 수신 방법
◆ form-data
- form-data 방식의 전송에서 기본 값은 JQuery이다.
- 이 형식은 HTML의 form 태그에서도 사용되는데, key-value 쌍으로 데이터를 보내며 각 쌍은
=으로 구분되고 서로 다른 쌍은&로 구분됩니다. - JQuery 형태 전송을 수신할 수 있는 어노테이션
- @RequestParam, @ModelAttribute @RequestParam은 URL 쿼리 문자열에서 파라미터 값을 추출할 때 사용합니다.@ModelAttribute는 HTTP 요청 본문에 포함된 form-data 형식 데이터를 자바 객체로 매핑할 때 사용합니다.
◆ Json
- JSON 방식의 전송에서 기본값은 axios이다.
@RequestBody은 서버에서 @RequestBody 어노테이션을 사용하여 JSON 형태의 데이터를 수신할 수 있습니다.
- 이 어노테이션을 사용하면 HTTP 요청 본문에 포함된 JSON 데이터를 자바 객체로 매핑할 수 있습니다.
◆ 전개 연산자(Spread operator)
- 자바스크립트에서 배열이나 객체의 요소를 복사하거나 새로운 배열이나 객체를 생성할 때 유용합니다.
- 함수의 인자로 전개 연산자를 사용하여, 함수 호출 시 전달되는 인자들을 배열 형태로 받을 수 있습니다.
◆ 얕은 복사 - 데이터가 공유되면
- 새 개체를 생성하지만 실제 값 자체가 아니라 원래 값에 대한 참조만 복사합니다.
- 원래 개체가 수정되면 복사된 개체도 영향을 받습니다.
◆ 깊은 복사 - 데이터가 분리되면
- 새 개체를 만들고 원본 개체의 모든 값을 새 개체로 복사합니다.
- 새 개체는 원래 개체와 완전히 독립적이며 하나를 변경해도 다른 개체에 영향을 주지 않습니다.
- lodash에서 제공하는 깊은 복사 명령 사용
◆ @RequestBody를 붙일 수 있는 전송 방식
- Spring Framework의 @RequestBody 어노테이션은 HTTP 요청 본문에 포함된 데이터를 자바 객체로 매핑할 때 사용됩니다.
- 따라서 @RequestBody 어노테이션을 사용할 수 있는 HTTP 메서드는 요청 본문을 포함하는 POST(등록), PUT(수정), PATCH(수정) 입니다.
- GET 및 DELETE와 같은 다른 HTTP 메서드에는 일반적으로 요청 본문이 없으므로 @RequestBody를 사용하지 않습니다.
◆ VueJS를 활용한 싱글 페이지 구현
- MVVM 패턴을 기반으로 한 프론트엔드 프레임워크로, 사용자 인터페이스(UI) 렌더링과 상호작용을 담당합니다.
- 동적이고 반응형 웹 애플리케이션을 쉽게 개발할 수 있습니다.
◆ Vue Directive
- Directive는 HTML 태그에 v- 접두사를 사용하여 지정할 수 있는 Vue.js의 기능입니다.
1) v-bind
HTML 속성과 Vue 인스턴스의 데이터를 바인딩하는 데 사용됩니다.
2) v-if
3) v-show
4) v-for
배열 데이터를 반복하며 렌더링하는 데 사용됩니다.
5) v-model
양방향 데이터 바인딩을 구현하는 데 사용됩니다.
◆ Vue Instance
-
Vue Instance는 Vue.js에서 중심이 되는 객체입니다.
1) data
Vue 인스턴스에서 사용할 데이터를 정의하는 데 사용됩니다.
2) computed
data를 기반으로 계산된 값을 반환하는 데 사용됩니다.
3) methods
Vue 인스턴스에서 사용할 메서드를 정의하는 데 사용됩니다.
4) watch
data의 변화를 감시하고 그에 따른 로직을 수행하는 데 사용됩니다.
5) created
6) mounted
7) updated -
Vue.js에서는 또한 서버와 통신하기 위해 axios라이브러리를 사용하여 RESTful API를 호출할 수 있습니다. 이를 통해 백엔드와 통신하여 데이터를 받아 렌더링할 수 있습니다.
- 입력창
<input>에서 한글 사용 가능 코드 공식
v-on:input="pocketmon.name = $event.target.value"
Backend Developer