23년 10월 05일 Javascript-2) CreateElement, list배열

구구단 만들기

// html

<input id="num" type="text">
<input type="button" value="구구단" onclick="cal()">

<h1 id="result1"></h1>
<h1 id="result2"></h1>
<h1 id="result3"></h1>
<h1 id="result4"></h1>
<h1 id="result5"></h1>
<h1 id="result6"></h1>
<h1 id="result7"></h1>
<h1 id="result8"></h1>
<h1 id="result9"></h1>

// javascript

function cal () {
    var num = parseInt(document.getElementById("num").value)
	var result = num * (index+1)
	document.getElementById("result" + (index+1)).innerHTML = result
}

위 방식의 한계는 

구구단이 아니라 더 큰 숫자까지 만들고 싶으면 html을 하나하나 다시 뜯어고쳐야한다는 점이다.

 

// html

<input id="num" type="text">
<input type="button" value="구구단" onclick="cal()">

<div id="box">
</div>

// javascript

function calc () {

	var number = parseInt(document.getElementById('num').value);
    
	for (var index = 0; index < 9; index ++) {
    	var tmp = document.createElement('h1')
        tmp.innerHTML = num * (index + 1);
        document.getElementById('box').appendChild(tmp);
	}
}

이렇게 document.createElement()와 appendChild()를 사용하면

코드 자체도 훨씬 짧고 효율적이며, 추후를 위해서도 좋다!!!!

 

Drag & Drop 이벤트

 

 

 

 

4주차 수업 리뷰

>>

오늘은 프론트엔드 과정 마지막 수업이었다.

for문, CreateElement, 배열과 리스트의 차이 등 모두 이미 대부분 알고 있던 내용들이라 간단하고 가볍게 지나갔다. 

 

오늘도 지난 주차 과제 대한 리뷰로 한 시간을 소요했다.

나는 이번에도 과제를 완전하게 끝내지 못했는데 (기능 구현에 100% 성공하지 못함)

그 이유와 해결방안에 대해 선생님께서 제안해주신 건 top-down 방식으로의 생각이었다.

 

나름 과제를 시작하기 전에 "생각의 흐름"이라고 막 써놓기 했는데

선생님과 함께 돌이켜보니 그냥 기능 나열에 불과했다.

창피쓰...ㅎ

개발자가 해야하는 생각의 흐름과 논리구조 설계란 필요한 기능 나열(은 당연하고)과 더불어

해당 기능을 구현되는 변화 하나하나를 작성해보는 것이다.

 

작은 변화 하나하나까지 체크박스로 나열해서 하나씩 해나가면

기능을 놓쳐서 구현에 실패하는 일은 없을 것이다. 

 

 

그외에도 

1. getElementById를 쓰는 것과 querySelector를 사용하는 것의 차이도 알아보면 좋을 것이다.

인강을 통해 독학으로 개발공부를 시작한 나로서는 유튜브 선생님이 '요즘은 querySelector를 더 많이 써요~' 이 한 마디에 '그냥 편해서' querySelector를 사용하는 게 버릇이 되어버렸는데 

각자를 사용하는 이유는 무엇인지, 장점이 있는지 등을 먼저 알아보는 습관을 가져보면 좋겠다.

 

2. 위와 비슷하게, 자바스크립트에서 addEventListener를 써주는 것과 html 태그에 프로퍼티로서 onclick 등의 이벤트 등록을 해주는 것의 차이도 있었다. 

onclick 옛날, addEventListener 최근 → 인식 못하는 브라우저 있기도 함
addEventListener가 해주는 기능이 더 많음
리액트는 태그에서의 이벤트 등록를 주로 사용함

 

3. 웹에 가해지는 동적인 변화를 의미하는 이벤트에 대한 함수를 짤 때엔

함수명에 Event를 붙이는 게 좋다는 조언을 받았다. 혼자 공부했을 땐 절대 생각지도 못한 부분,, 구웃~

 

4. 지난 주차 과제였던 숫자야구게임을 만들면서 숫자버튼을 만들었는데

cursor: pointer;를 넣어주는 센스.....! 가 부족했다.

당장 눈앞에 보이는 것에만 매몰되지 말고, 내가 이 서비스를 사용하는 유저의 입장에서 바라보는 시간도 간간이 가져보자!