react 클론 코딩 강의를 들어보았따.
2년 전 강의였다.
진도를 빼는데 바뀐 라이브러리의 사용법을 익히는 것에 시간을 많이 쓰는 나를 보고
과연 프론트 엔드 개발자가 '라이브러리 사용법'이 중요할까? 라는 생각이 들었고
나는 라이브러리 보다 리액트를 통한 프로젝트보다 '자바스크립트'의 동작원리와 기본이 중요하다.'고 결론을 내렸다.
잡설은 그만하고 오늘 공부한 것을 블로그에 차근차근 정리하려고 한다.
- Node.js
2009년 Ryan Dhal이 발표한 Node.js는 Chrome V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다.
간단히 말해 브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작시킬 수 있는 자바스크립트 실행 환경이다.
주로 서버사이드 애플리케이션 개발에 사용되며 이에 필요한 모듈, 파일 시스템, HTTP 등 빌트인 API를 제공한다.
Node.js는 데이터를 실시간 처리하여 빈번한 I/O가 발생하는 SPA(Single Page Application)에 적합하다.
- npm
Node.js에서 사용할 수 있는 모듈들을
패키지화하여 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI(Command line interface)를 제공한다.
자신이 작성한 패키지를 공개할 수도 있고, 필요한 패키지를 검색하여 재사용할 수도 있다.
자바스크립트가 가장 많이 사용되는 분야는 Web Page/Application이다.
대부분의 프로그래밍 언어는 운영체제 위에서 실행되지만, 웹 애플리케이션의 자바스크립트는
브라우저에서 HTML, CSS와 함께 실행된다.
그래서, 브라우저 환경을 고려할 때보다 효율적인 자바스크립트 프로그래밍이 가능하다.
- 브라우저의 핵심 기능
사용자가 참조하고자하는 웹페이지를 서버에 요청 > 서버의 응답을 받고 > 브라우저에 표시하는 것
브라우저는 서버로부터 HTML, CSS, Javascript, 이미지 파일 등을 받음
HTML, CSS 파일은 렌더링 엔진(HTML parser, CSS parser)에 의해 파싱되어 DOM, CSSOM 트리로 변환되고
렌더 트리로 결합된다.
이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹페이지를 표시한다.
자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다.
HTML parser는 script태그를 만나면 자바스크립트 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘긴다.
제어권한을 넘겨 받은 자바스크립트 엔진은 script태그 내의 자바스크립트 코드 또는 script 태그의 src attibute(속성)에 정의된 자바스크립트 파일을 로드하고 파싱하여 실행된다.
자바스크립트의 실행이 완료되면 다시 HTML parser로 제어권한을 넘겨서 브라우저가 중지했던 시점부터 DOM생성을 개시한다.
이처럼 브라우저는 동기적으로 처리한다.
이것은 script태그의 위치에 따라 블로킹이 발생하여 DOM 생성이 지연될 수 있따는 것을 의미한다.
블로킹이란? 어떠한 코드가 실행됨에 따라 해당 코드의 실행 때문에 다른 코드를 실행할 수 없는 현상을 말한다.
따라서 script태그의 위치는 중요한 의미를 갖는다.
그래서 body 요소의 가장 아래에 자바스크립트를 위치시키는 것은 좋은 아이디어다.
이유는 아래와 같다.
1. HTML 요소들이 스크립트 로딩 지연으로 인해 렌더링에 지장받는 일이 발생하지 않아 페이지 로딩 시간이 단축된다.
2. DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작한다면 에러가 발생한다.
- 자바스크립트 코드
자바스크립트는 C나 Java와는 다르게 변수를 선언할 때 데이터 타입을 미리 지정하지 않는다.
변수에 할당된 값의 타입에 의해 동적으로 변수의 타입이 결정된다.
이를 동적 타이핑이라 하며, 자바스크립트가 다른 프로그래밍 언어와 구별되는 특징이다.
문(statement)과 표현식의 차이
표현식은 그 자체로 하나의 statement가 될 수 있다.
표현식은 평가되어 값을 만들지만 그 이상의 행위는 할 수 없다.
statement는 var, function과 같은 선언 키워드를 사용하여 변수나 함수를 생성하기도 하고
if, for, while문과 같은 제어문을 생성하여 프로그램의 흐름을 제어하기도 한다.
표현식을 통해 평가한 값을 통해 실제로 컴퓨터에게 명령을 하여 무언가를 하는 것은 statement다.
- 함수 (function)
함수란 어떤 작업을 수행하기 위해 필요한 statement들의 집합을 정의한 코드 블록이다.
function square(num) {
return num * num;
}
square(2);
//Output : 4
- 객체 (object)
자바스크립트는 객체 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 "모든 것"이 객체이다.
원시타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규 표현식 등)은 모두 객체이다.KEY(이름)와 Value(값)으로 구성된 Property의 집합이다.
프로퍼티의 값으로는 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다.
자바스크립트의 함수는 일급객체 이므로 값으로 취급할 수 있다.
따라서 프로퍼티 값으로는 함수를 사용할 수도 있으며 _프로퍼티 값이 함수일 경우_,
일반 함수와 구분하기 위해 **메소드**라 부른다.
개인적으로 좋아하는 MicroSoft에서는
"property는 object를 위해 데이터를 저장하고, method는 object가 요청받을 수 있는 액션이다."
라고 했단다.
var person = {
name: 'Hyeok',
gender: 'male',
sayHello: function () {
console.log('Hi! My name is ' + this.name);
}
};
console.log(typeof person); // object
console.log(person); // { name: 'Hyeok', gender: 'male', sayHello: [Function: sayHello] }
person.sayHello(); // Hi! My name is Hyeok
위와 같이객체는 데이터를 의미하는 property와 데이터를 참조하고 조작할 수 있는 동작을 의미하는 method로 구성된 집합이다.
객체는 데이터(propery)와 그 데이터에 관련되는 동작(method)을 모두 포함할 수 있기 때문에 동작을 하나의 단위로 구조화할 수 있어 유용하다.
자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 "프로토타입"이라고 불리는객체의 프로퍼티와 메소드를 상속받을 수 있다.
이 프로토타입은 타 언어와 구별되는 중요한 개념이다.
- 배열
배열은 1개의 변수에 여러개의 값을 순차적으로 저장할 때 사용한다.
자바스크립트의 배열은 객체이며, 유용한 내장 메소드를 포함하고 있다.
프로그래밍은 변수를 통해 값을 저장하고 참조하며 연산자로 값을 연산, 평가하고 조건문과 반복문에 의한 흐름제어로
데이터의 흐름을 제어하고 함수로 재사용이 가능한 구문의 집합을 만들며 객체, 배열 등으로 자료를 구조화한 것이다.
변수는 값의 위치(주소)를 기억하는 저장소이다.
값의 위치란 값이 위치하고 있는 메모리 상의 주소를 의미한다.
즉, 변수란 값이 위치하고 있는 메모리 주소에 접근하기 위해 사람이 이해할 수 있는 언어로 명명한 식별자(identifier)이다.
자바스크립트는 동적타입 언어이다.
변수의 타입 지정없이 값이 할당되는 과정에서 자동으로 변수의 타입이 결정(타입추론 :Type Inference) 된다.
즉, 변수는 고정된 타입이 없다. 따라서 같은 변수에 여러 타입의 값을 자유롭게 할당할 수 있다.
- DataType
- number
자바스크립트는 독특하게 하나의 숫자 타입만이 존재한다.
2진수, 8진수, 16진수 리터럴은 메모리에 동일한 배정밀도 64비트 부동소수점 형식의 2진수로 저장된다.
자바스크립트는 2진수, 8진수, 16진수 데이터 타입을 제공하지 않기 때문에 참조하면 모두 10진수로 해석된다.
console.log(binary); // 65
console.log(octal); // 65
console.log(hex); // 65
// 표기법만 다를뿐 같은 값이다.
console.log(binary === octal); // true
console.log(octal === hex); // true
자바스크립트의 숫자 타입은 정수만을 위한 타입이 없고 모든 수를 실수로 처리한다.
정수로 표시된다해도 사실은 실수다. 따라서, 정수로 표시되는 수끼리 나누더라도 실수가 나올 수 있다.
- String
일반적인 표기법은 작은 따옴표이지만, 큰 따옴표도 사용한다.
자바스크립트의 문자열은 원시타입이며 변경불가능(immutable)하다.
var str = "Hello";
str = "world";
console.log(str); //output : world첫번째 구문이 실행되면 메모리에 문자열 'Hello'가 생성되고 식별자 str은 메모리에 생성된 문자열 'Hello'의 메모리 주소를 가리킨다.
두번째 구문이 실행되면 이전에 생성된 문자열 'Hello'을 수정하는 것이 아니라 새로운 문자열 'world'를 메모리에 생성하고 식별자 str은 이것을 가리킨다.
이 때 문자열 'Hello'와 'world'는 모두 메모리에 존재하고 있다.
변수 str은 문자열 'Hello'를 가리키고 있다가 'world'가리키도록 변경되었을 뿐이다.
var str = 'string';
// 문자열은 유사배열이다.
for (var i = 0; i < str.length; i++) {
console.log(str[i]);
// Output : s t r i n g
}
// 문자열을 변경할 수 없다.
str[0] = 'S';
console.log(str); // Output : string문자열은 배열처럼 인덱스를 통해 접근할 수 있다. 이와 같은 특성을 갖는 데이터를 유사 배열이라한다.
한번 생성된 문자열은 read only로서 변경할 수 없다. 이것을 변경 불가능(immutable)이라 한다.
그러나 새로운 문자열을 재할당하는 것은 가능하다.
이는 기존 문자열을 변경하는 것이 아니라 새로운 문자열을 새롭게 할당하는 것이기 때문이다.
- Boolean
불리언 타입의 값은 논리적 참, 거짓을 나타내는 true & false 뿐이다.
비어 있는 문자열과 null, undefined, 숫자0은 false로 간주된다.
- undefined
타입 값은 undefined가 유일하다.
선언 이후 값을 할당하지 않은 변수는 undefined 값을 가진다.
즉, 선언은 되었지만 값을 할당하지 않은 변수에 접근하거나 존재하지 않는 객체 프로퍼티에 접근할 경우 undefined가 반환된다.
이는 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이루어 질때까지 빈 상태 (대부분 비어있지 않고 쓰레기 값이 들어 있다.)로 내버려 두지 않고 자바스크립트엔진이 undefined로 초기화하기 때문이다.
- null
타입 값은 null이 유일하다.
자바스크립트는 대소문자를 구별(case-sensitive)하므로 Null, NULL등과 다르다.
프로그래밍 언어에서 null은 의도적으로 변수에 값이 없다는 것을 명시할때 사용한다.
이는 변수가 기억하는 메모리 어드레스 참조 정보를 제거하는 것을 의미하며, 자바스크립트 엔진은 누구도
참조하지 않는 메모리 영역에 대해 가비지 콜렉션을 수행할 것이다.
var foo = null;
console.log(typeof foo); // Output : object타입을 나타내는 문자열을 반환하는 typeof 연산자로 null값을 연산해 보면 null이 아닌 object가 나온다.
이는 자바스크립트의 설계상 오류이다.
- symbol
심볼은 ES6에서 새롭게 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값이다.
심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 property key를 만들기 위해 사용한다.
Symbol 함수를 호출해 생성한다. 이때 생성된 심볼 값은 다른 심볼 값들과 다른 유일한 심볼 값이다.
- Object type 객체 타입
객체는 데이터와 그 데이터에 관련한 동작(절차, 방법, 기능)을 모두 포함할 수 있는 개념적 존재이다.
!! 이름과 값을 가지는 데이터를 의미하는 프로퍼티와 동작을 의미하는 메소드를 포함할 수 있는 독립적 주체이다.
자바스크립트는 객체 기반의 스크립트 언어로서 자바스크립트를 이루고 있는 거의 "모든 것"이 객체이다.
(!!!!)
원시 타입(Primitives)을 제외한 나머지 값들(배열, 함수, 정규표현식 등)은 모두 객체이다.
또한 객체는 pass-by-reference(참조에 의한 전달) 방식으로 전달된다.
.
.
.
.
원래 알던 내용들도 있지만 새롭게 알게 된 것들도 있다.
아직은 기초의 중요성을 모르겠지만, 차근차근하다 보면 깨달을 날이 있을 거라고 난 믿는다.
대한민국 모든 취준생들 화이팅이다...!!!
'Javscript' 카테고리의 다른 글
| [Javascript] 자바스크립트 (1/19) (0) | 2022.01.20 |
|---|---|
| [Javascript] 자바스크립트 (1/17) (0) | 2022.01.17 |
| [Javascript] 자바스크립트 (1/16) (0) | 2022.01.17 |
| [Javascript] 자바스크립트 (1/14) (0) | 2022.01.16 |
| [Javascript] 자바스크립트 (1/13) (2) | 2022.01.14 |