[사전캠프 11일차 <3번째 팀과제: 스타벅스 주문 시스템 만들기>]
🛸 JS에서 HTML요소 생성하기
createElement()
지정한 HTML 태그 이름의 HTML 요소 객체를 생성해서 반환해줌.
createElement() 함수로 생성된 요소 객체는 아직 DOM에 추가되지 않은 상태이며, 원하는 위치에 직접 추가(혹은 삽입)해야 웹 페이지에서 표시됨.
요소를 생성해서 추가하는 과정 예시
// span요소 생성
let newSpan = document.createElement('span');
// 생성된 span요소에 텍스트 콘텐츠 추가
nweSpan.textContent = '이렇게 텍스트를 넣습니다.';
// 생성된 span을 HTML "menu"라는 id값을 div 마지막에 추가
document.getElementById('menu').appendChild(span);팀과제에서 응용
- 주문시스템 생성과정중에 메뉴들이 리스트-딕셔너리형으로 자료값이 제공되었을 때(정상동작하는 코드)
const menu = [
{ name: '아메리카노', price: 4100 },
{ name: '카페라떼', price: 4600 },
{ name: '카푸치노', price: 4600 },
];
const menuContainer = document.getElementById('menu');
// 제공된 값들을 각각 받아오기 위해 forEach 사용
menu.forEach((item, index) => {
const div = document.createElement('div'); // div 생성
const span = document.createElement('span'); // span 생성
// menu딕셔너리에서 값 받아와서 메뉴이름과 가격 넣기
span.textContent = `${item.name} ₩${item.price}`;
const button = document.createElement('button'); // button 생성
button.innerText = '주문 추가'; // button에 글자 넣기
div.appendChild(span); // div 안에 span 내용 넣기
div.appendChild(button); // div 안에 button 넣기
menuContainer.appendChild(div) // menuContainer 안에 div 넣기 문제발생
이 과정에서 나는 버튼과 가격은 표기가 되는데 메뉴 이름이 표기가 되지 않아았다.
내 해결방법
메뉴이름이 들어갈 div(menu), 가격이 표기될 div(price), 그리고 그것을 감쌀 1개의div(wrap)이렇게 나눠서 코드를 만들기도 했다.
저렇게 구역을 나눠서 코드를 넣으니 표기가 되긴 했다. 아래 이미지처럼...
그런데..
이 과정중에 팀원중 한명이 [object Object]형태로 표기되어 내가 진행하는 과정의 코드도 보여주면서 의견을 공유했다.
내 코드와 팀원의 코드를 확인하다 의문점이 생겼는지 팀원이 튜터님에게 가서 질문을 하고 왔는데, 최초 내가 작성한 코드와 차이점이 없었다. 더 진행하다 말고 여기서 내가 최초에 작성한 코드를 다시 한번 살펴보았는데, 세상에... 아까는 찾지못하였던 오타를 발견 → 수정하니 아주 정상적으로 표기됨🫠
내코드는 이상이 없었어(오타가 있었어)
저 짧은 코드안에서 무슨 오타가 생겼을까? 왜 눈에 보이지 않았을까?
내가 코딩할 때의 습관 문제인것 같다.
코드의 자동완성기능을 사용할 때도있고 그렇지 않을 때도 있고, 특정 클래스나 아이디 값들을 복사에서 붙여넣을 때도 있고 그냥 타이핑할 때도 있다.
저 코드를 작성할 때도 sapn으로 작성해서 정상 출력되지 않기도 했다.
저 오타를 고친 후에 일부의 값만 표기되는 이유는 ${item.name}에서 nane로 되어 있었다. 어떻게 못찾았을까?
노트북에서 코딩을 하다보니 내 화면의 기본 글꼴들이 작아 VS Code에서는 더 작게 보였던 것이다. VS Code에서 색상별로도 표기해주는데 여기서 훑어 지나가며 색상에 이상이 없으니 그냥 지나간 것이다.
훑어지나갈때 사람은 익숙한(비슷한) 글자가 있으면 그 글자가 틀렸어도 그냥 넘어간다. 이번에도 한자한자 확인하지 않고 넘어가서 그런것이다.
이전에 학습을 복습할 때도 오타로 인해서 시간을 많이 허비한적이 있는데, 이번 기회에 코딩습관을 제대로 다시 익혀야겠다고 다짐한다!
오타를 잡는 또한가지! 해당 텍스트에 마우스 더블클릭을하면 동일한 텍스트들이 코드안에서 선택되어서 여기에도 있다! 라고 보여준다. 이 기능도 오타잡을 때 적극 활용하기!
