[Springboot] 22 댓글 등록 ( 디버깅 하는 방법 )

• form 태그는 부분 리로드를 할 수 없으니 form 태그로 요청하지 않을 것이다. → 기존 속성들을 지운다. 이제 name도 필요없음

• 자바스크립트에서는 태그를 id로 찾으니까 name → id 로 바꿔줌.

• button의 타입은 submit으로 하면 리로드 되니까 button으로 바꿔준다.

1. Input type hidden

2. data-set

1. 데이터 저장하기: data() 메소드를 사용해 특정 데이터 키와 값을 설정할 수 있습니다.

2. 데이터 가져오기: data() 메소드를 사용해 요소에 저장된 데이터를 가져올 수 있습니다.

javascript


// 특정 요소에 데이터를 저장하는 방법
$('#myElement').data('key', 'value');

javascript


// 특정 요소에서 데이터를 가져오는 방법
var value = $('#myElement').data('key');
console.log(value); // 'value'

javascript


$('#myElement').data({
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
});

html


<div id="myElement" data-key="initialValue"></div>
javascript

// 이미 HTML에 정의된 data-* 속성을 가져올 수 있습니다.
var value = $('#myElement').data('key');
console.log(value); // 'initialValue'

javascript


$('#myElement').removeData('key');

html


<div id="myElement"></div>
javascript

// 데이터를 저장하는 방법
var element = document.getElementById('myElement');
element.setAttribute('data-key', 'value');

javascript


// 데이터를 가져오는 방법
var value = element.getAttribute('data-key');
console.log(value); // 'value'

javascript


// dataset을 사용하여 데이터 저장하기
element.dataset.key = 'value';

javascript


// dataset을 사용하여 데이터 가져오기
var value = element.dataset.key;
console.log(value); // 'value'

html


<div id="myElement" data-key1="value1" data-key2="value2"></div>
javascript

// dataset을 사용하여 여러 데이터 접근
var element = document.getElementById('myElement');

console.log(element.dataset.key1); // 'value1'
console.log(element.dataset.key2); // 'value2'

// 데이터를 수정하기
element.dataset.key1 = 'newValue1';
console.log(element.dataset.key1); // 'newValue1'

javascript


// 데이터 제거하기
element.removeAttribute('data-key');

• 데이터를 저장할 때는 setAttribute() 또는 dataset을 사용합니다.

• 데이터를 가져올 때는 getAttribute() 또는 dataset을 사용합니다.

• 데이터를 제거할 때는 removeAttribute()를 사용합니다.

1. 사이사이에 1, 2, 3 숫자 넣어서 실행되는지 확인하기

1. IDE 디버깅 모드로 디버깅 하기

• invoke 호출하다.