Deep Dive 스터디_1

Seoyong Lee·2021년 9월 4일

JavaScript 딥다이브

JavaScript / TypeScript

목록 보기

19/25

poiemaweb.com 을 기반으로 한 스터디 내용 정리 글입니다.

1. 기본 개념과 동작 원리 이해의 중요성

프로그래밍이란 무엇일까? 자바스크립트를 몇 달이나 공부하면서도 이러한 질문을 제대로 생각해 보지 않았던 것 같다. 컴퓨터는 0과 1밖에 알지 못한다. 우리가 컴퓨터를 이용해서 원하는 작업을 하기 위해서는 반드시 컴퓨터의 입장에서 생각해야 한다.

컴퓨터에게 복잡한 수학 연산은 쉽지만 추상적인 개념을 이해시키기는 어렵다. 이러한 차이를 이해하여 해결할 과제를 작은 단위로 분리하고, 패턴화하여 평가할 수 있도록 정의하는 것이 바로 Computational thinking 이다. 예를 들어 사람처럼 걷는 로봇을 만든다고 생각해 보면 우리는 어떤 발을 어떻게 움직이고, 장애물은 어떻게 피할 것인지 등에 대한 모든 판단 기준을 설정해야 한다.

그렇다면 이러한 컴퓨터에게 우리의 생각을 전달할 방법은 무엇일까? 컴퓨터는 기계어만을 알아듣기 때문에 우리 인간의 언어로 직접 명령을 내릴 수는 없다. 그렇다면 우리가 직접 기계어를 배워야 할까? 그러기엔 기계어는 인간의 언어와는 너무 다른 체계를 가지고 있다. 그래서 생각해낸 방식이 바로 서로 다른 두 언어의 중간에 번역기를 두는 것으로 이것이 바로 구문(Syntax)으로 구성된 프로그래밍 언어이다.

프로그래밍 언어는 syntax(문법)와 semantics(의미) 로 이루어져 있는데, 이 둘이 모두 만족하여야 완전히 요구사항을 실현할 수 있다. 예를 들어 특정 코드가 문법적으로는 문제가 없지만, 변수 이름이 타입과 맞지 않는다면 이는 정확한 문제의 해결이라고 볼 수 없다.

종합하면 프로그래밍은 요구사항의 집합을 분석하여 적절한 자료구조와 함수의 집합으로 변환한 후, 그 흐름을 제어하는 것이다.

이러한 프로그래밍에서 중요한 두 가지는 기본 개념과 동작 원리를 이해하는 것이다. 기본 개념을 정확하게 알고 있으면 문맥에 맞는 용어 사용을 가능케 하며, 이는 최종적으로 협업 능력 상승으로 이어진다. 또한 동작 원리의 이해는 코드의 실형 결과에 대한 예측을 가능하게 해주며, 이를 통해서 디버깅을 할 수 있게 된다.

챕터를 정리하면 다음과 같다.

정리

컴퓨터는 사람과 다르므로 이에 맞는 사고방식(Computational thinking)이 필요하다.
인간의 생각을 컴퓨터에 전달하기 위한 언어가 바로 프로그래밍 언어로 이는 syntax와 semantics로 이루어져 있다.
프로그래밍은 요구사항을 분석, 분할하여 흐름을 제어하는 것이다.
프로그래밍의 기본 개념과 동작 원리를 이해하는 것은 매우 중요하다.

궁금한 점

기계어와 인간의 언어가 서로 다르다면 인간이 얼마나 기계와 가까워져야 하는가? 인간에게 더 편한 프로그래밍 언어는 성능 저하를 일으킬까?
컴퓨터 언어가 아무리 발달해도 동작을 실행단위로 분리하는 작업은 인간의 머리로 해야 하므로 개발자란 직업은 앞으로도 영원히 존재하게 될까?
개발자의 능력이란 무엇일까? 코드 예측 능력이 중요하다면 지나치게 console.log에 의존하는 것은 잘못된 방법일까?

2. 자바스크립트란?

