일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- 깃허브 레포지토리와 로컬 코드 연결하기
- Next.js
- 취준생
- 부트캠프
- 프론트엔드배포
- 맥북백틱
- github
- 디지털하나로입학식
- 유데미
- 버전생성프로세스
- 스나이퍼팩토리
- 네이버로그인창만들기
- 디지털하나로
- 배포
- 미래내일일경험
- udemy
- 하나은행
- 디지털취업
- 프로젝트캠프
- kdt
- 디지털교육
- s3
- DIGITALHANARO
- 개발자교육과정
- 웅진씽크빅
- 맥북백틱입력
- 백틱
- 프론트엔드개발자양성과정
- `
- Today
- Total
Land of Joe
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;를 넣어주는 센스.....! 가 부족했다.
당장 눈앞에 보이는 것에만 매몰되지 말고, 내가 이 서비스를 사용하는 유저의 입장에서 바라보는 시간도 간간이 가져보자!
'📚 Educations > ⏳ StageUs' 카테고리의 다른 글
23년 10월 19일 프로토콜, 데이터베이스 (3) | 2023.10.19 |
---|---|
23년 10월 12일 AWS EC2 이용한 웹서버 생성하기 (0) | 2023.10.12 |
23년 09월 28일 Javascript-1) 이벤트, 함수, 조건문, 반복문 (0) | 2023.09.28 |
23년 09월 14일 CSS (0) | 2023.09.14 |
23년 09월 07일 SEO, HTML (0) | 2023.09.09 |