11/16 자바스크립트 공부

** 이 포스팅은 아래 싸이트의 내용을 혼자 공부하면서 정리한 것!

모든 내용은 아래 싸이트가 원조입니당

https://ko.javascript.info/

모던 JavaScript 튜토리얼

---

 자바스크립트란?

‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어

자바스크립트로 작성한 프로그램을 스크립트(script)라고 부른다.

 

스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행된다.

스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고, 실행도 할 수 있습니다.

 

 

자바스크립트는 브라우저뿐만 아니라 서버에서도 실행할 수 있다.

자바스크립트 엔진(JavaScript engine)이라 불리는 특별한 프로그램이 들어 있는 모든 디바이스에서도 동작한다.

 

브라우저엔 '자바스크립트 가상 머신’이라 불리는 엔진이 내장되어 있다.

엔진의 종류는 다양한데, 엔진마다 특유의 코드네임이 있다.

• V8 – Chrome, Opera
• SpiderMonkey – Firefox
• IE는 버전에 따라 'Trident’나 'Chakra’라 불리는 엔진을 사용한다.
• 'ChakraCore’는 Microsoft Edge에 사용되며, 'SquirrelFish’는 Safari에 사용됩니다.

 

엔진은 프로세스 각 단계마다 최적화를 진행한다. 

컴파일이 끝나고 실행 중인 코드를 감시하면서, 이 코드로 흘러가는 데이터를 분석하고, 분석 결과를 토대로 기계어로 전환된 코드를 다시 최적화하기도 한다. 

 

 

자바스크립트의 능력은 실행 환경에 상당한 영향을 받습니다. 

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

 

** Node.js ? [참조싸이트]

 JavaScript를 서버에서도 사용할 수 있도록 만든 프로그램
Node.js는 V8(자바스크립트 가상머신 chrome,opera에서 사용) 위에서 동작하는 자바스크립트 런타임(환경)이다.
Node.js는 서버사이트 스크립트 언어가 아니다. 프로그램(환경)이다.
Node.js는 웹서버와 같이 확장성 있는 네트워크 프로그램을 제작하기 위해 만들어졌다.

내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치 등의 별도 소프트웨어 없이 동작하는 것이 가능하며, 이를 통한 웹 서버의 동작에 있어 더 많은 통제에서 벗어나 여러 가지 기능을 가능하게 한다.

 

>> 브라우저에서 자바스크립트로 할 수 있는 일

• 페이지에 새로운 HTML을 추가하거나 기존 HTML, 혹은 스타일 수정하기
• 마우스 클릭이나 포인터의 움직임, 키보드 키 눌림 등과 같은 사용자 행동에 반응하기
• 네트워크를 통해 원격 서버에 요청을 보내거나, 파일 다운로드, 업로드하기(AJAX나 COMET과 같은 기술 사용)
• 쿠키를 가져오거나 설정하기. 사용자에게 질문을 건네거나 메시지 보여주기
• 클라이언트 측에 데이터 저장하기(로컬 스토리지)

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

브라우저는 보안을 위해 자바스크립트의 기능에 제약을 걸어놓았다.

이런 제약은 악성 웹페이지가 개인 정보에 접근하거나 사용자의 데이터를 손상하는 것을 막기 위해 만들어졌다.

 

• 웹페이지 내 스크립트는 디스크에 저장된 임의의 파일을 읽거나 쓰고, 복사하거나 실행할 때 제약을 받을 수 있다. 운영체제가 지원하는 기능을 브라우저가 직접 쓰지 못하게 막혀있기 때문입니다.카메라나 마이크 같은 디바이스와 상호 작용하려면 사용자의 명시적인 허가가 있어야 한다. 
• 모던 브라우저를 사용하면 파일을 다룰 순 있지만 접근은 제한되어 있다. 사용자가 브라우저 창에 파일을 ‘끌어다 두거나’ <input> 태그를 통해 파일을 선택할 때와 같이 특정 상황에서만 파일 접근을 허용한다.
• 브라우저 내 탭과 창은 대개 서로의 정보를 알 수 없다. 그런데 자바스크립트를 사용해 한 창에서 다른 창을 열 때는 예외가 적용된다. 하지만 이 경우에도 도메인이나 프로토콜, 포트가 다르다면 페이지에 접근할 수 없다. http://anysite.com에서 받아온 페이지가 http://gmail.com에서 받아온 페이지 상의 정보에 접근해 중요한 개인정보를 훔치는 걸 막기 위함이다.
• 이런 제약사항을 '동일 출처 정책(Same Origin Policy)'이라 부른다. 이 정책을 피하려면 두 페이지는 데이터 교환에 동의해야 하고, 동의와 관련된 특수한 자바스크립트 코드를 포함하고 있어야 한다. 

