[React] Javascript 톺아보기

레이나·2024년 12월 10일

사전캠프

목록 보기
6/14
post-thumbnail

✔️자바스크립트란?

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

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

자바스크립트는 브라우저뿐만 아니라 서버에서도 실행 가능하다.
브라우저마다 자바스크립트 가상 머신이라 불리는 엔진이 내장되어 있고, 각 엔진의 명칭들은 아래 표와 같다.

브라우저엔진코드
Chrome, OperaV8
FirefoxSpiderMonkey
IE(버전에 따라 다름) Trident, Chakra
MS EdgeChakraCore
SafariSquirrelFish

각 엔진들이 공통적으로 하는 과정

  1. 엔진(브라우저라면 내장 엔진)이 스크립트를 읽고(파싱).
  2. 읽어 들인 스크립트를 기계어로 전환(컴파일).
  3. 기계어로 전환된 코드가 실행 (기계어로 전환되었기 때문에 실행 속도가 빠름)

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

웹페이지 조작
클라이언트와 서버의 상호작용에 관한 모든일

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

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

브라우저는 보안을 위해 자바스크립트의 기능에 제약을 걸어놓았다.
(악성 웹페이지가 개인 정보에 접근하거나 사용자의 데이터를 손상하는 것을 막기 위함)

  • 웹페이지 내 스크립트는 디스크에 저장된 임의의 파일을 읽거나 쓰고, 복사하거나 실행할 때 제약을 받을 수 있다. 운영체제가 지원하는 기능을 브라우저가 직접 쓰지 못하게 막혀있기 때문.
  • 브라우저 내 탭과 창은 대개 서로의 정보를 알 수 없다. 그런데 자바스크립트를 사용해 한 창에서 다른 창을 열 때는 예외가 적용. 하지만 이 경우에도 도메인이나 프로토콜, 포트가 다르다면 페이지에 접근할 수 없다. http://anysite.com에서 받아온 페이지가 http://gmail.com에서 받아온 페이지 상의 정보에 접근해 중요한 개인정보를 훔치는 걸 막기 위함.
  • 자바스크립트를 이용하면 페이지를 생성한 서버와 쉽게 정보를 주고받을 수 있다. 하지만 타 사이트나 도메인에서 데이터를 받아오는 건 불가능.

🔹자바스크립트만의 강점

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

위 세가지 모두를 지원하는 브라우저 연관 기술은 JS뿐이라고 한다.
이런 특징 때문에 JS는 브라우저 인터페이스를 만들 때 가장 널리 사용 되고, JS를 이용해서 서버나 모바일 앱 등을 만드는 것도 가능하다.

🔹자바스크립트 ‘너머의’ 언어들

그 어떤 툴에도 '완벽'이란 것은 붙지 않는다. 사람마다 프로젝트마다 모두 다른 기능을 원하기 때문이다.
이로 인해 브라우저에서 실행 되기 전에 자바스크립트로 트랜스파일(transpile, 변환) 할 수 있는 새로운 언어들이 많이 등장했다.

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

이 외에도 자바스크립트로 트랜스파일 할 수 있는 언어는 다양하다. 개발 언어로 이런 언어 중 하나를 택한다고 하더라도 자신이 무엇을 하고 있는지 이해하려면 결국엔 자바스크립트를 알아야 한다.


_Tue 10-Dec-2024.
https://ko.javascript.info/intro 해당 자료를 보고 요약...하려 하였으나, 이미 잘 정리된 자료이기에 확인차원에서 옮겨 보았다.

profile
one setp

0개의 댓글