JavaScript 시작! DOM, BOM, 변수, 연산자, string
📚 What is TIL?
✅ DOM과 BOM
✅ 변수
✅ 산술연산
✅ 비교연산
✅ 논리연산
✅ 변수의 타입
✅ String 메소드 맛보기(정규표현식)
DOM
개발자가 코드를 사용하여 웹 페이지의 콘텐츠, 구조 및 스타일과
상호 작용할 수 있도록 하는 프로그래밍 인터페이스를 말한다
🔎 DOM을 사용하여 요소 추가 또는 제거, 기존 요소의 콘텐츠 변경, 클릭이나 키 입력과 같은
사용자 이벤트에 응답하는 등 웹 페이지를 동적으로 수정할 수 있다
BOM
개발자가 웹 페이지의 콘텐츠가 아닌 브라우저 자체와 상호 작용할 수 있도록
웹 브라우저에서 제공하는 API를 말한다
🔎 창의 크기와 위치, 현재 페이지의 URL, 사용자의 검색 기록과 같은 브라우저에 대한 정보를 제공한다
💡 쉽게 생각해서, DOM을 사용하면 웹 페이지의 콘텐츠 구조 및 스타일을 조작하고
💡 BOM을 사용하면 브라우저 및 해당 환경과 상호 작용할 수 있다
💡 JavaScript를 사용해서 경고 상자나 프롬프트를 표시하는 경우 BOM을 사용하는 것이고
페이지 요소의 텍스트나 스타일을 변경하는 경우 DOM을 사용하는 것이다
DOM에서 제공하는 도구
JavaScript가 사용자와 상호 작용하고 피드백 또는 정보를 제공하는 방법을 제공한다
더보기
window.write()window.prompt()window.confirm()console.tableconsole.dirconsole.infoconsole.warnconsole.groupconsole.groupEnd콘솔 창에서 문자를 꾸며주는 방법
console.log('%chello world', 'color:red;font-size:32px');
console.log('%chello world%chello', 'color:red;font-size:32px', 'color:blue;font-size:16px');
변수
변수명
최대한 서술적이고 간결하면서도 줄이말을 쓰지 않고 명명하는 것이 좋다
document 요소를 할당한 변수는 구분하기 쉽게 앞에 $를 붙이는 것이 좋다
💡 효율성을 생각해서 변수 선언은 최소화하고 변수를 재사용하는 것이 좋을까?
🔎 코드의 성능이 향상될 수는 있지만 코드를 읽고 유지하기가 어려워질 수 있다
🔎 물론, 많은 변수를 선언하면 메모리 조각화가 발생하고 프로그램 속도가 느려질 수 있다
🔎 하지만, 가독성과 유지보수를 고려해야 디버깅에 더 적은 시간을 소비할 수 있다
메모리 조각화?
JavaScript에서 변수를 선언하면 변수에 대해 새 메모리가 생성되어 할당이 된다
여기서, 값에 변수를 할당하면 해당 값을 저장하기 휘해 새 메모리가 또 생성되어 할당이 된다
a = 100;
b = a;
b += 100;
console.log(a);
console.log(b);
✔️ b 변수를 사용하여 값을 수정해도 다른 변수는 동일한 메모리 위치를
가리키기 않기 때문에 영향을 받지 않는 것을 볼 수 있다
✔️ a와 b가 각각 100을 가리키다가 b에게 다른 값을 할당하는 순간 가리키고있던
100과 끊고 200을 가리킨다고 할 수 있다
✔️ 즉, 메모리의 위치의 값이 200으로 업데이트 되어 사실상 100은 삭제되어 200으로 대체되었다고 할 수있다
⚠️ 반면 객체와 배열이 변수에 할당되면 원래 객체나 배열에 대한 참조가 생성되어 메모리에 저장된다
const arr1 = [1, 2, 3];
const arr2 = arr1;
arr2.push(4);
console.log(arr1, arr2);
arr2 = [7, 8, 9];
console.log(arr1, arr2);
✔️ 새변수에 할당되거나 함수 인수로 전달 될때 복사되지 않고 참조가 전달된다는 것을 알 수 있다
✔️ arr2 에 대한 변경 사항이 원래 배열 arr1 에 영향을 미치는 것을 볼 수 있다
Python과 JavaScript의 메모리관리
Python에서는 다른 변수에 동일한 값을 할당해도 두 변수 모두 동일한 메모리 위치를 가리킨다
즉, Python과 JavaScript는 메모리 관리에서 이러한 차이가 있다
🔎 Python에서는 객체를 수정하면 동일한 메모리 위치를 공유하는
다른 변수에 영향이 미칠 수 있다는 것을 인지하는 것이 중요하다
🔎 JavaScript 에서는 큰 객체나 오래 실행되는 작업을 할 때에 메모리 누수를 염두하고
메모리 사용량을 수동으로 관리해야한다
null은 왜 object 라고 뜨는가?
자바스크립트 초기 버전의 버그이다
JavaScript 설계자가 설계의 오류를 인정하는 부분에서 알 수 있듯,
원시타입으로 보는 것이 맞다
형변환
number
console.log(+'10');
console.log(Number('10')); // 권하지 않음
console.log(parseInt('10')); // 권함
console.log(parseFloat('10.1')); // 권함
console.log(parseInt(true)); // NaN
console.log(parseInt(false)); // NaN
console.log(Number(true)); // 1
console.log(Number(false)); // 0
🔎 parseInt() 는 문자열로 된 부분에서 숫자(정수)만 뽑아서 변환해준다
🔎 Number() 는 문자열 전체가 숫자일때 소수점까지 숫자타입으로 가져올 수 있다
string
let dongsup = 10;
console.log(dongsup.toString()) // 권함
10.toString() // error
console.log('' + 10)
console.log(String(10))
⚠️ toString() 은 . 까지를 소숫점으로 보기 때문에 오류가 발생한다
boolean
let dongsup = 10;
console.log(Boolean(-1)); //false
console.log(Boolean(0));
console.log(Boolean(1000));
console.log(!!1000);
console.log(!!dongsup);
String 메소드
더보기
String|Array.prototype.indexOf()String.prototype.search()String.prototype.replace()String.prototype.replaceAll()String|Array.prototype.slice()String.prototype.substring()String.prototype.toLowerCase()String.prototype.toUpperCase()String|Array.prototype.includes()String.prototype.split()String.prototype.padStart()String.prototype.trim()연산자 우선쉰위
→ → → → →
✨ Today is …
누리님과의 커피챗
1기 수료생 누리님의 짧지만 많은 경험담을 들을 수 있었다
누리님과 마찬가지로 나도 이 기간 만큼은 어떻게든
성장하고 싶고 잘해내고 싶은 욕심이 있으면서도
한편으론 번아웃이 생각보다 빨리 찾아올까봐 걱정이었다
누리님은 한달차가 되는 시점에서 번아웃이 오셨다고 한다 😵
지금 5기가 달릴 만큼 3개월이란 더 짧은 시간안에 달려야 했으니
올 수 밖에 없는 시련이 아니였을까 생각든다,,,
그럴때마다 누리님은 완급 조절을 위해 힘을 쓰셨다고 했다
일기 써보기
계속해서 남들과 비교를 한다고 생각한다면…내가 잘하고 싶은 마음이 있기 때문이라는 생각하기
오늘 다 복습을 마친다가 아니라 오늘 중요한 것을 몇 개 골라서 먼저해보기
안되는 걸 계속 붙잡고 있지 않고 좀 더 다른 공부를 하거나…정 안되면 운동이라도 하기
이렇게 해야 완급조절하는데 큰 어려움이 없을 것이라고 얘기해주셨다
지금 완급조절이 조금은 필요한 때인거 같다
기본적으로 잠이 부족하다.. 적어도 2시 전에는 잠들기로 😴
미리 슬럼프를 대비하자 💪
댓글남기기