브라우저 환경 밖, 예를 들어 서버라면 이러한 제약은 존재하지 않을 것이다.

다만, 모던 브라우저에선 추가 권한 허가를 요청하는 플러그인이나 익스텐션 설치가 허용된다.

 

자바스크립트 강점

• HTML/CSS와 완전히 통합할 수 있음
• 간단한 일은 간단하게 처리할 수 있게 해줌
• 모든 주요 브라우저에서 지원하고, 기본 언어로 사용됨

이 세 가지 모두를 지원하는 브라우저 연관 기술은 자바스크립트뿐이라고 한다.

이런 특징 때문에 자바스크립트는 브라우저 인터페이스를 만들 때 가장 널리 사용되고 있다.

이 외에도 자바스크립트를 이용해 서버나 모바일 앱 등을 만드는 것도 가능하다.

 

** 인터페이스?

인터페이스(interface)는 서로 다른 두 개의 시스템, 장치 사이에서 정보나 신호를 주고받는 경우의 접점이나 경계면이다.

즉, 사용자가 기기를 쉽게 동작시키는데 도움을 주는 시스템을 의미한다.

 

 

근래엔 브라우저에서 실행 되기 전에 자바스크립트로 트랜스파일(transpile, 변환) 할 수 있는 새로운 언어들이 많이 등장했다.

최신도구는 자바스크립트 이외의 언어로 작성한 코드를 ‘보이지 않는 곳에서’ 자바스크립트로 자동 변환해준다.

 

>> 자바스크립트로 트랜스파일이 가능한 언어 

• CoffeeScript는 자바스크립트를 위한 'syntactic sugar’, 짧은 문법을 도입하여 명료하고 이해하기 쉬운 코드를 작성할 수 있다.
• TypeScript는 개발을 단순화 하고 복잡한 시스템을 지원하려는 목적으로 '자료형의 명시화(strict data typing)'에 집중해 만든 언어이고 마이크로소프트사가 개발했다.
• Flow 역시 자료형을 강제하는데, TypeScript와는 다른 방식을 사용하며 Facebook이 개발했다.
• Dart는 모바일 앱과 같이 브라우저가 아닌 환경에서 동작하는 고유의 엔진을 가진 독자적 언어고 Google이 개발했다.

---

자바스크립트가 어느정도 익숙해지면 아래 자료가 유용한 순간들이 온다고 하신당 ㅎㅎ

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

매뉴얼과 명세서

 

---

 코드 에디터

코드 에디터는 크게 통합 개발 환경(IDE)과 경량 에디터로 나뉘는데, 많은 개발자가 둘 중 하나를 택해 작업한다고 한다.

통합 개발 환경 (IDE)

보통 '프로젝트 전체’를 관장하는 다양한 기능을 제공한다. '개발 환경’을 쾌적하게 해주는 통합 환경을 제공한다.

IDE를 이용하면 수많은 파일로 구성된 프로젝트를 불러오고, 파일 간의 탐색 작업이 수월해진다. 단순히 열려있는 파일뿐만 아니라 전체 프로젝트에 기반한 자동 완성 기능도 사용할 수 있다. 여기에 더하여 git과 같은 버전 관리 시스템, 테스팅 환경 등, '프로젝트 수준’의 작업도 IDE에서 할 수 있다.

 

경량 에디터

'경량 에디터(lightweight editor)'는 IDE만큼 많은 기능을 제공하진 않지만, 속도가 빠르고 단순하다는 장점이 있다.

경량 에디터는 파일을 열고 바로 수정하고자 할 때 주로 사용된다.

'경량 에디터’와 'IDE’의 가장 큰 차이점은 IDE는 프로젝트 레벨에서 작동한다는 점이다. IDE는 구동 시 불러와야 할 데이터가 많고, 필요하다면 구동 시 프로젝트 구조를 분석하는 일 등도 한다. 파일 하나만 수정하고 싶다면 경량 에디터를 사용하는 게 훨씬 빠르다고 한다.

경량 에디터는 다양한 플러그인을 지원한다. 디렉터리 레벨 문법 분석기나 자동완성기능 등을 플러그인을 설치해 사용할 수 있다. 플러그인을 사용하면 경량 에디터에서도 IDE 못지않게 다양한 기능을 사용할 수 있다고 한다