자바스크립트는 HTML의 동적 표현을 위해 브렌던 아이크(Brendan Eich)가 1995년 개발하였다. 최초에 자바스크립트는 넷스케이프 브라우저를 위해 개발되었으나 마이크로소프트가 IE를 위해 JScript라는 파생 버전을 만들면서 크로스 브라우징 이슈가 발생하게 된다. 이러한 문제를 해결하기 위해 넷스케이프는 비영리 기구인 ECMA 인터내셔널에 자바스크립트 표준화를 요청한다. 이렇게 탄생한 것이 바로 ECMAScript(ES) 로 자바스크립트는 이를 토대로 만들어진 언어이다.

둘의 관계가 애매할 수 있는데, 다시 정리하면 ES는 JS의 표준 버전이고(ES 자체도 사실 스크립트 언어이다), 이를 기반으로 만들어진 언어 중 하나(ES는 JScript도 포함한다)가 바로 JS이다. JS 입장에선 또다시 ES와 클라이언트 사이드 Web API로 구성된다. 여기서 클라이언트 사이드 Web API는 바로 DOM, BOM, Canvas, Fetch 등으로 W3C(World Wide Web Consortium)에서 별도의 명세로 관리한다.

자바스크립트가 한 단계 발전하게 된 계기는 바로 Ajax(Asynchronous JavaScript and XML)의 등장이다(1999). Ajax는 서버와 브라우저가 비동기적으로 데이터를 교환할 수 있도록 해주는 통신 기술이다. 기존 웹 페이지는 조금의 화면 변경에도 웹 페이지 전체를 렌더링하였으나, Ajax는 변경이 발생한 특정 부분만 렌더링하여 빠르고 부드러운 화면 전환을 가능케 하였다.

2006년, jQuery의 등장으로 DOM(Document Object Model) 조작 개선과 크로스 브라우징 이슈가 해결되면서 수많은 개발자들이 양성되기 시작하였다.

2008년 등장한 구글의 V8 자바스크립트 엔진은 빠른 성능을 통해 웹 서버에서 수행하던 기능을 클라이언트(브라우저)로 이동시켜 프론트엔드 영역이 주목받는 계기를 마련하였다.

2009년 Node.js의 등장으로 이제 자바스크립트를 이용한 서버 구축이 가능해졌다. 따라서 프론트와 백단 모두 한 언어로 개발이 가능해졌고, 자바스크립트는 범용 프로그래밍 언어로 발전하게 된다. 또한 이러한 특성 덕분에 자바스크립트는 크로스 플랫폼을 위한 언어로 주목받게 되었다. 웹, 모바일, 서버(Node.js), 데스크톱(Electron), 머신러닝(TensorFlow.js), 로보틱스(Johnny-Five)등 자바스크립트는 이제 모든 영역에서 사용되고 있다.

최근 자바스크립트만으로는 개발이 어려울 정도로 프로젝트의 규모가 복잡하고 커지면서 SPA(Single Page Application)의 유행과 함께 Angular, React, VueJS 등의 프레임워크/라이브러리의 사용이 보편화 되고 있다.

정리

1995년 브렌던 아이크(Brendan Eich)가 자바스크립트 개발
1997년 크로스 브라우징 이슈로 ECMAScript1 등장
1999년 Ajax의 등장
2006년 jQuery를 통해 DOM 조작 개선 및 크로스 브라우징 이슈 해결
2008년 구글 V8 자바스크립트 엔진 등장, 프론트엔드 발전 계기
2009년 Node.js 등장, 범용 프로그래밍 언어로의 확장
2015년 ES6 공개, let, const, class, 화살표 함수, 템플릿 리터럴, 구조분해 할당, spread, rest, Symbol, Promise, Map, module import/export 등 추가

자바스크립트의 특징

웹 브라우저에서 동작하는 유일한 프로그래밍 언어
명령형(imperative) 프로그래밍 언어 (jQuery나 Angular의 2-Way binding은 선언형(declarative) 개념을 도입하였다)
함수형(functional) 프로그래밍 언어
프로토타입 기반(prototype-based) 객체지향 언어 (더글라스 크록포드에 의하면 자바스크립트는 객체지향 언어이다)
인터프리터 언어(JIT Compiler 등의 모던 자바스크립트 엔진은 컴파일러와 인터프리터가 결합한 방법을 사용한다)
기본 문법은 C, Java과 유사
Self에서 프로토타입 기반 상속 차용
Scheme에서 일급 함수 차용