자바스크립트 공부 시작하기에 앞서.
나는 유튜브나 사설 강의만 듣고 자바스크립트를 공부했다. 그건 어떠한 지식이 다른사람을 통해서 얻는 과정이였다. 즉, 순수한 지식보다는 누군가의 주관이 존재하는 지식을 배웠었다. 이러한 배움은 몸은 편했지만 여전히 부족함은 있었다. 그래서 제대로 문서를 보면서 공부하자는 생각이 들었고 하나하나 단계별로 (React공식문서로 공부했던 것처럼) 공부를 하고 싶었다.
그리고 블로그에 포스팅하는 이유는 누군가가 봤으면 하기보단 내 스스로가 기록할 공간도 필요했고 다른사람이 볼수 있는 곳에 포스팅을 하면 누군가에게 감시받는다란 생각에 매일매일 공부를 할수 있을 거란 생각이 들어서이다. (매일 공식문서를 읽을건데 기록할만큼 잘몰랐거나 제대로 다시 복습해보고 싶은 부분은 기록을 합니다.)
2021년 2월 14일
오늘부터 시작하자!
자바스크립트란?
정의 : 자바스크립트는 '웹페이지에 생동감을 불어넣기 위해' 만들어진 프로그래밍 언어이다.
자바스크립트로 작성한 프로그램을 스크립트라고 부른다.
자바스크립트로 작성한 프로그램인 스크립트는 웹페이지의 HTML안에 작성할수 있는데, 웹 페이지를 불러올 때 스크립트가 자동으로 실행된다. 즉, 웹페이지를 불러올 때 자바스크립트가 자동으로 실행된다.
스크립트는 어떠한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고, 실행도 할수 있다.
이러한 관점에서 보면 이름이 비슷한 Java(자바)와 매우 다른 언어이다.
왜 그런데 둘의 이름이 비슷하지?
처음 자바스크립트가 만들어졌을 땐 LiveScript라는 이름으로 불리었다. 그런데 그당시 자바의 인기가 대단해서 홍보하려고 이름을 자바스크립트로 변경했다. 즉, 이름의 유래는 자바에서 왔지만 자바와는 완전히 다른 독자적인 언어이다. 자바스크립트는 꾸준히 발전해서 독자적인 ECMAScript라는 고유한 명세를 갖춘 독립적인 언어가 되었다. 즉, JS와 JAVA는 아애 다른 언어이다.!
자바스크립트는 브라우저뿐만 아니라 서버에서도 실행할 수 있다.
이 외에도
자바스크립트는 자바스크립트 엔진이라 불리는 특별한 프로그램이 들어 있는 모든 디바이스에서도 동작한다.
브라우저엔 자바스크립트 가상 머신이라 불리는 엔진이 내장되어 있다.
이 엔진의 종류는 다양한데 엔진마다 자신의 코드네임이 있다.
- V8 : Chrome과 Opera에서 사용된다.
- SpiderMonkey : Firefox에서 사용된다.
- IE는 버전에 따라 Trident나 Chakra라 불리는 엔진을 사용한다.
이러한 엔진마다 지원하는 기능이 다르므로 브라우저마다 사용할수 있는 자바스크립트 기능이 다른 것이다.
자바스크립트 엔진이 동작하는 과정(간단)
- 엔진이 자바스크립트로 만들어진 프로그램인 스크립트를 읽는다.(파싱)
- 읽어 들인 스크립트를 기계어로 전환한다.(컴파일)
- 기계어로 전환된 코드가 실행된다. 기계어로 전환되었으므로 실행 속도가 빠르다.
자바스크립트 엔진은 각 프로세스 마다 최적화를 진행한다. 심지어 컴파일이 끝나고 실행중인 코드를 감시하면서 이 코드로 흘러가는 데이터를 분석하고, 분석 결과를 토대로 기계어로 전환된 코드를 다시 최적화하기도 한다. 이런 최적화 과정을 거치면 스크립트 실행 속도는 더욱더 빨라진다.
브라우저에서 할 수 있는 일
모던 자바스크립트는 안전한 프로그래밍 언어이다. 안전하다는 것은 메모리나 CPU같은 저수준 영역의 조작을 허용하지 않으므로 안전하다는 것이다.
애초에 이러한 접근이 필요없는 브라우저를 대상으로 만든 언어이기 때문이다.
자바스크립트 능력은 실행환경에 따라 다른데 Node.js환경에선 파일 입출력이나 네트워크 요청을 수행하는 함수를 지원한다.
브라우저 환경에선 웹페이지 조작, 클라이언트와 서버와의 상호작용에 대한 모든 일을 할 수 가 있다.
브라우저에서 자바스크립트로 할수 있는 일은 다음과 같다.
- 페이지에 새로운 HTML추가하거나 기존 HTML 혹은 스타일 수정하기
- 마우스 클릭이나 포인터 움직임등 다양한 사용자의 움직임에 대해 반응하기
- 네트워크를 통해 원격 서버에 요청 보내거나 파일 다운로드, 업로드하기
- 쿠키를 가져오거나 설정하기. 사용자에게 질문하거나 메시지 보여주기
- 클라이언트 측에 데이터 저장하기(로컬 스토리지)
브라우저에서 할 수 없는 일
브라우저는 보안을 위해 자바스크립트의 기능에 제약을 걸어 놓았다. 이런 제약은 악성 웹페이지가 개인 정보에 접근하거나 사용자의 데이터를 손상하는걸 막으려고 만들어졌다.
브라우저에서의 자바스크립트 제약사항
- 웹 페이지 내 스크립트는 디스크에 저장된 임의의 파일을 읽거나 쓰고 복사하거나 실행할때 제약을 받을 수 있다. 운영체제가 지원하는 기능을 브라우저가 직접 쓰지 못하게 기본적으로 막혀있기 때문이다.(node.js에선 할수있는일이다. 우리는 브라우저에서 자바스크립트로 할수 없는일을 하고있는중이다.)
- 브라우저 내에서 탭과 창은 서로의 정보를 알수 없다. 그런데 자바스크립트로 한 창에서 다른 창을 열 때는 예외가 적용된다. 하지만 이 경우도 도메인이나 프로토콜, 포트가 다르면 페이지에 접근할 수가 없다.
이러한 제약을 동일 출처 정책(Same Origin Policy)라고 부른다. 이 정책을 피하려면 두 페이지는 데이터 교환에 동의해야하고 동의에 관련된 자바스크립트 코드를 포함하고 있어야 한다.
(이러한 제약사항은 무조건 귀찮아 하기 보단 왜 존재하는지 알면 의미 있다고 느낄수 있다. 이러한 제약사항들은 사용자의 정보 보안을 위해 만들어졌다. 즉, 악성 사이트에서 사용자의 정보가 담긴 페이지에 접근해서 중요한 개인정보를 빼오는걸 막기 위함이다.)
- 브라우저 내에서도 각 탭과 창은 서로의 정보를 알수 없듯이 브라우저에서 타 서버에서 정보를 받아오는건 불가능하다.(자신을 생성한 서버말고.)
가능하게 하려면 원격 서버에서 명확히 승인해줘야한다.(HTTP 헤더를 통해서.)
자바스크립트만의 강점
- HTML/CSS와 완전히 통합할 수 있음
- 간단한 일은 간단하게 처리할수 있게 해줌
- 모든 주요 브라우저에서 지원하고 기본 언어로 사용됨
이 세가지 모두를 지원하는 브라우저 연관 기술은 자바스크립트 뿐이다.
이러한 특징 때문에 자바스크립트는 브라우저 인터페이스를 만들 때 가장 널리 사용되는 언어이다.
자바스크립트 '너머의' 언어들
자바스크립트 문법은 모든 사람의 요구를 충족시키진 못한다.
그래서 자신들의 입맛에 맞게 자바스크립트로 트랜스파일 할수 있는 새로운 언어들이 많이 등장했다.(TypeScript..)
이러한 언어들은 보이지 않는 곳에서 자바스크립트로 트랜스 파일되어 결국은 자바스크립트로 실행이 되는 것이다.
그 종류 몇가지..
- CoffeScript : 자바스크립트의 syntactic sugar, 짧은 문법을 도입하여 명료하고 이해하기 쉬운 코드를 작성할수 있다.
- TypeScript : 개발을 단순화하고 복잡한 시스템을 지원하기 위해 자료형의 명시화에 집중해 만든 언어이다.
- Flow : 역시 자료형을 강제하는데 위 Typescript와는 다른 방식으로 사용한다.
- Dart : 모바일 앱과 같이 브라우저가 아닌 환경에서 동작하는 고유의 엔진을 가진 언어이다.
이 외에도 많은 자바스크립트로 트랜스 파일할수 있는 언어들이존재하지만 결국 자바스크립트이므로 자바스크립트를 잘알도록하자!
요약
- 자바스크립트는 브라우저에서만 쓸 목적으로 고안된 언어이지만 지금은 다양한 환경에서 쓰이고 있다.(자바스크립트 엔진만 있으면 어디에서든 사용할수 있다.)
- 오늘날 브라우저에서 가장 널리 사용되는 언어이다. (HTML/CSS와 완전한 통합이 가능함)
- 자바스크립트로 트랜스파일 할 수 있는 언어는 많다.!
