코어 자바스크립트 | 소개

※본 포스팅은 개인 학습을 목적으로 작성된 것이므로 정확하지 않은 정보가 포함되어 있을 수 있음을 참고 부탁드립니다.

---

1. 코어 자바스크립트: 소개

- 자바스크립트의 동작 방식

1) 엔진(브라우저: 내장 엔진)이 스크립트를 읽는다. -> 파싱

2) 읽어 들인 스크립트를 기계어로 전환한다. -> 컴파일

3) 기계어로 전환된 코드가 실행된다. 기계어로 전환됐기 때문에 실행 속도가 빠르다.

 

- 브라우저에서 할 수 있는 일

1) Html 관련 수정

2) 마우스 클릭, 커서 움직임, 키보드 눌림 등 사용자 행동에 반응

3) 네트워크를 통해 원격 서버에 요청 전송, 파일 다운로드/업로드 -> ajax, comet과 같은 기술 사용

4) 쿠키 가져오기/설정하기

5) 클라이언트 측에 데이터 저장(로컬 스토리지)

 

- 브라우저에서 할 수 없는 일

1) 카메라나 마이크 같은 디바이스와 상호 작용하려면 사용자의 명시적 허가 필요

2) 브라우저 내 탭과 창은 일반적으로 서로의 정보를 알 수 없음. 다만 자바스크립트를 사용해 한 창에서 다른 창을 열 때는 예외 적용. 이 경우에도 도메인이나 프로토콜, 포트가 다르면 페이지 접근 불가

-> 해당 제약사항을 '동일 출처 정책(same origin policy)'라고 부르고, 해당 제약사항을 피하기 위해 특수한 자바스크립트 코드 포함해야함

3) 자바스크립트를 이용하면 페이지를 생성한 서버와 쉽게 정보 교환 가능. 다만 타 사이트나 도메인에서 데이터 받아오는 것 불가능(가능하다 할지라도 http 헤더 등을 이용하여 원격 서버에서 명확히 승인 필요)

 

- 자바스크립트만의 강점

1) html/css 완전 통합 가능

2) 간단한 일은 간단히 처리하게 해줌

3) 주요 브라우저에서 지원하며, 기본 언어로 사용

 

- 자바스크립트로 트랜스파일(변환) 가능한 새로운 언어들

1) CoffeeScript

http://coffeescript.org/

CoffeeScript

 

2) TypeScript: 개발 단순화, 복잡한 시스템 지원을 위한 자료형의 명시화에 중점을 둔 언어(MS 개발)

https://www.typescriptlang.org/

JavaScript With Syntax For Types.

3) Flow(Facebook 개발)

 

4) Dart(Google 개발)

 

 

- 매뉴얼과 명세서

1) ECMA-262 명세서: 자바스크립트라는 언어를 정의한 공식 문서

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

ECMA-262 - Ecma International

2) MDN Javacript Reference 함수나 메서드에 대한 깊이 있는 정보/예제가 필요할 때 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

JavaScript reference - JavaScript | MDN

 

 

- Chrome 개발자 도구

1) 개발자 도구 열기: windows -> ctrl + shift + c / mac -> cmd + opt + j  (mac에서 cmd + shift + c로도 열렸음)

*chrome 버전에 따라 화면 구성 다를 수 있음

2) console창에서 여러줄에 걸쳐 작성을 원할 경우 shift+enter 이용 (한줄 작성 시 모두 작성하고 enter)

3) 디버깅은 아래 url 참고

https://ko.javascript.info/debugging-chrome

Chrome으로 디버깅하기

 

- Safari 개발자 도구

1) 설정: 환경설정의 고급 패널 클릭 후 '메뉴 막대에서 개발자용 메뉴 보기' 체크하여 개발자 도구 활성화 

2) cmd + opt + c 를 통해 개발자 콘솔 여닫을 수 있음

 

 

References

*하단 링크의 소개(1.1 - 1.4) 파트를 참고하여 작성되었습니다.

https://ko.javascript.info/

모던 JavaScript 튜토리얼