위 서적을 읽고 중요하다고 생각되거나 모르는 부분을 정리했습니다.
1. 프로그래밍
1. 사람이 이해할 수 있는 자연어로 구성된 프로그래밍 언어를 사용해 프로그램을 작성한다.
2. 컴퓨터가 이해할 수 있는 기계어로 변환하는 번역기인 컴파일러(혹은 인터프리터)를 이용한다.
3. 컴퓨터가 이해할 수 있는 기계어로 변환된다.
2. 자바스크립트란?
2-1. Ajax(Asynchronous Javascript And XMLHttpRequest)
Ajax는 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능입니다.
이전의 웹 페이지는
완전한 HTML 코드를 서버로부터 전송받아 웹 페이지 전체를 렌더링하는 방식으로 동작했습니다.
그래서 아래와 같은 단점이 있었습니다.
1. 불필요한 데이터 통신이 발생합니다.
- 변경할 필요가 없는 부분까지 포함된 HTML 코드를 서버로부터 다시 전송받기 때문입니다.
2. 성능이 좋지 않습니다.
- 변경할 필요가 없는 부분까지 처음부터 다시 렌더링해야하기 때문입니다.
3. 화면이 전환될 때 깜박이는 현상이 발생됩니다.
Ajax 등장 이후의 웹 페이지는
1. 변경이 필요한 부분만 렌더링합니다.
- 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 렌더링합니다.
2. 부드러운 화면 전환이 가능합니다.
2-2. Node.js
구글 v8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경입니다.
Node.js는 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 한 자바스크립트 실행 환경입니다. 주로 서버 사이드 애플리케이션 개발에 주로 사용되고, CPU 사용률이 높은 애플리케이션에는 권장되지 않습니다.
1. 비동기 I/O를 지원합니다.
- 데이터를 실시간으로 처리하기 위해 I/O가 빈번하게 발생하는 SPA에 적합합니다.
2. 단일 스레드 이벤트 루프 기반으로 동작합니다. => 요청 처리 성능이 좋습니다.
3. DOM API가 제공되지 않습니다.
4. 파일을 생성하고 수정할 수 있는 파일 시스템이 제공됩니다.
- (+ 브라우저에서는 파일 시스템이 제공되지 않지만, Web API인 FileReader 객체를 사용해 사용자가 지정한 파일을 읽어들일 수는 있습니다.)
2-3. SPA(Single Page Application)
SPA는 CBD(Component Based Development) 방법론을 기반으로 하는 프레임워크입니다. React, Vue.js 등이 있습니다.
SPA는 최초 한 번 페이지 전체를 로딩한 이후에,
서버로부터 페이지 갱신에 필요한 데이터만 비동기적으로 받아와,
그 정보를 기준으로 현재 페이지를 업데이트하는 방식입니다.
초기 로딩 이후에는 로딩 속도가 빠르기 때문에 사용자 경험을 향상시킬 수 있습니다.
2-4. 자바스크립트의 특징
1. 웹 브라우저에서 동작하는 유일한 프로그래밍 언어
2. 인터프리터 언어
3. 싱글 스레드이면서 논 블로킹 언어
- 스레드가 하나밖에 존재하지 않아, 한 번에 하나의 작업만 할 수 있지만,
- 비동기 처리를 통해 동시에 다른 작업을 수행할 수 있습니다.
4. 멀티 패러다임 프로그래밍 언어
- 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍 지원
- 명령형 프로그래밍: 컴퓨터가 어떻게 작업을 수행해야 하는지 명령하는 방식으로 코드를 작성하는 프로그래밍 패러다임
- 함수형 프로그래밍: 함수를 일급 객체로 취급하고, 함수의 조합을 통해 프로그래밍을 작성하는 프로그래밍 패러다임
- 프로토타입 기반 객체지향 프로그래밍: 객체를 생성하기 위해 다른 객체를 기반으로 만드는 방식으로 객체를 다루는 프로그래밍 패러다임
일급 객체 특징
1. 변수에 할당할 수 있고,
2. 함수의 매개변수로 전달할 수 있고,
3. 함수의 반환값으로 사용될 수 있습니다. (2, 3 중 하나 이상을 만족하는 함수의 경우 고차함수라고 합니다.)
컴파일러 언어 vs 인터프리터 언어
| 컴파일러 언어 | 인터프리터 언어 |
| 컴파일 타임(코드가 실행되기 전 단계)에 소스코드 전체를 한번에 머신코드로 변환 후 실행합니다. | 런타임(코드가 실행되는 단계)에 한 줄씩 중간코드(바이트 코드)로 변환 후 즉시 실행합니다. |
| 실행 파일을 생성합니다. | 실행 파일을 생성하지 않습니다. |
| 컴파일 단계와 실행 단계가 분리되어 있습니다. | 인터프리터 단계와 실행 단계가 분리되어 있지 않습니다. |
| 컴파일을 한 번만 수행됩니다. | 코드가 실행될 때마다 인터프리트 과정이 반복 수행됩니다. |
| 코드 실행 속도가 빠릅니다. | 코드 실행 속도가 컴파일러 언어보다 느립니다. |
3. 자바스크립트 개발 환경과 실행 방법
3-1. npm(Node Package Manager)
npm은 자바스크립트 패키지 매니저입니다.
1. Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과
2. 패키지 설치 및 관리를 위한 CLI(Command Line Interface)를 제공합니다.
4. 변수
4-1. 변수랑 무엇인가? 왜 필요한가?
컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억합니다.
- 메모리: 데이터를 저장할 수 있는 메모리 셀의 집합체입니다. 메모리에 저장되는 모든 값은 2진수로 저장됩니다.
- 셀: 1바이트(8비트)이고, 고유의 메모리 주소를 갖습니다.
다시 질문으로 돌아가서 변수가 왜 필요하냐면,
1. 메모리 주소를 통해 값에 직접 접근하는 것은 치명적 오류를 발생시킬 가능성이 매우 높고,
2. 메모리 주소는 코드가 실행될 때마다 변경되기 때문에, 코드가 실행되기 이전에는 값이 저장된 메모리 주소를 알 수 없기 때문입니다.
따라서,
변수는 하나의 값을 저장하기 위해 확보한 메모리 공간을 식별하기 위해 붙인 이름입니다.
4-2. 식별자
식별자는 메모리 주소에 붙인 이름입니다.
4-3. 변수 선언
변수 선언은 변수를 생성하는 것입니다.
좀 더 자세히 말하자면, 메모리 공간을 확보하고, 식별자와 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것입니다.
변수 선언에 의해 확보된 메모리 공간은 해제되기 전까지는 누구도 사용할 수 없습니다.
자바스크립트 엔진은 변수 선언을 2단계에 거쳐서 수행합니다.
1. 선언 단계
- 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알립니다.
2. 초기화 단계
- 값을 저장하기 위한 메모리 공간을 확보하고, 암묵적으로 undefined를 할당해 초기화합니다.
var 키워드
- 함수 레벨 스코프를 지원해 의도치 않게 전역 변수로 선언된다는 단점이 있습니다.
- 선언과 초기화 단계가 동시에 진행됩니다.
var score; 라는 코드가 있을 때,
1. 식별자 score를 실행 컨텍스트에 등록합니다. - 선언 단계
2. 값을 저장할 메모리 공간을 확보합니다. - 초기화 단계
3. 확보된 메모리 공간에 undefined 값이 할당되어 초기화됩니다. - 초기화 단계
실행 컨텍스트
- 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경입니다.
- 자바스크립트 엔진은 실행 컨텍스트를 통해서 식별자와 스코프(변수와 함수의 유효범위)를 관리합니다.
- 변수명과 변수값은 실행 컨텍스트 내에 키/값 형식인 객체로 등록되어 관리됩니다.
4-4. 변수 선언의 실행 시점과 변수 호이스팅
변수 선언은 컴파일 타임에 먼저 실행됩니다.
그 이유는,
1. 자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기 전에, 소스코드의 평가 과정을 거치면서 준비를 합니다.
2. 소스코드의 평가 과정에서 자바스크립트 엔진은 모든 선언문을 소스 코드에서 찾아서 먼저 실행합니다.
3. 평가 과정이 끝난 후, 모든 선언문을 제외한 소스코드를 한줄씩 순차적으로 실행하기 때문입니다.
다시 말해, 자바스크립트 엔진은 소스코드 위치와 상관없이 변수 선언을 가장 먼저 실행합니다. 따라서 어디서든지 변수를 참조할 수 있습니다.
이처럼 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트의 고유의 특징을 호이스팅이라고 합니다. var, let, const, function, class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅됩니다.
4-5. 값의 할당
변수 선언과 값의 할당은 실행 시점이 다릅니다.
변수 선언은 컴파일 타임에 실행되고, 값의 할당은 런타임에 실행됩니다.
변수에 값을 할당할 때는 이전 값 undefined가 저장되어 있던 메모리 공간을 지우고, 값을 새로 저장하는 것이 아니라, 새로운 메모리 공간을 확보하고, 그 공간에 값을 할당합니다.
그럼 사용하지 않는 값은 어떻게 될까?
가비지컬렉터에 의해서 메모리에서 자동 해제됩니다. 단, 메모리에서 언제 해제될지는 예측할 수 없습니다.
가비지컬렉터란, 애플리케이션이 할당한 메모리 공간을 주기적으로 검사해, 어떤 식별자도 참조하지 않는 메모리 공간의 경우 해제하는 기능입니다. 이를 통해 메모리 누수를 방지할 수 있습니다.
5. 표현식과 문
5-1. 값
값은 식이 평가되어 생성된 결과입니다.
모든 값은 데이터 타입을 가지고, 메모리에 2진수, 즉 비트의 나열로 저장됩니다.
5-2. 리터럴
리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 표기하는 표기법입니다.
자바스크립트 엔진은 런타임에 리터럴을 평가해 값을 생성합니다.
예를 들어 ,
1. 3은 숫자 리터럴이고, 이를 코드에 기술하면
2. 자바스크립트 엔진은 이를 평가해서,
3. 숫자 값 3을 생성합니다.
5-3. 표현식
표현식은 값으로 평가될 수 있는 문입니다.
표현식 여부를 확인하는 가장 쉬운 방법은 개발자 도구를 이용하면 됩니다. 개발자 도구에서 표현식이 아닌 문을 실행하면 undefined를 출력합니다.
5-4. 문
문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위입니다. 명령문이라고도 부릅니다.
문은 여러 토큰으로 구성되는데, 토큰은 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소입니다.
예를 들어, var sum = 1 + 2; 구문이 있을 때 var, sum, =, 1, +, 2, ; 모두 토큰입니다.
6. 데이터 타입
자바스크립트는 8개의 데이터 타입을 제공합니다.
1. 원시 타입(7개): number, string, boolean, undefined, null, symbol, BigInt
2. 참조 타입(1개): 객체, 배열, 함수
BigInt
- 숫자값을 안정적으로 나타낼 수 있는 최대치(2^53 - 1)보다 큰 정수를 표현할 수 있는 새로운 원시값입니다.
- 10n 또는 BigInt(10)와 같이 사용할 수 있습니다.
6-1. undefined 타입
변수를 선언한 이후 값을 할당하지 않은 변수를 참조하면 undefined가 반환됩니다. 즉, 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값이기 때문에 개발자가 의도적으로 undefined를 변수에 할당하는 것은 지양됩니다.
6-2. symbol 타입
다른 값과 중복되지 않는 유일무이한 값입니다. 주로 객체의 키를 만들기 위해 사용합니다.
symbol은 symbol 함수를 호출해 생성합니다.
var key = Symbol('key');
console.log(typeof key); // symbol
6-3. 데이터 타입의 필요성
데이터 타입이 필요한 이유는 데이터 타입 종류에 따라 정해진 크기의 메모리 공간의 크기가 결정되기 때문입니다.
다시 말해,
1. 값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해서,
2. 값을 참조할 때 한 번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해서,
3. 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해서 필요합니다.
6-4. 동적 타이핑
자바스크립트는 정적 타입 언어와 다르게 변수를 선언할 때 타입을 선언하지 않고, 값을 할당하는 시점에 변수의 타입이 동적으로 결정되고, 변수의 타입 변경이 가능합니다.
따라서, 동적 타입 언어는 유연성은 높지만 신뢰성은 떨어지기 때문에
1. 변수는 제한적으로 사용하는 것이 좋습니다.
2. 변수의 유효 범위(스코프)는 최대한 좁게 만들어야 합니다.
3. 전역 변수는 최대한 사용하지 않도록 해야합니다.
4. 변수보다는 상수를 사용하는 것이 좋습니다.
5. 변수는 목적이나 의미를 파악할 수 있도록 네이밍합니다.
댓글