모던 자바스크립트 정리 1

in JS



모던자바스크립트 정리 1

정리

1장 프로그래밍

1.1 프로그래밍

나는 개인적으로 프로그래머의 역할은 요구사항을 반영한 내용을 코드로 말할 수 있게 하는 것이라고 생각한다. Clean Code라는 책을 보면서 느낀 것인데, 좋은 코드는 간결하고 보기 좋아서 내용을 전혀 모르는 다른 사람이 봤을 때도 보고 이해가 쉽게 되는 코드인 것 같다. 그래서 코드로 말을 할 수 있는 능력이 정말 중요하다고 생각한다.

이 책에서도 프로그래밍을 커뮤니케이션에 비유했다. 좀 더 길게 풀자면, 프로그래밍은 정확하고 상세하게 요구사항을 설명하는 작업이라고 한다. 이 말하는 작업에는 컴퓨팅적 사고가 따라오는데 그 이유는 컴퓨터는 인간처럼 주관적인 기준을 세울 수 없기 때문에 객관적인 기준, 즉 논리적 수학적 사고가 필요하기 떄문이다.

1.2 프로그래밍 언어

프로그래머가 말하기 위해서는 기계어로 명령을 컴퓨터에게 전달해야 한다. 하지만 이 기계어가 매우 어렵고 복잡하기 때문에 컴퓨터와 사람이 모두 이해하는 프로그래밍 언어가 필요하다. 이 프로그래밍 언어를 기계어로 번역해주는 거이 컴파일러, 혹은 인터프리터이다. 책에서는 프로그래밍 언어는 구문과 의미의 조합으로 표현된다고 한다.

1.3 구문과 의미

문법적으로 옳다고 기능을 제대로 할 수 있는 것은 아니다. 문법적으로도 옳지만 수행하고자 하는 것을 정확히 수행하는 문제 해결 능력 또한 중요하다. 이를 위해 프로그래머들은 여러 함수와 자료구조를 사용한다.

이를 정리하자면 프로그래밍은 요구사항을 분석해서 자료구조와 함수를 적절히 사용하여 요구사항을 실현하는 것이다.

2장 자바스크립트?

2.1 JS의 탄생

JS는 처음에 웹페이지의 보조적인 기능을 수행하기 위해 탄생했다. 처음에는 모카, 다음에는 라이브스크립트, 후엔 자바스크립트로 이름이 바뀌었다.

2.2 JS의 표준화

마이크로소프트의 JScript가 JS와 표준화되지 못해 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 생겼다. 이 때문에 컴퓨터 시스템의 표준을 관리하는 ECMA에서 ECMAScript를 만들게 된다. ES는 ES6때 큰 변화가 있었고, 그 이후에는 미미한 수정이 있을 것으로 예고되었다.

2.3 성장의 역사

렌더링? : HTML, CSS, JS로 작성된 문서를 해석해서 브라우저에 시각적으로 출력하는 것을 말한다. 혹은 서버에서 데이터를 HTML로 변환해서 브라우저에 전달하는 과정(SSR)을 말하기도 한다.

  1. Ajax

JS를 이용해 서버와 브라우저가 비동기로 데이터를 교환할 수 있는 통신 기능을 의미한다. 원래는 웹페이지 하나를 렌더링 할 때 전체를 불러와야 했는데, 새로운 방법은 웹페이지에서 변경이 필요없는 부분은 냅두고 변경이 필요한 부분만 다시 불러오는 방식을 사용했다. 이로써 브라우저에서도 빠른 성능과 부드러운 화면 전환이 가능해졌다.

  1. jQuery

DOM을 쉽게 제어하고 크로스 브라우징 이슈도 어느 정도 해결했다.

  1. V8 자바스크립트 엔진

더욱 빠르게 동작하는 자바스크립트 엔진이 필요해지면서 등장했다. 이 엔진의 등장으로 인해 과거 웹 서버에서 동작하던 로직들이 클라이언트(브라우저)로 이동했고, FE 영역이 주목받게 된다.

  1. Node.js

