[Udemy - 100일 코딩 챌린지] 3/4 개발공부일지 (빙고 게임 연습 문제)

<script src="scripts/config.js"></script>
<script src="scripts/game.js"></script>
<script src="scripts/app.js"></script>

html 전체 구성 중 작은 부분의 기능을 구현할 script를 먼저 정의하고

전체에 해당하는 기능을 구현할(앞선 script 에서 정의한 함수를 실행할) script를 나중에 구현한다. 정상 작동!

 

app.js

const playerConfigOverlayElement = document.getElementById('config-overlay');
const backDropElement = document.getElementById('backdrop');

const editPlayer1BtnElement = document.getElementById('eidt-player-1-btn');
const editPlayer2BtnElement = document.getElementById('eidt-player-2-btn');

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

config.js
function openPlayerConfig() {
  
}

config.js 가 먼저 정의되었지만, eventLIstener는 전체 코드 실행 후에 클릭을 통해 실행되기 때문에, config.js에서 선언할 함수에 사용될 변수가 app.js(html head에서 후순위 정의)에 선언되어 있더라고 상관 없음!

 

function savePlayerConfig(event) {
  event.preventDefault();
}

원래 default 설정은 http request를 서버에 보내는 것이나, 지금 연습문제에서는 자바스크랩트 코드내에서 해결하도록 설정 변경

(제출 후 새로고침으로 인한 게임 기록 삭제 방지 등)

 

function savePlayerConfig(event) {
  event.preventDefault();
  const formData = new formData(event.target); 
  //building object by 'new' instanciating object based on an object blueprint
  const enteredPlayername = formData.get('playername');
}

new (...)를(청사진(blueprint)) 통해서 인스턴스(const (...))를 생성한다.

주물(blueprint)과 주물로 완성한 완성본(인스턴스 = const (...)) 1~... 라고 이해하면 될 듯 하다.

https://velog.io/@smj0818/%EA%B0%9D%EC%B2%B4%EC%A7%80%ED%96%A5-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

 

event.target

event: 창에서 일어날 일련의 행위

target: 이벤트를 통해 선택된 대상(element)

const formData = new FormData(evt.target);

여기서 문제가 발생해서 넘어가질 않는다.

예제랑 코드도 똑같은데 실행이 안 돼... 무슨일인 것이냐 ㅜㅜ

오류내용은 이렇다.

Uncaught ReferenceError: Cannot access 'formData' before initialization

at HTMLFormElement.savePlayerConfig (config.js:15:20)

내가 작성한 식은 클래스로 인스턴스를 생성하는 과정이 아닌 변수에 변수를 입력하는 식이었다.

그러니까 initialization이 될 리가 없지.

무튼 자동완성 시, 변수가 아닌 객체 FormData로 선택하여 코드 실행하니

구상한 대로 페이지에서 구현됐다.

 

type 에 따라 이렇게 당혹스러울 수도 있구나.. 느꼈다.

변수, 객체, 매서드, 프로퍼티, 속성.. 잘 확인해서 입력하자!