javascript란??

프로토타입 기반의 프로그래밍 언어로, 스크립트 언어에 해당된다. Html이 웹 페이지의 기본 구조를 담당, CSS가 디자인을 담당, 그리고 JavaScript는 클라이언트 단에서 웹 페이지가 동작하는 것을 담당한다.
이 javascript는 웹 브라우저에 인터프리터(소스코드를 바로 실행하는 환경)가 내장되어 있다.

html, css는 마크업언어로 대체가 가능하지만 javascript의 경우 현재까지 웹 브라우저에서 사용할 수 있는 거의 유일한 언어이자 대체재가 존재하지 않는 언어이다.

😊 특징

JavaScript는 클래스라는 개념이 없습니다. 그래서 기존의 객체를 복사하여(cloning) 새로운 객체를 생성하는 프로토타입 기반의 언어입니다. 프로토타입 기반 언어는 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들어냅니다. 이렇게 생성된 객체 역시 또 다른 객체의 원형이 될 수 있습니다. 프로토타입은 객체를 확장하고 객체 지향적인 프로그래밍을 할 수 있게 해줍니다.

제 개인 블로그에 Spring파트에 springBean 파트에 보면 singleton과 프로토 타입에 차이가 잘 나와 있다.

singleton 패턴의 경우 특정한 객체를 복사할 때 그 객체에 대한 주소값을 참조한다.

prototype 의 경우 특정한 객체를 복사할 때 그 객체 자체를 완전하게 복사를 해버리기 때문에 같은 객체라고 할지라도 완전히 다른 객체라고 보면 된다. (주소값이 다름)

그렇지만 자바스크립트의 경우 이런 프로토 타입과는 살짝 다르게 복제가 아닌 프로토타입 링크를 통해 원형을 참조한다.

자바스크립트의 프로토타입에 대해 자세히 알고 싶으면 클릭

이처럼 클래스 개념이 모호한 자바스크립트이기 때문에 클래스 개념의 도입과 변수 선언을 let, const로 하여 모호한 클래스 개념을 조금이나마 알기 쉽게 만들어 주었다.

javascript의 객체지향 프로그래밍은 함수 프로토타입에 기반한 객체지향 프로그래밍이다. 결국 근본적으로 JavaScript는 함수와 함수형 프로그래밍을 제대로 이해하지 않으면 제대로 다룰 수 없는 언어이다.

이런 특징 때문에 for이나 while 등의 loop은 특수한 경우를 제외하고는 쓰이지 않으며, 어떤 동작을 수행시키는 데 있어서 JavaScript에서 제공되는 prototype function에 콜백함수를 제공하여 선언적으로(declarative programming) 코드를 작성하게 된다. 일반적으로 대학교에서 C++ 등으로 프로그래밍을 시작한 사람이라면 이런 코딩 스타일에 익숙해지는 데 시간이 걸리지만, 한번 익히고 나면 매우 간단명료하게 코드를 쓸 수 있다는 점, 언제나 Immutability가 보장된다는 점, 순수 함수(Pure Function)을 기반으로 코드가 작성되기 때문에 예상치 못한 버그가 최소화된다는 점 등이 매력적인 요소가 정말 많은 프로그래밍 패러다임이다.

JS는 동적 타이핑, 약타입 언어고, 간단한 문법에 코딩 방법이 비교적 유연하기 때문에 초기 진입장벽이 거의 없어서 쉽다고 이야기 되지만, 깊이 들어가 보면 매우 변태적인 특이한 언어이자 매우 우수한 설계를 자랑하는 강력한 언어이다. 편하면서도 강력한 텍스트 표기법(JSON)을 가졌으며, 구조적으로 비동기 프로그래밍에 유리하다. 이러한 비동기 프로그래밍에 특화된 특징은 이후 Node.js를 탄생시키며 JavaScript라는 언어의 사용 반경을 폭발적으로 늘리는 데 기여하게 된다.

