[TIL] FormData, data-*

 

💡 사용한 폰트는 둥근모꼴이며, 전체적인 디자인 컨셉은 디자이너 길형진님 블로그의 둥근모꼴 소개 게시글에서 따왔다. 해당 게시글은 둥근모꼴 폰트를 Fixedsys 폰트와 결합하고 다듬어서 퍼블릭 도메인 라이센스로 배포한 페이지이다.

 

---

FormData

• FormData 는 브라우저에 내장된 API로 HTML 폼 데이터를 쉽게 처리하고 전송할 수 있는 객체이다.
• new 키워드는 자바스크립트 객체의 새로운 인스턴스를 생성할 때 사용된다. 생성자 함수를 호출할 때 new 키워드를 사용하면 해당 함수가 생성자로 동작하며 새로운 빈 객체가 반환된다. 이렇게 생성한 FormData 객체의 다양한 메서드를 활용하여 폼 데이터에 대한 작업들을 처리할 수 있다.
  • ex. 폼 데이터 수집, 파일 업로드, AJAX 요청 시 데이터 전송 등

<form>
  <div class="form-control">
    <label for="playername">플레이어 이름</label>
    <input type="text" name="playername" id="playername" autocomplete="off" />
  </div>
  <div>
    <button type="button" class="btn btn-alt" id="cancel-config-btn">취소</button>
    <button type="submit" class="btn">확인</button>
  </div>
</form>

const formElement = document.querySelector('form');
formElement.addEventListener('submit', savePlayerConfig);

// form을 submit할 때의 콜백함수
function savePlayerConfig(e) {
  e.preventDefault();
  const formData = new FormData(e.target);
  const enteredPlayername = formData.get('playername').trim();
  console.log(enteredPlayername);
}

• 발생한 이벤트 객체에 들어있는 target 속성을 FormData에 값으로 전달할 수 있다.
  • 폼을 전달하면 자바스크립트가 이 폼을 분석해서 name 속성이 폼 내의 요소를 탐색한다. name 속성의 속성값을 사용하여 FormData의 데이터를 식별할 수 있다.

 

id 속성과 name 속성

id 속성

• HTML 문서 내에서 각 요소들에 대한 고유한 식별자이다. 동일한 문서 내에서 id는 중복될 수 없다.
• 주로 css 스타일링이나 자바스크립트의 특정 요소를 선택하고 조작할 때 사용된다.

<div id="uniqueId">This is a unique element.</div>

 

name 속성

• 특히 폼 요소에서 서버로 데이터를 전송할 때 사용되며, 서버에서는 이 name 속성값을 통해 해당 데이터를 식별한다.
• 폼 안에서는 중복될 수 있다. 하나의 폼 안에서 여러 요소가 동일한 name을 갖고 있을 수 있다.
• 폼 데이터를 서버에 전송할 때, 특히 라디오 버튼이나 체크박스 등 그룹으로 묶인 요소에서 사용된다.

<input type="text" name="username">
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

 

 

 

---

submit 데이터 저장 및 반영: data-*

• data-* 전역 특성은 사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성함으로써 임의의 데이터를 스크립트로 HTML과 DOM 사이에서 교환할 수 있는 방법이다.
• data-* 로 설정해 준 데이터는 dataset 속성으로 사용할 수 있다.

<button id="edit-player-1-btn" data-playerid="1">
  플레이어 1의 수정버튼
</button>
<button id="edit-player-2-btn" data-playerid="2">
  플레이어 2의 수정버튼
</button>

// 플레이어 1의 수정버튼
const editPlayer1BtnElement = document.getElementById('edit-player-1-btn');
// 플레이어 2의 수정버튼
const editPlayer2BtnElement = document.getElementById('edit-player-2-btn');

editPlayer1BtnElement.addEventListener('click', openPlayerConfig);
editPlayer2BtnElement.addEventListener('click', openPlayerConfig);

let editedPlayer = 0;

const players = [
  {
    name: '',
    symbol: 'X',
  },
  {
    name: '',
    symbol: 'O',
  },
];

function openPlayerConfig(e) {
  editedPlayer = e.target.dataset.playerid; // dataset 사용
  playerConfigOverlayElement.style.display = 'block';
  backdropElement.style.display = 'block';
};

function savePlayerConfig(e) {
  e.preventDefault();
  const formData = new FormData(e.target);
  const enteredPlayername = formData.get('playername').trim(); // '     ' => ''

  if (!enteredPlayername) { // enteredPlayername === ''
    e.target.firstElementChild.classList.add('error');
    errorsOutputElement.textContent = '이름을 입력해주세요!';
    return; // return 반환 시 아래의 코드가 실행되지 않고 여기서 함수의 실행이 중단됨
  }

  const updatedPlayerDataElement = document.getElementById(`player-${editedPlayer}-data`)
  updatedPlayerDataElement.children[1].textContent = enteredPlayername;

  players[editedPlayer - 1].name = enteredPlayername;

  closePlayerConfig();
}

• html 파일에서 각 버튼에 data-playerid 값을 설정한 뒤 자바스크립트로 버튼에 이벤트리스너 콜백함수에서 e.target.dataset으로 playerid 값을 확인할 수 있다.
• e.target.dataset.playerid 또는 e.target.dataset['playerid']로 value만 꺼내서 사용할 수도 있다.