수강이 제한됩니다.
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결웹 게임을 만들며 배우는 자바스크립트
지뢰찾기 에러 관련 질문!
옆칸의 parentNode 결과값이 undefined로 뜨는데 왜그런지 궁금해요 .. 그리고 저는 옆칸.click(); 도 실행할 수 없다고 뜨는데 ㅜㅜ 모르겠습니다 .. ㅜㅜ
- 미해결웹 게임을 만들며 배우는 자바스크립트
리팩토링에 관한 질문입니다.
안녕하세요 제로초님 지뢰찾기가 어려워서 쭉 복습중인데, 드디어 조금 갈피가 잡혀서 기쁩니다. 좋은 강의 감사합니다! 수업시간에 따라한 코드리팩토링을 시도해보았어요. 그런데 이벤트단위로 쪼개서 리팩토링을 하는 게 좋을지, 아니면 세세하게 쪼개서 함수로 만들지 고민이 되어요. 질문 어떤 식이 다시 봤을 때 이해하기 쉬울까요? 시도한 리팩토링은 괜찮나요? var tbody = document.querySelector('#table tbody'); var dataset = []; var 중단플래그 = false; var 열은칸 = 0; var 코드표 = { 연칸: -1, 물음표: -2, 깃발: -3, 깃발지뢰: -4, 물음표지뢰: -5, 지뢰: 1, 보통칸: 0 }; var 줄; var 칸; var 주변; function 지뢰위치() { var 칸채우기 = Array(hor * ver).fill().map(function (인덱스) { //가로 * 세로 return 인덱스; }); //자바스크립트는 0부터 센다 var 지뢰만들기 = []; while (칸채우기.length > hor * ver - mine) { var 지뢰배치표 = 칸채우기.splice(Math.floor(Math.random() * 칸채우기.length), 1)[0]; 지뢰만들기.push(지뢰배치표); } }; function 깃발법칙() { if (e.currentTarget.textContent === '' || e.currentTarget.textContent === 'X') { //빈칸이거나 X일 때 e.currentTarget.textContent = '!'; //깃발과 물음표는 데이터일 필요가 없다. 화면에 표시하는 용도니까 e.currentTarget.classList.add('flag'); if (dataset[줄][칸] = 코드표.지뢰) { dataset[줄][칸] = 코드표.깃발지뢰; } else { dataset[줄][칸] = 코드표.깃발; } } else if (e.currentTarget.textContent === '!') { //느낌표라면 e.currentTarget.textContent = '?'; //우클릭 한 번은 느낌표, 두 번은 물음표 e.currentTarget.classList.remove('flag'); e.currentTarget.classList.add('question'); if (dataset[줄][칸] = 코드표.깃발지뢰) { dataset[줄][칸] = 코드표.물음표지뢰; } else { dataset[줄][칸] = 코드표.물음표; } } else if (e.currentTarget.textContent === '?') { //물음표라면 e.currentTarget.classList.remove('question'); if (dataset[줄][칸] === 코드표.물음표지뢰) { e.currentTarget.textContent = 'X'; dataset[줄][칸] = 코드표.지뢰; } else { e.currentTarget.textContent = ''; dataset[줄][칸] = 코드표.보통칸; } } }; function 오픈법칙() { dataset[줄][칸] = 1; //배열 안에 숫자를 넣자(기본설정 = 0) var 주변 = [dataset[줄][칸-1], dataset[줄][칸+1]]; //왼쪽, 오른쪽 확인 if (dataset[줄-1]) { //윗줄 검사 주변 = 주변.concat([dataset[줄-1][칸-1], dataset[줄-1][칸], dataset[줄-1][칸+1]]); } else if (dataset[줄+1]) { //아랫줄 검사 주변 = 주변.concat([dataset[줄+1][칸-1], dataset[줄+1][칸], dataset[줄+1][칸+1]]); } var 주변확인 = 주변.filter(function(v) { return [코드표.지뢰, 코드표.깃발지뢰, 코드표.물음표지뢰].includes(v); //모든 지뢰를 세자 } }; function 주변법칙() { if (주변확인 === 0) { console.log('주변을 엽니다'); var 주변칸 = []; if (tbody.childre[줄-1]) { 주변칸 = 주변칸.concat([ tbdoy.children[줄-1].children[칸-1], tbdoy.children[줄-1].children[칸], tbdoy.children[줄-1].children[칸+1] ]); if (tbody.childre[줄-1]) { 주변칸 = 주변칸.concat([ tbdoy.children[줄].children[칸-1], tbdoy.children[줄].children[칸+1] ]); if (tbody.childre[줄-1]) { 주변칸 = 주변칸.concat([ tbdoy.children[줄+1].children[칸-1], tbdoy.children[줄+1].children[칸], tbdoy.children[줄+1].children[칸+1] ]); } //열려있는 칸을 또 열릴 필요없게 수습하자 dataset[줄][칸] = 1; //배열 안에 숫자를 넣자(기본설정 = 0) 주변칸.filter(function(v) {return !!v}).forEach(function(옆칸) { //칸 위치 파악 var 부모tbody = e.currentTarget.parentNode.parentNode; var 부모tr = e.currentTarget.parentNode; //몇 줄? var 옆칸줄 = Array.prototype.indexOf.call(부모tbody.children, 부모tr); var 옆칸칸 = Array.prototype.indexOf.call(부모tr.children, e.currentTarget); //e.currentTarget = td if (dataset[옆칸줄][옆칸칸] !== 코드표.연칸) { 옆칸.click(); } }); } } //지뢰를 제외한 모든 칸이 열리면 승리함 if (열은칸 === hor * ver - mine) { document.querySelector('#result').textContent = '승리하셨습니다~!'; } } }; function 지뢰만드는규칙() { for (var k = 0; k < 지뢰만들기.length; k++) { //배열은 0부터 시작하기에 -1이 나와선 안 된다 var 세로 = Math.floor(지뢰만들기[k] / ver); var 가로 = 지뢰만들기[k] % ver; tbody.children[세로].children[가로].textContent = 'X'; //지뢰를 심는다, 화면 dataset[세로][가로] = 코드표.지뢰; //데이터, 화면과 데이터는 일치해야 됨! } }; //지뢰찾기 실행 document.querySelector('#exec').addEventListener('click', function() { //이전 게임 초기화 tbody.innerHTML = ''; document.querySelector('#result').textContent = ''; dataset = []; 열은칸 = 0; 중단플래그 = false; //input의 아이디들 var hor = parseInt(document.querySelector('#hor').value); var ver = parseInt(document.querySelector('#ver').value); var mine = parseInt(document.querySelector('#mine').value); //지뢰위치 지뢰위치(); //지뢰테이블 for (var i = 0; i < ver; i += 1) { //2차원 배열, 세로 만들기 var arr = []; //지뢰표에 배열을 깔자 var tr = document.createElement('tr'); dataset.push(arr); for (var j = 0; j < hor; j += 1) { //가로 만들기 arr.push(코드표.보통칸); var td = document.createElement('td'); //오른쪽 클릭방지 td.addEventListener('contextmenu', function(e) { e.preventDefault(); if (중단플래그) { return; } //칸 위치 파악 var 부모tbody = e.currentTarget.parentNode.parentNode; var 부모tr = e.currentTarget.parentNode; //몇 줄? 줄 = Array.prototype.indexOf.call(부모tbody.children, 부모tr); //배열이 아니여도 indexOf()를 쓸 수 있다 칸 = Array.prototype.indexOf.call(부모tr.children, e.currentTarget); //e.currentTarget = td //깃발법칙 깃발법칙(); ); //클릭 시, 주변 지뢰 파악 td.addEventListener('click', function(e) { if (중단플래그) { return; } //칸 위치 파악 var 부모tbody = e.currentTarget.parentNode.parentNode; var 부모tr = e.currentTarget.parentNode; //몇 줄? 줄 = Array.prototype.indexOf.call(부모tbody.children, 부모tr); //배열이 아니여도 indexOf()를 쓸 수 있다 칸 = Array.prototype.indexOf.call(부모tr.children, e.currentTarget); //e.currentTarget = td if ([코드표.연칸, 코드표.깃발, 코드표.깃발지뢰, 코드표.물음표지뢰, 코드표.물음표].includes(dataset[줄][칸])) { return; } //지뢰의 유무확인 e.currentTarget.classList.add('opend'); 열은칸 += 1; if (dataset[줄][칸] === 코드표.지뢰) { e.currentTarget.textContent = '펑'; document.querySelector('#result').textContent = '다시 도전하세요!'; 중단플래그 = true; } else { //지뢰가 없다면 dataset[줄][칸] = 1; //배열 안에 숫자를 넣자(기본설정 = 0) 주변 = [dataset[줄][칸-1], dataset[줄][칸+1]]; //왼쪽, 오른쪽 확인 오픈법칙().length; e.currentTarget.textContent = 주변확인 || ''; //숫자 0은 표시가 되지 않도록! dataset[줄][칸] = 코드표.연칸; //지뢰없는 부분을 한꺼번에 열리도록 만들자 주변법칙(); ); tr.appendChild(td); //td는 tr에 속하고 } tbody.appendChild(tr); //tr은 tbody에 속한다 } //지뢰 심기: 규칙을 찾아서 랜덤숫자의 위치에 지뢰를 배치시키자 지뢰만드는규칙(); });
- 해결됨웹 게임을 만들며 배우는 자바스크립트
Array/Object spread
안녕하세요! 강의 유용하게 잘 듣고 있는 수강생입니다. ES6 문법 설명해주시면서 spread array에 대해 설명해주셨는데요, [...Array(10).keys().map((v) => v+1)] 이 부분이 계속 에러가 떠서요. 이런식으로 했을때는 되더라구요. 혹시 오타가 아닌가 조심스럽게 여쭤봅니다. 답변 기다리고있겠습니다!
- 웹 게임을 만들며 배우는 자바스크립트
변수에 담긴정보
삭제된 글입니다
- 미해결웹 게임을 만들며 배우는 자바스크립트
지뢰찾기게임에서 Math.random() 질문
안녕하세요 제로초 강사님! 지뢰찾기 부분을 수강하다가 버그가 발생해서 질문을 드립니다! hor, ver 를 10으로 설정하고 Math.floor(Math.random()*후보군.length)를 하면 후보군.length가 100이기 때문에 0이상 100미만의 값이 나와야 정상이지만 console.log(셔플)를 입력하면 이렇게 100 숫자가 나와서 게임이 올바르게 작동하지 않고 있습니다ㅜㅜ 제가 Math.random()함수에 대한 이해가 잘 못된건가요?ㅜㅜ
- 미해결웹 게임을 만들며 배우는 자바스크립트
질문있습니다!
'이미지좌표' 변수는 setInterval 안에서만 그 속성이 동작하는걸로 이해 했는데요 이벤트리스너에서 컴퓨터의선택(이미지좌표) 인자는 setInterval 밖인데, 동작하는게 이해가 잘안가네요
- 해결됨웹 게임을 만들며 배우는 자바스크립트
console.log 로 검사하는데 안되는이유 알려주세요
밑에 console.log 부분에서 변수이름을 넣으면 빈괄호가 뜨고, 옆에처럼 풀어서 쓰면 배열값이 잘 나오는데 이유가 뭘까요..?
- 해결됨웹 게임을 만들며 배우는 자바스크립트
질문 다시 드립니다!
저런식으로 따옴표는 쓰든 안쓰든 잘되고,숫자는 점을 이용해서 사용할수 없는것이 이유가 궁금합니다강의 잘보고 있습니다 감사합니다
- 미해결웹 게임을 만들며 배우는 자바스크립트
배열같은 객체
배열같은 객체 만들때 속성을 숫자로 입력하였을때 [] 를 사용하는데, 궁금해서 해봤는데 숫자로 하면 점은 사용이 안되네요 또 대괄호 안에 ex ' 숫자 ' 따옴표를 해도 출력이 되고 안해도 되는데 무슨 차이 인가요? 너무 깊은이유라면 답변안해 주셔도됩니다.
- 미해결웹 게임을 만들며 배우는 자바스크립트
foreach에 대해서 질문이 있어요
강의에서 나온 foreach가 정확히 어떻게 작동하는건지가 이해가 잘 안되서요. 다른 사이트들에서도 검색해 봤는데 오히려 어려운 말들이 많아서 이해가 안되요... 좀 쉽게 foreach에 대해서 알려주세요.
- 미해결웹 게임을 만들며 배우는 자바스크립트
안녕하세요 강사님
제로초님 안녕하세요, 유튜브에서 보다 인프런으로 넘어왔습니다. 첫 질문입니다 제게 도움을 선사해주세요... Atom으로 따라했어요, 잘 따라하다가, *의 앞 부분에 공백 추가하는 것이 잘 되지 않아서요.. 어떻게 수정을 해야할까요? 어서 해결하고 숙제도 풀어보고 싶어요 <h1>더 어려운 반복문</h1> <script> for (var star = 5; star >= 1; star -= 1) { document.write(' '.repeat(5-star) + '*'.repeat(star)+'<br>') } </script> <!-- 규칙이 가장 중요하니 반드시 찾는 연습을 해라 --> <h1>더더 어려운 반복문</h1> <script> for (var star = 9; star >= 1; star -= 2) { document.write(' '.repeat((9 - star)/2) + '*'.repeat(star)+'<br>') }
- 미해결웹 게임을 만들며 배우는 자바스크립트
가위바위보 질문 있습니다
var btn=document.getElementsByClassName('btn'); for(var i=0; i<btn.length; i++){ btn[i].addEventListener('click',function(e){ console.log(this); //console.log(btn[i]); }); } //이 코드에서 console.log(this)를 하면 개발자도구에 //태그가 잘 표시됩니다. 그런데 //console.log(btn[i])를 쓰면 undefined가 뜨는데 //여기서 undefined가 뜨는 이유를 모르겠습니다 ㅜㅜ
- 해결됨웹 게임을 만들며 배우는 자바스크립트
자바스크립트는 동기? 비동기 ?
문득 강의를 듣다 궁금해졌습니다.구글링을 해보긴 했는데 기본적으로 자바스크립트는 동기적 언어라고 하더군요.간혹 비동기적 언어라고 오해하는 경우도 있던데 , 콜백이나 프로미스, async / await 등 비동기 처리에 대한 특징들이 많아서 그럴까요?
- 미해결웹 게임을 만들며 배우는 자바스크립트
focus(),value()
저 두 메소드 무슨의미죠?
- 미해결웹 게임을 만들며 배우는 자바스크립트
로또 만들기 배열 map 메서드
forEach문으로 map을 구현했는데 이게 어떤면에서 억지스러운 것인지 궁급합니다!
- 미해결웹 게임을 만들며 배우는 자바스크립트
짝맞추기게임 관련
짝맞추기 게임 작성 중입니다! 강의 내용 중 카드들이 크롬창이 움직이는 것과 상관없이 크기가 일정하게 멈춰있는 것은 div 태그로 묶으면 된다고 하셨는데 div태그로 묶는 방법과 따로 맞춘 카드 갯수가 점수로 나타내는 방법을 알 수 있을까요?
- 미해결웹 게임을 만들며 배우는 자바스크립트
콘솔에 대해서 질문 있어요.
콘솔에서 console.log[몇줄][몇칸]을 하면 에러가 뜨는데 이유가 뭔가요?
- 미해결웹 게임을 만들며 배우는 자바스크립트
혹시 회색박스에 있는 텍스트는 어떻게 적용하나요?
일단 코드들 따라쳐보면서 맛좀 보고있는중입니다 근데 forEach(callbackfn: ) 같은경우나 첫줄같은데에서 element: 같은 회색박스를 어떻게 작성해야되는지 모르겠어요ㅠㅠ Callbackfn: 를 치면 , 쉼표로 바꾸라고 에러가 나오던데 그러면 html 화면에 적용이 안되더라구요ㅠㅠ 너무 초보적인 질문이라 죄송합니다ㅠ
- 해결됨웹 게임을 만들며 배우는 자바스크립트
그럼 target 은 어떻게 사용해야 적절할까요?
<div>button*100 </div> 라치고 for 문 돌려서 100개나 되는 button 각각 하나마다 이벤트리스너를 달아주는게 좋아보이진 않는데요. ========== 검색을 해보니 부모 div 하나에다가만 이벤트리스너 달아주고 이벤트 버블링으로 처리하는 방법도 있다 라고 소개가 되어있더라구요. (e.target 으로요) ========== 1. 실무에서는 주로 어떠한 방식으로 사용하나요? 2. 버블링으로 한다치면 e.target 들을 어떠한 방식으로 구별하나요? (e.target.className 으로 하기엔 class 를 100개 다 다르게 작성해야하구...) ======== 이하는 제가 작성해본 예시입니다. (moveEvent 함수는 생략하겠습니다.) <div class="area_slide_arrow"> <button type="button" class="btn_left">왼쪽</button> <button type="button" class="btn_right">오른쪽</button> </div> const elBtn = document.querySelector(".area_slide_arrow"); elBtn.addEventListener("click", (e) => { if(e.target.className === "btn_left") { index--; moveEvent(); } else if(e.target.className === "btn_right") { index++; moveEvent(); } })
- 해결됨웹 게임을 만들며 배우는 자바스크립트
11:33 Array.prototype.indexOf.call(객체?, 인수?) 사용법
querySelectorAll 로 유사배열인 NodeList 를 가져와서 배열전용 메서드를 사용할때 타입이 달라서 오류가 발생하므로 > Array.prototype.indexOf.call ~~~~ 방식으로 사용할 수 있게끔 하는것 같은데요. ========== 유사배열(querySelectorAll)을 배열 메서드로 가공하는 경우가 많을거 같은데, 매번 저렇게 처리를 해야하나요??? 뭔가 좀더 개선할 수 있어 보이는데 실무에서는 어떠한 방식으로 사용하나요?