이 때문에 현재 JavaScript는 확장성이 매우 높은 언어이다. JavaScript만 알면 일반적인 사이트 개발부터 React.js 또는 Vue.js를 사용해 SPA (Single Page Application) 웹사이트 개발, iOS와 안드로이드 앱을 만들수 있는 React Native, 웹서버나 다른 서버 사이드 어플리케이션에 Node.js, 데스크탑 앱은 리눅스, macOS, 윈도우, tvOS 등 플랫폼에서 사용 가능한 Electron을 이용하거나 React Native for Windows를 사용해 Windows 10 SDK까지 접근할수 있다.

😉 DOM과 JavaScript

오늘날 JavaScript가 가장 널리 쓰이는 분야는 클라이언트용 인터페이스이다. 이 때 주로 JavaScript는 웹 브라우저에서 제공되는 DOM API로 사용하게 된다.

JavaScript에서 html의 문서에 접근하는 API를 뜻하는 용어로 DOM이 등장하였다.

ex) addEventListener

😂주요 라이브러리

1. jQuery: DOM Manipulating 라이브러리. 사실상 자바스크립트 개발에 필수였던 라이브러리였으나 리액트, 앵귤러 등의 프레임워크의 생산성이 워낙 높다 보니 2010년대 후반부터는 사실상 레거시가 되었으며 아주 간단한 웹사이트에서만 쓰이고 안쓰는 추세다. 기본적으로 document.querySelectorAll('oooo')를 $('oooo')로 쓸 수 있는 등의 기능이 있다.

2. AngularJS: 구글에서 제작한 프론트엔드용 클라이언트 사이드 JavaScript 프레임워크. Angular 1으로도 불린다. 백엔드, 프론트엔드를 동시에 작업 할 수 있다. MongoDB, Express, AngularJS, Node.js를 함께 사용하여 MEAN Stack으로 많이 사용한다. Angular 2 이후로는 이건 TypeScript를 이용한다. 기본적으로 많은 기능들이 내재되어 있다.

3. React: Facebook에서 만든 프론트엔드용 오픈소스 라이브러리다. 단방향 데이터 흐름과, Virtual DOM 개념을 도입한 UI 컴포넌트 라이브러리. 생산성이 높고,
   DOM 업데이트에 있어서 성능이 매우 빨라 동적인 웹 어플리케이션 구성에 유리하다. 그리고 이러한 동적 웹이 모던 웹 어플리케이션의 필수 요소가 되어버린만큼 출시 이후 꾸준히 점유율을 늘려가며 업계 표준 라이브러리 중 하나로 자리잡았다. 최근에는 React Hooks이라 불리는 메소드가 지원되면서 생산성이 더 좋아졌다. html로 뷰를 작성해야하는 Angular와는 다르게 JSX라는 문법을 지원하면서 JavaScript만으로 어플리케이션을 작성하는게 가능하다. 기존 문서에는 MVC의 V(View)를 담당하는 라이브러리라고 되어 있었으나 리액트는 MVC framework가 아니며 View뿐만 아니라 Controller 부분까지도 리액트 컴포넌트 내에서 작성이 가능하므로 정확한 설명이 아니다.

4. Vue.js: 중국계 미국인 에반 유가 만든 사용자 인터페이스를 만들기 위한 프론트엔드용 프레임워크이다. 굉장히 자유롭고 유연하게 추가 기능들을 불러올 수 있다는 특징이 있으나 추가 기능들을 무분별하게 사용하는 경우 안정성을 떨어뜨릴 수 있다.

5. Node.js: 브라우저 안에서만 작동하던 JavaScript를 브라우저 외의 환경에서 작동할 수 있게 만들어 준 런타임 환경이다.

6. Express.js: Node.js를 위한 웹 애플리케이션 프레임워크. 주로 Node로 백엔드 개발할 때 사용된다.

7. Deno: Node.js의 개발자 Ryan Dahl이 Node.js의 아쉬운점을 개선한 JavaScript 엔진이다.

javascript를 대충대충 써보았지 제대로 공부하기에 앞서 어떤 언어인지 알고 싶어 나무위키의 내용을 내가 이해한 선에서 따라 적어 보았다.

더 자세히 알고 싶으면 자바스크립트 나무위키에 가서 보면 더 상세히 잘 나와있을 것이다.