[스나이퍼팩토리] 한컴AI아카데미(26.04.09)

구구단 만들기

---

gugudan.html

0.00MB

gugudan2.html

0.00MB

 

 

 

계산기

---

calculator.html

0.00MB

calculator.js

0.00MB

 

 

DOM 선택자

---

 

자바스크립트라는 '손'이 HTML이라는 '물건'을 집기 위해 사용하는 **'집게'**와 같다.

 

메소드	특징	반환 형태
document.getElementById("id")	특정 ID를 가진 요소를 단 하나만 찾습니다.	단일 요소
document.getElementsByClassName("class")	해당 클래스를 가진 모든 요소를 찾습니다.	HTML 컬렉션(유사 배열)
document.getElementsByTagName("tag")	특정 태그(예: div, li)를 모두 찾습니다.	HTML 컬렉션(유사 배열)
document.querySelector("selector")	CSS 선택자 문법으로 가장 먼저 매칭되는 하나만 찾습니다.	단일 요소
document.querySelectorAll("selector")	CSS 선택자 문법으로 매칭되는 모든 요소를 찾습니다.	NodeList(유사 배열)

 

 

화살표 함수

---

 

arr.forEach(li => {
            console.log(li.textContent);
        });

 

형식: () => {};

* 만약 파라미터가 하나라면 괄호 생략 가능

구분	일반 함수	화살표 함수
기본형	function(a, b){return a+b;}	(a, b) => a + b
매개변수 1개	function(a){return a*2;}	a => a*2
매개변수 없음	function() {return "HI"}	() => "HI"

 

- 특징

• this 바인딩
  • 일반 함수: 함수가 어떻게 호출되느냐에 따라 this가 동적으로 결정됩니다. (호출한 대상에 바인딩)
  • 화살표 함수: 자신만의 this를 가지지 않습니다. 대신 **함수가 선언된 주변 범위(Lexical scope)의 this**를 그대로 물려받습니다.

 

DOMSelector.html

0.00MB

 

 

 

배열(Array)

---

 

*자바스크립트에서의 배열이란?

   자바스크립트의 Array 객체는 다른 언어(C, Java 등)의 배열보다 훨씬 강력합니다.

• 크기가 가변적임: 아이템을 마음대로 넣었다 뺐다 할 수 있습니다.
• 다양한 타입: 숫자, 문자열, 객체 등을 한 배열에 섞어서 넣을 수 있습니다.
• 리스트의 특징: 순서가 있고, 중복을 허용하며, 크기가 변하는 '리스트'의 특징을 모두 가지고 있습니다.

   따라서 자바스크립트 개발자들 사이에서 "리스트"라고 하면 보통 **배열(Array)**을 의미한다고 보셔도 무방합니다.

 

- .forEach: 배열의 각 요소에 대해 제공된 함수를 한 번씩 실행하는 배열 전용 메서드

• 기본적 문법

배열.forEach((요소, 인덱스, 배열자체) => {
  // 실행할 코드
});

 

          요소 (Element): 현재 처리 중인 배열의 값 (필수)

          인덱스 (Index): 현재 처리 중인 요소의 순서/번호 (선택)

          배열자체 (Array): forEach를 호출한 배열 그 자체 (선택)

 

 

 

 

- 스프레드 구문으로 객체 만들기

    객체 안에 있는 내용물들을 하나씩 꺼내서 새로운 객체에 뿌려주는(펼치는) 역할

const original = { name: "Gemini", age: 5 };
const copy = { ...original }; 

console.log(copy); // { name: "Gemini", age: 5 }

  - 활용법

• 객체 복사(기존 객체를 건드리지 않고 똑같은 내용의 새로운 객체를 만들 때 사용)
• 객체 병합(두 개 이상의 객체를 합쳐서 하나의 커다란 객체를 만들 때 유용) 

const user = { name: "철수" };
const info = { age: 25, city: "Seoul" };

const fullProfile = { ...user, ...info };
// 결과: { name: "철수", age: 25, city: "Seoul" }

• 속성 업데이트 및 추가(기존 객체의 내용을 가져오면서 특정 값만 바꾸거나 새로운 값을 추가할 수 있습니다. 이때 순서가 중요)

const car = { brand: "Tesla", model: "Model 3", color: "Red" };

const updatedCar = { 
  ...car, 
  color: "Blue", // 기존 color를 덮어씀
  year: 2024     // 새로운 속성 추가
};

console.log(updatedCar); 
// { brand: "Tesla", model: "Model 3", color: "Blue", year: 2024 }

DOMex1.html

0.00MB

DOMex2.html

0.00MB

 

 

 

 

느낀점

---

 

DOM선택자를 배우면서 HTML요소를 자바스크립트에 호출할 때 어떤 메소드를 사용하여 호출할 지에 대해 배웠다. 그 외 화살표함수와 배열 등에 대해 배우면서 어느 순간에 무엇을 쓰며 사용할 메서드를 쓰기 위해 어떠한 것을 미리 선언해야하는 지 등 코드를 짤 때 단계를 잘 쌓아야겠다는 생각이 들었다.

 

 

 

 

—————————————————————————— 본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 (B-log) 리뷰로 작성 되었습니다.