JavaScript 첫 시작
수업 내용을 기반으로 모던 자바스크립트 딥다이브를 읽고 정리한 내용입니다🧑💻
렌더링
HTML, CSS, JavaScript로 작성된 문서를 해석해서 브라우저에 시각적으로 출력하는 과정
서버에서 데이터를 HTML로 변환해서 브라우저에게 전달하는 과정 (SSR: Sever Side Rendering)
Ajax 자바스크립트를 이용하여 서버와 브라우저가 비동기 방식으로 데이터를 교환하는 통신 기술
Node.js 자바스크립트 런타임 환경 (비동기 I/O, 단일 스레드 이벤트 루프 기반 동작)
SPA CBD(Compoment Based Development) 방법론을 기반으로 하는 Single Page Application
웹 크롤링
서버에서 웹사이트의 콘텐츠를 수집하기 위해 웹사이트에서 HTML을 가져온 다음 이를 가공해서 필요한 데이터를 추출하는 방식
변수
컴퓨터는 10 + 20을 어떻게 계산할까?
→ 자바스크립트가 계산(평가 evaluation)하기 위해서는 우선 10, 20, +기호(리터럴 literal, 연산사 operator)의 의미를 알고 있어야 합니다.
→ 그 후 10 + 20이라는 식(표현식 expression)의 의미도 해석(파싱 parsing)할 수 있어야 할 것 입니다.
✋ 잠깐! 곧 중요해질 메모리 이야기
컴퓨터는 CPU를 통해 연산하고, 메모리를 통해 데이터를 기억합니다.
▪️ 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체를 의미하며, 메모리 셀 1개는 1 바이트(8비트) 입니다.
▪️ 컴퓨터는 메모리 셀 크기(1바이트) 단위로 데이터를 저장하거나 읽어들입니다.
▪️ 각 메모리 셀에는 주소가 있으며 모든 값은 이진수로 저장됩니다.
⚠️ 연산 결과를 재사용하고 싶다면 메모리 주소를 통해 직접 접근해야 하는데 이는 매우 위험하기 때문에 자바스크립트에서는 직접적인 메모리 제어를 허용하지 않습니다.
변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름입니다.
⚠️ 값이 변수 그 자체가 되는 것이 아닙니다! 값의 위치를 가리키는 상징적 이름입니다.
✔️ 변수를 쓰면 나오는 단어들
▪️ 변수명(식별자) : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름
▪️ 변수 값 : 변수에 저장된 값
▪️ 할당(대입,저장) : 변수에 값을 저장하는 것
▪️ 참조 : 변수에 저장된 값을 읽어들이는 것
변수명 옆에 붙어있는 식별자 : 어떠한 값을 구별해서 식별할 수 있는 고유한 이름을 뜻합니다.
→ 식별자는 메모리 공간에 있는 어떤 값을 구별해서 식별해낼 수 있어야 합니다.
→ 그러기 위해선 어떤 값이 저장되어 있는 메모리 주소를 기억(저장)해야 합니다.
식별자는 "메모리 주소에 붙인 이름"이게 되며 선언에 의해 자바스크립트 엔진에 식별자의 존재를 알리게 됩니다.
변수의 선언과정은 다음과 같이 진행 됩니다.
- 값을 저장할 메모리 공간을 확보합니다.
- 변수의 이름과 확보된 메모리 공간의 주소를 연결해서 값 저장이 가능하게 준비합니다. (확보된 메모리 공간은 확보가 해제되기 전까지 공간 사용이 불가능 합니다. 그렇기 때문에 보호 받을 수 있고, 안전하다는 점이 있습니다.)
- 변수 사용 전 반드시 선언이 필요합니다. (var, let, const 키워드)
- 변수 이름을 등록한 후 메모리 저장 공간을 확보합니다.
- 확보된 메모리 공간은 엔진에 의해 undefined가 암묵적으로 할당됩니다. (→ 초기화)
- 사용자가 지정할 값을 대입합니다.
변수 선언 실행 시점과 호이스팅
변수 선언은 소스코드가 한 줄씩 실행되는 시점(런타임 runtime)이 아닌 그 이전 단계에서 먼저 실행됩니다.
런타임 실행 전에 평가 과정이 발생하는데 평가 과정은 소스코드 실행 준비로 해석됩니다.
자바스크립트 엔진은 평가 과정에서 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아내어 먼저 실행해둡니다. 선언문이 먼저 실행되기 때문에 변수 선언 위치와 관계 없이 변수 참조가 가능하게 됩니다. (→ 그래서 참조에러가 안나요)
위와 같은 특징을 호이스팅 hoisting 이라고 하며 호이스팅은 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 것을 의미하게 됩니다.
값을 할당해봅시다.
선언과 할당은 한 번에 표현할 수 있습니다.
var a;
a = 80;
// 밑에 처럼 표현이 가능합니다.
var a = 80;이때 주의할 점은 변수 선언과 값 할당의 실행 시점이 다르다는 점입니다.
▪️ 변수 선언은 런타임 이전에 먼저 실행됩니다.
▪️ 값 할당은 런타임에 실행됩니다.
console.log(a); // undefined → 에러가 안나요
var a = 100;
console.log(a); // 100값을 다시 할당할거예요.
var 키워드로 선언한 변수는 값을 재할당 할 수 있습니다.
값의 재할당이 안되고 변수에 저장된 값을 변경할 수 없다면 변수가 아닌 상수로 불립니다.
변수는 값마다 메모리 셀에 각각 다르게 저장됩니다.
⚠️ 변수가 덮어씌워지는 개념이 아니란 것을 주의해야합니다.
다음 블로그는 var, let, const와 간단한 스코프에 대해 적어야징 히힛
