계산기 만들기 리뷰
document.createElement("");
- 자바스크립트에서 새로운 HTML 요소를 메모리상에 생성하는 메서드
- 형식: const element = document.createElement(tagName);
- tagName: 생성할 요소의 태그 이름(예: 'div', 'p', 'button', 'span')을 문자열로 전달합니다.
* inner.HTML과의 차이점
- 보안: 사용자의 입력을 그대로 HTML에 넣을 때 발생하는 XSS(교차 사이트 스크립팅) 공격을 방지하기 훨씬 안전합니다.
- 성능 및 제어: 생성된 요소가 즉시 자바스크립트 객체가 되므로, 추가적인 querySelector 없이 바로 이벤트 리스너(addEventListener)를 달거나 속성을 수정할 수 있어 효율적입니다.
- 정교함: 기존의 자식 요소들을 건드리지 않고 딱 필요한 요소만 깔끔하게 추가할 수 있습니다.
parentNode.appendChild(newNode);
- 지정된 부모 노드의 자식 노드 리스트 중 맨 마지막에 새로운 노드를 추가
- parentNode: 자식을 담을 부모 요소입니다.
- newNode: 부모 안에 넣고 싶은 새로운 요소(노드)입니다.
*parentNode 사용할 때 주의
브라우저는 HTML 문서에서 딱 하나만 존재하거나 아주 중요한 요소들만 document 객체의 속성으로 미리 등록해 두었습니다.
- document.documentElement: <html> 태그에 접근
- document.head: <head> 태그에 접근
- document.body: <body> 태그에 접근
- document.title: 페이지 제목(<title>)에 접근
DOM 요소 메서드
.cloneNode(deep);
- 기존의 DOM 요소를 복사해서 똑같은 복제본을 만드는 메서드
- false (얕은 복사, 기본값): 해당 태그 자체만 복사합니다. 그 안에 들어있는 텍스트나 자식 요소들은 복사되지 않습니다. 껍데기만 가져온다고 생각하면 됩니다.
- true (깊은 복사): 해당 태그를 포함하여 그 자식 노드(텍스트 포함) 전체를 똑같이 복사합니다. 보통 이 방식을 훨씬 많이 사용합니다.- deep 자리에는 true 또는 false (불리언 값)가 들어갑니다. 이 값이 무엇이냐에 따라 복사 범위가 완전히 달라집니다.
.remove();
- 특정 요소를 DOM 트리에서 완전히 삭제해버리는 메서드
- .removeAttribute("특정요소");
- 특정 속성(Attribute)을 완전히 제거할 때 사용하는 메서드
.classlist
- HTML 요소의 클래스(class) 속성을 아주 쉽고 효율적으로 제어할 수 있게 해주는 도구
-주요 메서드 활용법
- add(className) : 클래스 추가
const box = document.querySelector('.box');
box.classList.add('active'); // 'active' 클래스 추가- remove(className) : 클래스 제거 클래스가 있으면 없애고, 없으면 생기게 한다. ('스위치' 같은 기능)
box.classList.remove('active'); // 'active' 클래스 제거- toggle(className) : 클래스 반전
클래스가 있으면 없애고, 없으면 생기게 한다. ('스위치' 같은 기능)
box.classList.toggle('hidden'); // 꺼졌다 켜졌다!- contains(className) : 클래스 확인
해당 클래스가 있는지 확인하여 true 또는 false를 반환한다.
if (box.classList.contains('active')) {
console.log("지금 활성화 상태예요!");
}
* className vs classList
| 특징 | className | classList |
| 성격 | 문자열(String)방식 | 객체(DOMTokenList)방식 |
| 조작 | 전체를 새로 써야 함 | 메서드로 개별 조작 가능 |
| 안전성 | 기존 클래스를 덮어쓸 위험이 있음 | 특정 클래스만 건드려 안전함 |
호이스팅
- 변수와 함수 선언문은 코드가 실행되기전에 먼저 메모리에 올라가기 때문에, 함수를 호출하기 전에 함수를 정의할 수 있다.
- 화살표 함수는 호이스팅 되지 않기 때문에 함수를 호출하기 전에 함수를 정의해야한다.
"keydown"
- keydown: 키를 누르는 즉시 실행
- keyup: 키를 눌렀다 뗄 때 실행 (보통 한 번만 실행하고 싶을 때 안전함)
work.addEventListener("keydown", (e) => {
if(e.key == 'Enter')addList();
});의미: 키를 눌렀을 때 e라는 함수가 실행되는데 e함수 실행 조건은 엔터를 쳤을 때이다. e라는 함수는 addList()를 실행한다.
객체레터럴 vs 배열
-객체 레터럴: 중괄호 { }를 사용하여 데이터를 키(key)와 값(value)의 쌍으로 묶어서 선언하는 방식
let d1 = ['서울','경기도','부산시'];
console.log(d1[0]);
let o1 = {
name : "홍길동",
email : "aaa@bbb.com"
}d1 과 o1의 차이
- for-of(값을 가져오는 선언문) 사용여부: for-of문은 반복이 가능한 객체에서만 가능하다. 즉 순서가 있는 객체에서만 가능한데 반복 가능한 객체는 배열, 문자열, map, set 등이 있다. (그래서 객체레터럴에서 값을 가져오려면 for-in(키를 가져오는 선언문)을 써야한다.
JSON(JavaScript Object Notation)
- JSON: 데이터를 저장하거나 주고받기 위해 사용하는 텍스트 기반의 데이터 형식
(이름에 'JavaScript'가 들어가서 자바스크립트 전용이라고 생각할 수 있지만, 사실은 거의 모든 프로그래밍 언어(Python, Java, C++ 등)에서 통용되는 데이터의 세계 공통어 같은 존재)
- JSON 문법 규칙
- 반드시 큰따옴표(") 사용: 키(Key)와 문자열 값(Value)은 반드시 쌍따옴표로 감싸야 합니다. (작은따옴표 '는 안 돼요!)
- 데이터 타입 제한: 숫자, 문자열, 불리언(true/false), 배열, 객체, null만 담을 수 있습니다. (함수나 undefined는 담을 수 없어요.)
- 마지막 쉼표 금지: 마지막 요소 뒤에 쉼표(,)를 찍으면 에러가 날 수 있습니다.
- 자바스크립트에서 JSON으로 변환
- JSON.stringify(obj) : 객체를 JSON 문자열
서버로 데이터를 보낼 때, 자바스크립트 객체를 텍스트 형태로 바꿉니다.
const user = { name: "Gemini", age: 5 };
const jsonString = JSON.stringify(user);
// 결과: '{"name":"Gemini","age":5}'
- JSON.parse(obj) : 객체를 JSON 문자열
서버에서 받은 텍스트를 자바스크립트에서 쓰기 위해 다시 객체로 바꿉니다.
const obj = JSON.parse(jsonString);
console.log(obj.name); // "Gemini"
느낀점
수업을 진행할수록 새로운 메소드와 프로퍼티 등 많은 개념을 배우는데 비슷한 결과를 내는 경우가 많아 내가 코드를 짤 때 어떤 형식으로 짜는 지에 따라 사용하는 메소드와 함수등이 달라진다는 것을 다시 한번 느끼게 되는 날이였다. 그래서 코드를 짤 때 기본 틀 설계가 매우 중요하다는 생각이 들었디. 그리고 새로운 개념을 배울 수록 너무 많은 내용을 한꺼번에 접한 느낌이라 매번 이걸 내가 나중에 사용할 수 있을까라는 의문이 든다.....수업이 끝나고 복습은 거의 필수인데 집을 오면 시간이 너무 없어 그날 내용을 자꾸 놓치는 마음도 드는 것 같다. 아직 2주차밖에 안됐는데 벌써부터 이러면 어떡하나 생각이 들기도 한다.
그래서 수업 내용을 다시 한번 복습하며 리마인드하는 것이 내게 제일 필요한 부분인데 이렇게 정리를 하는 것이 매우 중요하다고 다시 한번 느끼는 날이였다.
——————————————————————————
본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 (B-log) 리뷰로 작성 되었습니다.
'학습일지' 카테고리의 다른 글
| [스나이퍼팩토리] 한컴AI아카데미(26.04.14) (1) | 2026.04.14 |
|---|---|
| [스나이퍼팩토리] 한컴AI아카데미(26.04.13) (1) | 2026.04.13 |
| [스나이퍼팩토리] 한컴AI아카데미(26.04.09) (0) | 2026.04.09 |
| [스나이퍼팩토리] 한컴AI아카데미(26.04.08) (0) | 2026.04.08 |
| [스나이퍼팩토리] 한컴AI아카데미(26.04.07) (0) | 2026.04.07 |