[공부 필기] JavaScript 문법 공부 3일차 (2)

※ 필자는 자바스크립트 초보자입니다

※ 피드백/잘못된 사항 지적은 언제든지 환영합니다

 

---

 

왜 다시 공부를 시작했는지 등은 이전 글을 참고

2022.02.19 - [2. 개발 공부/JavaScript] - [공부 필기] JavaScript 문법 공부 1일차

[공부 필기] JavaScript 문법 공부 1일차

 

1. 이 글은 이렇게 작성될 계획..

너무 좋은 자료(https://ko.javascript.info/)에, 너무 좋은 필기들, 너무 좋은 댓글들이 이미 있기 때문에

별도로 필기를 하며 공부하지는 않고 그냥 글을 쭉쭉 읽어가면서

더 추가적으로 공부한 내용이나, 개인적으로 필기해놓고 싶은 내용, 실습해보기 위해 작성해본 소스코드 등만 본 글에 필기할 계획이다.

2. 사담

지금까지 자바스크립트 엔진이라는 개념을 파며 공부하느라 문법(syntax)은 하나도 보지 못했다.

이제 정말 본격적으로 자바스크립트 문법을 배워보려고 한다.

 

공부하는데 참고한 자료는 아주 유용하고 학습하기 좋은 '모던 자바스크립트 튜토리얼' 이다.

https://ko.javascript.info/

모던 JavaScript 튜토리얼

 

---

- 자바스크립트란?

자바스크립트 엔진까지는 얼추 공부했으니 넘어가자.

이제 '자바스크립트가 브라우저에서 할 수 있는 일'에 대해서 공부하면 된다.

 

자바스크립트는 브라우저 환경에서 웹페이지 조작, 클라이언트와 서버의 상호작용에 관한 모든 일을 할 수 있다.

   참고로 Node.js 환경에서는 임의의 파일을 읽거나, 네트워크 요청을 수행하는 함수를 지원한다고 한다.

   아직 Node.js를 배우지 않아서 잘 모르겠지만 우선 생각만 해두자.

 

하지만 브라우저는 보안을 위해 자바스크립트의 기능에 몇가지 제약을 걸어두었다고 한다.

   카메라, 마이크 등 디바이스와 상호 작용 시 사용자의 명시적 허가 필요,

   디스크에 저장된 임의의 파일을 읽거나 쓸 수 없고 사용자가 직접적으로 파일을 선택했을 때 등 특정 상황에만 파일 접근 등이 있다.

   특히 알아두고 싶은 부분이 있다면 "동일 출처 정책(Same Origin Policy)"이다. 추후 학습한다고 하니 일단 기다려보자.

 

자바스크립트로 트랜스파일(변환)할 수 있는 언어들이 많이 등장했다고 한다.

   가령 TypeScript라던가, Dart 등이 있다고 한다.

   자바스크립트에 대해 공부한 후 이런 언어들도 살펴보는걸 추천한다고 한다.

 

- 매뉴얼과 명세서

공부 시 참고한 자료 :

https://ko.javascript.info/manuals-specifications

매뉴얼과 명세서

 

자바스크립트에 대해서 공부하는 사람이라면 알고 있어야 할 명세서와 매뉴얼.

명세서는 자바스크립트라는 언어를 정의한 공식 문서라고 한다.

 

자바스크립트에 대해 배우면서 꼭 알아둬야할 스크립트 언어가 있다면, ECMAScript이다.

   ECMAScript는 자바스크립트의 토대를 구성하는 스크립트 언어라고 한다.

   ECMAScript라고 부르기도 하고, "ES"라고 부르기도 하는 듯 하다.

   자바스크립트를 접하다보면 ES6, ES6+ 문법과 같은 단어들을 듣게 되는데 이 "ES"가 ECMAScript의 줄임말이라고 한다.

   (뒤의 숫자는 버전을 의미)

   참고로 ES6는 ECMAScript2015를 의미하고, 그 이후의 버전을 ES6+이라고 말한다.

 

 

어쨌든 ECMAScript(프로그래밍 언어임)가 JavaScript의 표준이라고 했는데, 이 ECMAScript라는 스크립트 언어를 정의한 명세서가 바로 ECMA-262 명세서이다.

   이 명세서를 확인할 수 있는 URL은 아래를 참고하자.

   https://www.ecma-international.org/publications-and-standards/standards/ecma-262/

ECMA-262 - Ecma International

 

   ECMA-262 명세서(파일)를 잠깐 읽어봤는데 [스크립트 언어]를 직접 만들어보고 싶은 사람들에게 도움이 될 만한 내용이었다.

   하지만 이 얘기는 즉슨 스크립트 언어의 문법에 대한 정의들이 다 나와있다는 얘기이기도 하다.

   Array가 무엇이고, 어떤 것을 하도록 만들어진 객체인지 등등.

 

   이 명세서를 읽을 줄 안다면 새로운 버전이 나올 때마다 새로운 기능들을 빠르게(?) 공부할 수 있다고 한다.

 

 

자바스크립트의 매뉴얼은 MDN JavaScript Reference를 참고하면 좋다고 한다.

   함수, 메서드 등에 대한 매뉴얼을 확인할 수 있다고 한다.

   URL은 다음과 같지만 구글에 검색하는게 더 빠를 때도 있다고 한다.

   https://developer.mozilla.org/ko/docs/Web/JavaScript

JavaScript | MDN

 

 

만약 Internet Explorer과 관련된 정보를 찾고 싶다면 MSDN을 적극활용하는 것도 좋다고 한다.

   주소는 다음과 같다.

   https://docs.microsoft.com/ko-kr/

개발자 도구, 기술 설명서 및 코딩 예제

   하지만 역시나 구글에 검색하는게 더 빠를 수도 있다고 한다..

   (e.g. RegExp MSDN 등)

   또한 MSDN에서는 JavaScript를 JScript라고 부른다고 한다. 검색할 때 참고하라고 함..

 

 

하나 더 알아둬야 할 사이트가 있다면 "호환성 표"이다.

   브라우저, 엔진 등에서 해당 기능이 작동하는지(지원하는지) 등을 확인할 때 사용하면 된다고 한다.

  https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

 

   예를 들어 "mouse"를 검색하면 MouseEvent API가 어떤 브라우저에서 지원하고, 지원하지 않는지 확인할 수 있다.

 

   만약 암호화 관련 기능을 검색하고 싶다면 아래 사이트를 들어가면 된다고 한다.

  http://caniuse.com/#feat=cryptography

Can I use... Support tables for HTML5, CSS3, etc

 

   자바스크립트의 어떠한 기능이 특정 엔진에서 지원하는지 여부를 큰 표(table)로 보려면 아래의 사이트를 이용하면 좋다고 한다.

   https://kangax.github.io/compat-table/es6/

ECMAScript 6 compatibility table

 

자바스크립트 문법을 배우기 전에 이런 유용한 사이트는 꼭 알아두는게 좋다고 한다.

 

---

MDN을 적극 활용하자 (p.s. MDN은 Mozila Developer Network라고 한다)https://developer.mozilla.org/ko/

MDN Web Docs