V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다. 브라우저 이외의 환경에서도 동작할 수 있도록 JS 엔진을 브라우저 독립시킨 자바스크립트 실행 환경이다. 주로 서버 사이드 애플리케이션 개발에 사용한다.

Node.js는 비동기 I/O를 지원하며 단일 스레드 이벤트 루프 기반으로 동작해서 요청 처리 성능이 좋다. Node.js는 실시간으로 데이터를 처리하기 위해 I/O가 빈번한 SPA(Single Page Application)에 적합하지만, CPU 사용률이 높은 애플리케이션에는 적합하지 않다.

  1. SPA 프레임워크

개발 규모와 복잡도가 상승하면서 많은 패턴과 라이브러리가 등장하게 되었다. 이를 배경으로 CBD(Component Based Development) 방법론을 기반으로 하는 SPA가 대중화되었다.

2.4 JS / ECMAScipt?

ECMAScript는 자바스크립트의 표준 사양을 의미한다. 자바스크립트는 뼈대를 이루는 ECMAScipt와, 브라우저가 별도로 지원하는 클라이언트 사이드 Web API(DOM, BOM, Canvas,,,)를 아우르는 개념이다.

2.5 자바스크립트의 특징

자바스크립트는 웹 브라우저에서 동작하는 유일한 프로그래밍 언어다. 자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어다.

대부분의 자바 스크립트 엔진은 인터프리터와 컴파일러의 장점을 결함해 처리 속도가 느린 인터프리터의 단점을 해결했다.

컴파일러 언어인터프리터 언어
코드가 실행되기 전 단계인 컴파일 타임에 소스코드 전체를 머신 코드로 변환 후 실행코드가 실행되는 단계인 런타임에 한 줄씩 바이트코드로 변환 후 실행
실행 파일 생성실행 파일 생성 X
컴파일, 실행 단계 분리인터프리트, 실행 단계 분리 X
컴파일은 단 한 번만코드가 실행될 때마다 인터프리트 과정 반복
컴파일/실행이 분리되었으므로 실행 속도 빠름인터프리트/실행 반복 수행, 느림

자바스크립트는 런타임에 컴파일 되며 실행 파일이 생성되지 않고 인터프리터 도움 없이 실행할 수 없기 때문에 컴파일러 언어는 아니다. 또한 명령형, 함수형, 프로토타입 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다.

4장 변수

4.1 변수란 무엇인가? 왜 필요한가?

애플리케이션은 데이터를 다룬다. 변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다. 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해 변수라는 매커니즘을 사용한다.

즉, 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. 값의 위치를 가리키는 상징적인 이름이라고 말할 수 있다. 변수를 이용하면 개발자가 직접 메모리 주소를 통해 값을 저장, 참조할 필요가 없게 된다.

참고로 변수에는 값을 여러개 저장할 수도 있다. 객체나 배열과 같은 자료구조를 사용하면 여러 개의 값을 하나로 그룹화 해서 하나의 값처럼 사용할 수 있다.

메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름을 변수 이름, 변수에 저장된 값을 변수 값이라고 한다. 변수에 값을 저장하는 것을 할당(대입, 저장), 변수에 저장된 값을 읽어 들이는 것을 참조하고 한다.

4.2 식별자

변수 이름을 식별자라고도 한다. 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다. 식별자는 값이 아니라 메모리 주소를 기억하고 있다.

식별자는 변수 이름에만 국한하지 않고, 변수, 함수, 클래스 등의 이름처럼 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자라고 부른다.

4.3 변수 선언

변수를 선언한다는 것은 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것이다. 이렇게 선언된 메모리 공간은 확보가 해제되기 전까지는 보호된다.

변수를 사용하려면 반드시 선언이 필요하다. 이때 키워드는 var, let, const를 사용할 수 있다.