HTML 기본 개념 정리
요소, 속성, 태그, 내용
요소(element) = 시작 태그 + 종료 태그 + 내용
태그 (Tag)는 HTML 요소의 시작과 끝을 정의하는 문법으로 시작 태그와 종료 태그로 나뉜다.
종료 태그는 종료 태그가 있는 경우, 없는 경우, 자기 종료(self-closing) 형태로 나눌 수 있다
내용 (Content)은 시작 태그와 종료 태그 사이에 들어가는 텍스트 또는 다른 태그를 말한다.
이때 <img>, <br>, <hr> 와 같이 내용이 없고 종료 태그가 없는 요소를 빈 요소 (Empty Element)라고 한다.
<div>
~~~~~
시작 태그
<!-- 종료 태그가 없는 경우 ⇐ 빈 요소(empty element) -->
<hr>
<input type="text" name="age" id="age">
<br>
<img src="http://test.com/myimg.gif">
<!-- 종료 태그를 사용하는 경우 -->
<input></input>
<img src="http://test.com/myimg.gif"></img>
<!-- 자기 종료(self-closing) 태그 형태로 사용 -->
<input />
<hr />
<br />
<img />
</div>
~~~~~~
종료 태그
속성 (Attribute)은 태그를 처리할 때 필요한 내용, 모양, 동작, 식별을 위한 값들로 구성되어 있다.
<img src="http://www.test.com/myimage.gif" ⇐ 이미 처리를 위해서 필요한 값
width="100" height="100" ⇐ 모양
style="border: 1px solid red; cursor: hand;" ⇐ 모양 ⇐ inline style
onclick="alert('clicked')" ⇐ 이벤트가 발생했을 때 동작을 정의
id="myimage" ⇐ 해당 문서에서 유일한 값
class="ourimage" ⇐ 해당 문서에 여러 개 존재하는 값
/> 모던 자바스크립트의 주요 특징
1. 가상 DOM(Virtual DOM)을 이용하는 라이브러리/프레임워크를 사용
- 실제 DOM을 효율적으로 업데이트하기 위한 기법
- 실제 DOM 조작은 느리기 때문에, 메모리 상에서 DOM의 복사본인 가상 DOM을 생성하고, 변화가 생기면 가상 DOM을 먼저 업데이트한 뒤 실제 DOM에 반영하는 방식이다.
2. 패키지 관리자 사용
프로젝트에서 사용하는 라이브러리와 도구를 설치하고 관리하는 시스템.
- 의존성 관리와 버전 관리
- 설치, 업데이트, 삭제 명령 제공.
- 주요 도구: npm(Node.js 패키지 매니저), yarn(빠른 속도의 패키지 매니저), pip, gem, composer, ...
3. ES6(ECMAScript 2015) 이후의 문법 사용
- let, const: 변수 선언.
- 화살표 함수 (arrow function)
- 템플릿 리터럴 template literal :
${expression} - 디스트럭처링 할당 : 배열이나 객체의 값을 쉽게 분해
- 기본 매개변수
- for ... of 구문
- 모듈 시스템 (import, export로 모듈화된 코드 관리)
- 클래스
- Promise : 비동기 처리 지원
- Map, Set : 새로운 자료구조
- Rest, Spread 연산자
4. 모듈 번들러(module bundler)를 사용
- 여러 모듈을 하나의 번들로 묶는 번들링을 처리하는 도구
- 네트워크 요청 수를 줄이고 로딩 속도를 향상
- Webpack, Parcel, Rollup ...
5. 트랜스파일러(transpiler)를 사용
- 한 프로그램 언어로 작성된 소스 코드를 다른 프로그래밍 언어로 변환하는 도구
- 언어 간 변환, 버전 호환성, 플랫폼 호환성, 언어 확장, ... 등
- Babel
- SPA(Single Page Application)로 작성
자바 스크립트 작성 및 실행
1. Node.js로 실행
1) REPL(Read-Eval-Print-Loop) 사용
REPL(Read-Eval-Print-Loop)은 node.js 내부에 탑재된 프로그램으로 코드를 한 줄씩 입력하고 즉각적으로 결과를 확인할 수 있다.
- REPL 실행: 터미널이나 명령 프롬프트에서 node 명령어 입력.
- .exit: REPL 종료.
c:\javascript> node ⇐ REPL 실행
Welcome to Node.js v22.12.0.
Type ".help" for more information.
>
> let i = 100
undefined
> let j = 200
undefined
> i + j
300
> .exit ⇐ REPL 종료2) JavaScript 파일 실행
code helloJavaScript.js ⇐ VSCode를 실행하고, helloJavaScript.js 파일을 생성
node helloJavaScript.js or node helloJavaScript => 실행-> 로그 출력
2. 브라우저로 실행
HTML 파일 내에서 JavaScript 코드 추가
-> sample.html 파일을 생성하고, inline, internal, external 방식으로 스크립트 코드를 추가
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- external -->
<script src="helloJavaScript.js"></script>
</head>
<body>
<!-- inline -->
<button onClick="javascript: alert('button clicked')">버튼</button>
<!-- internal -->
<script>
let s = "abc";
console.log(s);
</script>
</body>
</html>웹 서버 기동(live server) 후 해당 페이지를 요청하면 응답 전달된 페이지의 스크립트 코드가 실행되는 것을 확인할 수 있다.
✔️ Inline, Internal, External 방식
HTML 문서에서 JavaScript를 실행하는 방법은 크게 Inline, Internal, External 방식 이 세가지로 나눌 수 있다.
이 방법들은 JavaScript 코드를 HTML 파일과 어떻게 통합할지를 결정하는 방식이다.
📍 Inline 방식
HTML 태그의 속성에 직접 JavaScript 코드를 작성하는 방식으로 주로 간단한 이벤트 처리에 사용된다.
<button onClick="alert('Button clicked!')">Click Me</button>📍 Internal 방식
HTML 문서의 <script> 태그 내부에 JavaScript 코드를 작성하는 방식으로 HTML 파일 내에서 JavaScript를 작성해야 할 때 사용한다.
HTML 문서의 <head> 또는 <body> 내부에<script> 태그를 추가
<script>
let s = "abc";
console.log(s);
</script>📍 External 방식
JavaScript 코드를 별도의 .js 파일로 작성하고, HTML 문서에서 <script> 태그의 src 속성을 사용해 불러오는 방식.
<script src="helloJavaScript.js"></script>자바스크립트의 문법 및 개념
1. 표현식(expression)
값을 생성하거나 반환하는 코드
리터럴 = 값 자체
2. 문장(Statement)
프로그램이 수행할 동작을 정의하는 코드
하나 이상의 표현식으로 구성될 수 있으며, 대부분의 경우 세미콜론(;)으로 끝남
3. 키워드(keyword)
특정 동작을 정의하거나 예약어로 사용되어 특정 기능을 수행하는 단어들
변수 이름이나 함수 이름으로 사용할 수 없음
4. 식별자(identifier)
변수, 함수, 클래스, 모듈 등의 이름을 정의하는 데 사용
- 문자, 숫자, 달러 기호, 밑줄을 사용할 수 있음
- 문자, 달러 기호, 밑줄로 시작해야 함 (단, 숫자로는 시작할 수 없음)
- 예약어는 식별자로 사용할 수 없음
- 대소문자를 구분
관례
- 클래스 이름은 항상 대문자로 시작
- 변수, 함수, 속성, 메서드의 이름은 항상 소문자로 시작
- 여러 단어로 구성된 식별자는 각 단어의 첫 글자를 대문자를 사용 ⇒ camel case
자료형
📌 동적 타이핑(dynamic typing)
자바스크립트에서는 변수 선언 시 데이터 타입을 지정하지 않고, 값이 할당되는 시점에 변수의 자료형이 결정 된다.
자바에서는 int i = 10; 와 같이 변수를 선언할 때 변수가 가질 수 있는 데이터 타입을 지정하고, 자바스크립트에서는 var i = 10; 와 같이 변수를 선언할 때 데이터 타입을 지정하지 않고,
변수에 값이 할당되는 시점에 할당되는 값에 따라 변수의 데이터 타입이 결정된다.
자바에서는 int i = "abc"; 변수의 데이터 타입과 할당되는 값의 데이터 타입이 일치하지 않아서 오류가 발생하는 반면, 자바스크립트에서는 var i = "abc"; 변수가 할당되는 시점에 데이터 타입이 결정되므로 정상적으로 동작할 수 있다.
1. 원시(Primitive) 자료형
1) null
: "값이 없음"을 나타내는 데이터 타입
// null type
let nullValue = null;2) undefined
: 변수는 선언되었지만 값이 할당되지 않은 상태
// undefined type
let u1;
let u2 = undefined;3) boolean
:논리값 true 또는 false
let b1 = true;
let b2 = false;
console.log(b1, typeof(b1)); // true boolean
console.log(b2, typeof(b2)); // false boolean
// falsy value
console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(-0)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(false)); // false
if (undefined) {
console.log('undefined는 true');
} else {
console.log('undefined는 false'); // undefined는 false 출력
}
if (-1) {
console.log('-1은 true'); // -1은 true 출력
} else {
console.log('-1은 false');
}4) number
: 숫자(정수, 실수, Infinity, -Infinity, NaN 포함)
let n1 = 1234; // 정수
let n2 = 56.78; // 실수
console.log(n1, typeof n1); // 1234 number
console.log(n2, typeof n2); // 56.78 number5) BigInt
: - -2^53 ~ 2^53-1 범위 밖의 숫자를 표현
> i = 1234567890
1234567890
> console.log(typeof(i))
number
> i = 1234567890n
1234567890n
> console.log(typeof(i))
bigint
> i = 1234567890123456789012345678901234567890
1.2345678901234568e+39 --+
> i + 1 | 1을 더해도 동일한 값이 출력
1.2345678901234568e+39 --+
> i = 1234567890123456789012345678901234567890n
1234567890123456789012345678901234567890n
> i + 1n
1234567890123456789012345678901234567891n ⇐ 1 증가한 것을 확인인6) String
: 문자열
- 작은따옴표(')나 큰따옴표(")로 감싸서 표현.
- 템플릿 리터럴
(`)로 동적인 문자열 생성 가능.
// 이스케이프 처리
let s3 = 'Hello, \'Inho\'';
let s4 = "Hello, \"Inho\"";
// 템플릿 문자열(template literal)
let name = 'Inho';
let age = 23;
let hello1 = '이름은 "' + name + '"이고, 나이는 ' + age + '세 입니다.';
console.log(hello1);
> let hello2 = `이름은 "**${name}**"이고, 나이는 ${age}세 입니다. 내녕에서는 ${age + 1}세가 됩니다.`;
console.log(hello2);
7) Symbol
- 고유하고 변경 불가능한 원시 값 → 주로 객체 속성의 공유한 식별자를 만들기 위해 사용
✔️ 문자열(String)비교
> a = "abc";
'abc'
> b = "abc";
'abc'
> a == b;
true
> a === b;
true-> 문자열은 값(value) 기반의 데이터 타입이다.
a와 b에 동일한 문자열 값 "abc"가 할당되었으므로, 두 값은 같다고 간주한다.
==(동등 연산자): 값만 비교.
===(일치 연산자): 값과 데이터 타입 모두 비교.
✔️ 심볼(Symbol) 비교
> a = Symbol("abc");
Symbol(abc)
> b = Symbol("abc");
Symbol(abc)
> a == b;
false
> a === b;
false
-> 심볼(Symbol)은 고유한 식별자를 생성하는 데이터 타입이다.
Symbol("abc")를 실행할 때마다 새로운 심볼이 생성되며, 각 심볼은 고유한 값을 가지므로 서로 다르다고 간주한다.
즉 , Symbol("abc")와 Symbol("abc")는 내용이 같더라도 다른 심볼인 것이다.
그래서 a == b와 a === b 모두 false를 반환한다.
2. 객체 자료형
자바스크립트에서 객체는 키(key)와 값(value)의 쌍으로 데이터를 저장하는 자료형이다.
객체 타입은 내장 객체(built-in objects)와 사용자 정의 객체(user-defined objects)로 나눌 수 있다.
1) 내장 객체 (Built-in Objects)
objects, arrays, dates, maps, sets, intarrays, floatarrays, promises, ...
✔️ array type = 다양한 데이터 타입을 순서대로 모아놓은 것
// array type
let arr1 = [1, 2, 3, 4, 5];
let arr2 = [1, 2.3, 'hello', true, null, undefined, [1, 2, 3]];
console.log(arr1[3]); // 4
console.log(arr2[5]); // undefined
arr1[3] = 100;
console.log(arr1); // [1, 2, 3, 100, 5]✔️ object type = key와 value로 이루어진 데이터 타입
key는 문자열 또는 심볼이어야 하고, 값은 모든 데이터 타입이 가능
// object type
let obj1 = { a: 'apple', b: 'banana', c: 'cherry' };
let obj2 = { name: 'Inho', age: 23, 'favorite colors': ['red', 'blue', 'green'] };
console.log(obj1['a']); // apple
console.log(obj1.a); // apple
console.log(obj2['favorite colors']); // ['red', 'blue', 'green']
✔️ Map vs Object
2) 사용자 정의 객체 (User-defined Objects)
const person = { name: "홍길동", age: 23 };
