JavaScript 기초를 다지기 위해 모던 JavaScript 튜토리얼로 공부해보려고 한다. 계속 이론만 공부하는 건 힘드니까 더하고 싶은 마음이 들어도 오전 시간까지만 하는 걸로!
여기엔 새롭게 배우거나 기억해야 할 것들을 정리할 것이다.
1.1 자바스크립트란?
자바스크립트는 브라우저에서만 쓸 목적으로 고안된 언어이지만, 지금은 다양한 환경에서 쓰이고 있습니다.
자바스크립트의 보안에 관한 내용은 처음 보았는데 자바스크립트의 보안이 강한 것과 브라우저에서만 쓸 목적이라는 것이 연관이 있다는 게 굉장히 인상 깊다.
엔진
브라우저엔 '자바스크립트 가상 머신'이라 불리는 엔진이 내장되어 있습니다.
- V8 – Chrome과 Opera에서 쓰입니다.
- SpiderMonkey – Firefox에서 쓰입니다.
- IE는 버전에 따라 'Trident’나 'Chakra’라 불리는 엔진을 사용합니다. 'ChakraCore’는 Microsoft Edge에 사용되며, 'SquirrelFish’는 Safari에 사용됩니다.
Chromium 엔진이랑 V8은 또 뭐가 다른 거지?
엔진이 어떻게 동작하는지 이해하려면 상당한 시간을 쏟아부어야 합니다. 하지만 기본 원리는 다음과 같이 간단합니다.
1. 엔진(브라우저라면 내장 엔진)이 스크립트를 읽습니다(파싱).
2. 읽어 들인 스크립트를 기계어로 전환합니다(컴파일).
3. 기계어로 전환된 코드가 실행됩니다. 기계어로 전환되었기 때문에 실행 속도가 빠릅니다.
엔진은 프로세스 각 단계마다 최적화를 진행합니다. 심지어 컴파일이 끝나고 실행 중인 코드를 감시하면서, 이 코드로 흘러가는 데이터를 분석하고, 분석 결과를 토대로 기계어로 전환된 코드를 다시 최적화하기도 합니다. 이런 과정을 거치면 스크립트 실행 속도는 더욱더 빨라집니다. (최적화는 뭐지? 엄청 좋은 기능 같은데 모르겠다.)
자바스크립트 '너머의' 언어들
이로 인해 근래엔 브라우저에서 실행되기 전에 자바스크립트로 트랜스파일(transpile, 변환) 할 수 있는 새로운 언어들이 많이 등장했습니다.
최신 툴을 사용하면 트랜스파일을 빠르고 명확하게 수행할 수 있습니다. 최신도구는 자바스크립트 이외의 언어로 작성한 코드를 ‘보이지 않는 곳에서’ 자바스크립트로 자동 변환해줍니다.
이 페이지에서는 자바스크립트로 트랜스파일할 수 있는 언어로 CoffeeScript, TypeScript, Flow와 Dart를 소개한다. 이른 시일 내에 만날 수 있으면 좋겠다.
2.1 Hello, world!
스크립트 파일을 분리해서 사용하는 장점이 유지보수 외에도 또 있었다. :)
스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시(cache)에 저장하기 때문에, 성능상의 이점이 있습니다.
여러 페이지에서 동일한 스크립트를 사용하는 경우, 브라우저는 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와 사용합니다. 스크립트 파일을 한 번만 다운받으면 되죠.
이를 통해 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라집니다.
2.2 코드 구조
세미콜론
자바스크립트에서 세미콜론을 꼭 써야 하는지에 대해 검색을 한 적이 있는데 의견이 분분해서 스스로도 결론을 내리지 못했었는데 여기에 명확하게 나와 있었다. 세미콜론은 넣는 것이 좋다.
자바스크립트는 줄 바꿈이 있으면 이를 ‘암시적’ 세미콜론으로 해석합니다. 이런 동작 방식을 세미콜론 자동 삽입(automatic semicolon insertion)이라 부릅니다.
대부분의 경우, 줄 바꿈은 세미콜론을 의미합니다. 하지만 '대부분의 경우’가 '항상’을 의미하진 않습니다.
반면, 세미콜론이 정말로 필요하지만, 자바스크립트가 이를 추정하지 ‘못하는’ 상황도 존재합니다.
세미콜론은 생략할 수 있습니다. 하지만 세미콜론을 사용하는 것이 더 안전하므로 이를 기억하고 따르도록 합시다.
2.3 엄격 모드 ("use strict";)
코드가 낡는다는 표현을 팟캐스트에서 들은 적이 있다. 자바스크립트는 기존의 기능을 변경하지 않으면서 새로운 기능이 추가되었지만 그렇지 않은 언어들에서 일어나는 현상이 아닐까 하는 생각이 들었다.
코드를 클래스와 모듈을 사용해 구성한다면 "use strict"를 생략해도 됩니다.
2.4 변수와 상수
변수
let을 이용한 변수는 재선언이 불가능하나 재할당은 가능하고 엄격 모드에서는 let 없이 변수 선언이 불가능하다.
예약어
예약어도 다시 한번 확인해봐야겠다.
Lexical grammar - Keywords
바람직한 변수명
- 일반적으로는 짚어주지 않는 내용까지 짚어주어서 정말 좋다. 항상 어떻게 하면 좋은 변수를 만드는지 고민했었는데 이 내용이 도움이 될 것 같다.
- 한글로도 변수 선언이 된다는 건 진짜 신기하고 재밌는 경험이다.
변수와 상수 - 바람직한 변수명몇 번은 더 봐야 할 것 같아서 링크를 걸어놓는다.
변수를 추가하는 것은 좋은 습관입니다.
모던 자바스크립트 압축기(minifier)와 브라우저는 코드 최적화를 잘해줍니다. 변수를 추가한다고 해서 성능 이슈가 생기지 않죠. 값이 다른 경우, 변수를 다르게 선언해 주면 코드 최적화에 도움이 될 수도 있습니다.
2.6 alert, prompt, confirm을 이용한 상호작용
- 모달 창의 위치는 브라우저가 결정하는데, 대개 브라우저 중앙에 위치합니다.
- 모달 창의 모양은 브라우저마다 다릅니다. 개발자는 창의 모양을 수정할 수 없습니다.
역시 모달창은 제어할 수 없었다. 제어하고 싶어서 찾다 찾다 제이쿼리 플러그인을 찾은 적은 있는데 디자인은 꽤 예뻤지만, 이 역시 제어하는데에 제한이 있어서 아쉬웠던 기억이 있다.
더 공부할 내용
- 크롬이 사용하는 엔진: 크로미움 엔진과 V8 엔진의 차이
- 자바스크립트 가상 머신(엔진) 최적화란?
- 자바스크립트로 트랜스파일 할 수 있는 언어(CoffeeScript, TypeScript, Flow와 Dart)
- 자바스크립트 예약어
- 변수와 상수 - 바람직한 변수명, 바람직한 변수명 짓기
