자바스크립트의 기본 개요
이 책의 저자와 마찬가지로 개발을 할 때 코드를 잘 가져다 쓰고 디버깅을 잘하는 것만으로는
좋은 개발자가 될 수 없다고 생각합니다.
자바스크립트를 제대로 배우지 않은 상태로 리액트를 배워 개발을 했었는데
이번 기회에 자바스크립트의 핵심 원리에 대해 이해해보고자 합니다.
자바스크립트 소개
웹 브라우저에서 동작하는 스크립트 언어입니다.
초창기에는 웹 개발에 있어서 보조적인 역할만을 수행했습니다.
대부분의 로직은 주로 웹 서버에서 실행되었고, 웹 브라우저에서는 서버로 부터 받은 HTML, CSS, 데이터를 렌더링 해주는 수준이었다고 합니다. 이러한 전통적인 웹 페이지의 방식에서는 서버사이드렌더링을 사용했다고 합니다.
하지만 웹의 지속적인 발전으로 과거에 서버에서 담당하던 역할들이 상당 부분 웹 브라우저로 이동하게 되고
JQuery의 등장으로 DOM을 더욱 쉽게 핸들링하면서 자바스크립트는 많은 발전을 이루게 됩니다.
또한 Node.js의 등장으로 자바스크립트를 이용하여 서버 개발이 활발해지면서 많은 개발자가 자바스크립트를 사용하게 됩니다.
자바스크립트 핵심 개념
1. 객체
기본 데이터 타입인 boolean, number, string
특별한 값 null, undefined를 제외한 나머지는 모두 객체이다.
여기서 3가지의 기본 데이터 타입 또한 객체처럼 다룰 수 있기에 null, undefined를 제외한 모든 것을 객체로 다룰 수 있다.
2. 함수
자바스크립트에서는 함수도 객체로 취급한다.
일반적인 객체보다 많은 기능이 포함되어 있고, 함수는 일급 객체로 다뤄진다.
3. 프로토타입
모든 객체는 숨겨진 링크인 프로토타입을 가진다.
이 링크는 해당 객체를 생성한 생성자의 프로토타입 객체를 가리킨다.
이 링크로 자바스크립트는 다양한 자신만의 자료 구조를 작성할 수 있다.
프로토타입을 활용한 객체지향의 상속도 구현이 가능하다.
4. 실행 컨텍스트와 클로저
자바스크립트는 자신만의 독특한 과정으로 실행 컨텍스트를 만들고 그안에서 실행이 이루어진다.
이 실행 컨텍스트는 자신만의 유효 범위를 갖는데, 이 과정에서 클로저를 구현할 수 있다.
클래스형 프로그래밍과 함수형 프로그래밍
자바스크립트는 프로토타입과 클로저를 이용하여 객체지향 프로그래밍에서 제시하는 상속, 캡슐화, 정보 은닉 등의 개념을 소화할 수 있다.
자바스크립트의 주요 특성인 일급 객체로서의 함수 특성과 클로저를 활용하여 함수형 프로그래밍을 할 수 있다.
자바스크립트의 단점
자바스크립트는 유연한 언어로서 느슨한 타입 체크로 개발자에게 타입 체크에 대한 자유를 주지만, 컴파일 타임에 에러를 잡지 못하고 런타임 에러로 발견되는 단점이 있다.
최상위 레벨의 객체들은 모두 전역 객체 안에 위치하는데, 이름 충돌의 위험성이 있다.
GoF 패턴은 이 분야의 4인방(Gang of Four, GoF)으로 불리는 에리히 감마(Erich Gamma), 리처드 헬름(Richard Helm), 랄프 존슨(Ralph Johnson), 존 블리시데스(John Vlissides)가 같이 고안한 디자인 패턴이다.
| 패턴 분류 | 패턴 이름 | 패턴 설명 |
| 생성 패턴 | Abstract Factory | 구체적인 클래스에 의존하지 않고 서로 연관되거나 의존적인 객체들의 조합을 만드는 인터페이스를 제공하는 패턴 |
| Factory Method | 객체 생성 처리를 서브 클래스로 분리해 처리하도록 캡슐화 하는 패턴 | |
| Singleton | 전역 변수를 사용하지 않고 객체를 하나만 생성하도록 하며, 생성된 객체를 어디에서든지 참조할 수 있도록 하는 패턴 | |
| 구조 패턴 | Composite | 여러 개의 객체들로 구성된 복합 객체와 단일 객체를 클라이언트에서 구별 없이 다루게 해주는 패턴 |
| Decorator | 객체의 결합을 통해 기능을 동적으로 유연하게 확장할 수 있게 해주는 패턴 | |
| 행위 패턴 | Observer | 한 객체의 상태 변화에 따라 다른 객체의 상태도 연동되도록 일대다 객체 의존 관계를 구성하는 패턴 |
| State | 객체의 상태에 따라 객체의 행위 내용을 변경해주는 패턴 | |
| Strategy | 행위를 클래스로 캡슐화해 동적으로 행위를 자유롭게 바꿀 수 있게 해주는 패턴 | |
| Template Method | 어떤 작업을 처리하는 일부분을 서브 클래스로 캡슐화해 전체 일을 수행하는 구조는 바꾸지 않으면서 특정 단계에서 수행하는 내역을 바꾸는 패턴 | |
| Command | 실행될 기능을 캡슐화함으로써 주어진 여러 기능을 실행할 수 있는 재사용성이 높은 클래스를 설계하는 패턴 |
참고
인사이드 자바스크립트 (책)