[알토르] 1주차 과제 : JS 기본 문법과 DOM 조작

[JS 기본문법]

 

변수(Variable)

변하는 수. 하나의 값을 저장하기 위한 공간

let은 변경 가능, const는 변경 불가(기본적으로 const를 먼저 사용).

 

let age = 20; const name = "Tom";

 

조건문(if)

조건이 true(참)일 때만 코드 실행

 

if (age >= 18) { console.log("성인"); }

 

#console.log()

브라우저 개발자도구(Console)에 값을 출력하는 함수

→ 결과 확인용 출력 함수

 

반복문(for)

정해진 횟수만큼 반복할 때 사용

 

for (let i = 0; i < 5; i++) { console.log(i); }

출력값은 0,1,2,3,4

 

반복문(while)

조건이 참인 동안 계속 반복

 

let age = 3;
while (age > 0) {
  console.log(age + "살입니다.");
  age = age - 1;
} // 3살 -> 2살 -> 1살 순서로 출력되고, 0살이 되는 순간 멈춤(탈출장치)

 

함수(function)

특정 작업을 수행하기 위해 만들어 둔 재사용 가능한 코드 묶음

 

function add(a, b) { return a + b; }

console.log(add(3, 5)); //호출확인

 

배열(array)

배열 = 순서 있는 값 묶음

 

let fruits = ["apple", "banana", "orange"];

console.log(fruits[0]); // apple → 0부터 시작

 

객체(object)

중괄호 가지고 쓴 데이터 { }

 

중괄호 안에 이름(Key)와 값(Value)을 묶어서 넣음

→ 이름표(Key)를 붙이고 그 안에 내용물(Value)를 넣는다

(ex. 이름 : 음료, 값 : 콜라)

 

const myCar = {

brand: "Hyundai", // 브랜드

model: "Ionic 5", // 모델명

year: 2024, // 연식 (숫자)

isElectric: true, // 전기차 여부 (불리언)

colors: ["white", "black", "silver"] // 가능한 색상 (배열)

};

 

console.log(myCar.brand); // "Hyundai" → 이름표로 꺼내기

 

---

 

[DOM 조작]

 

DOM 쉬운 정의

DOM은 HTML 요소들 하나하나가 부품들이라면

이것들로 조립돼서 만들어진 웹페이지를 갖다가 실제품으로 찍어낸 것

 

(HTML로 설계된 웹페이지가 브라우저 안에서 화면에 나타나고

이벤트에 반응하고 값을 입력받는 등의 기능을 수행할 객체들로 실체화된 형태)

 

DOM의 공식 정의 : HTML이나 XML 문서를 실체로 나타내는 API

(트리 구조의 객체 모델로 표현)

 

DOM은 자바스크립트로 조작할 수 있다. (특정 언어에 종속 되지는 않음)

DOM이 API를 갖고 있어 어느 브라우저든 별다른 차이 없이 이용 가능.

 

*API란? 

서버가 어떤 특정한 서비스를 버튼화 시킨 것

(클라이언트한테 제공하면 클라이언트는 버튼을 클릭해서 서비스 요청)

-> HTTP 이용해서 웹 기반 API 제공 (html 말고도 다양한 데이터 전달하니깐)

 

모든 HTML Elment(요소)들은 기본적으로 Node다.

(트리에서 하나의 개체를 Node라고 함)

-> 최상단 루트노드, 위쪽 부모노드, 아래쪽 자식노드

 

기능들이 모든 DOM 요소에 버튼들로 달려서

자바스크립트 등으로 각 요소들을 조작 할 수 있다.

거기에 각 요소들의 교유 속성이나 기능들이 있다.

 

css는 CSSOM이다.

브라우저는 DOM이랑 CSSOM을 이용해서 우리가 보는 화면들을 만듦

(DOM - 구조, CSSOM - 스타일 정보 // 둘을 합쳐 Render Tree 생성 -> 실제로 그려질 부품 목록)

 

Virtual DOM(가상 DOM)

-> 실제 DOM은 이것저것 든 게 많고 무거우니까 그것들을 간략한 자바스크립트 오브젝트로 바꾼 것

(이걸로 먼저 시뮬레이션을 돌려다가 가장 경제적으로 DOM에 변화를 가하는 방법을 찾아낸다

// 최소 변경만 실제 DOM에 반영)

 

React, Vue는 라이브러리고 Svelte는 컴파일러

 

React, Vue는 런타임 기반(브라우저가 자바스크립트 파일 받아서 하는 작업)에서 일어남.

가상DOM은 런타임이라는 제약 조건 하에서 최소한의 변경으로 구현.

Svelte는 사이트가 배포되기 전에 미리 그 과정을 다 해두고 딱 필요한 부분만 JS 코드로 내놓음.

(Svelte는 가상DOM 안 써서 작업 더 빠름)

 

*다만 대규모 생태계, 팀 협업, 툴링 면에서는
React/Vue가 더 안정적이다.

---

[추가개념]

 

JASON 

 -> 데이터를 구조화 해놓은 하나의 데이터 형태,

 -> 중괄호 가지고 감싸진 키와 밸류가 쌍으로 이루어진 형태

 

XML 

-> 데이터를 구조화 해놓은 하나의 데이터 형태, 

-> HTML 같이 태그 가지고 감싸져 있음

 

AJAX 

> 페이지의 이동 없이 백단에서 서버와 HTTP 통신을 하는 기술

 

 

• 브라우저가 AJAX로 서버에 요청(Request)을 보냄
• 서버가 처리 후 결과를 돌려줌
• 그 돌려주는 데이터가 HTTP 응답(Response)

(응답의 99%는 JSON)