JavaScript란?

JavaScript란?

@2024.04.01

JavaScript

💡

웹 페이지에서 복잡한 기능을 구현할 수 있는 대표적인 인터프린터 언어

• HTML을 사용하여 구조를 설계하고,
  
  CSS를 이용해 보기 좋게 꾸민 후,
  
  JavaScript를 사용하여 동적인 기능을 추가

• 브라우저 위에서 동작

• 브라우저 버전에 따라 지원되는 자바스크립트 버전이 다른데, 보통 웹 개발을 할 때는
  
  Babel이라는 도구를 사용하여 최신 버전의 자바스크립트가 구 버전의 브라우저에서도 실행되도록 할 수 있다,
  • 최신 버전 자바스크립트를 구버전 형태로 변환

바닐라 JS

💡

프레임워크나 라이브러리를 일절 사용하지 않고 해당 기술을 오직 JavaScirpt만 사용해서 수행

인터넷 작동 원리

💡

구글에 검색을 하려고 크롬 브라우저를 연다 → 주소창에 www.google.com를 입력
→
DNS 서버(도메인을 IP로 바꾸는 역할)에 구글 IP주소를 요청 → 브라우저는 받아온 IP 주소를 통해 구글 서버에 페이지 정보를 요청 → 구글 서버는 여러 정보를 브라우저에게 보내주고 브라우저는 이를 조립 → 다 조립하면 우리가 원하는 페이지가 보여진다.

JavaSrcipt 작동 원리

• 자바스크립트는 싱글 스레드 언어 ⇒ 한 번에 하나의 일만 처리 가능
  • 따라서 멀티스레딩 즉 일을 여러 개 시키는 것이 불가능하다.
  • 겉보기에는 자바 스크립트는 여러 작업이 동시에 일어나는 것처럼 보인다.
    ⇒
    자바스크립트 런타임 환경에 멀티 스레드가 존재하기 때문!
    • 런타임 : 프로그래밍 언어가 동작하는 컴퓨터 환경

• 웹 브라우저는 자바스크립트 엔진이 내장되어 있다.
  • Node.js : 웹 브라우저에만 동작하는 자바스크립트를 컴퓨터 환경에서도 동작할 수 있게 만들어준 것
  • 자바스크립트가 싱글 스레드 언어임에도 불구하고 다양한 동작을 할 수 있는 이유
  • Web API를 통해 웹 브라우저의 멀티스레딩 기능을 이용

브라우저 API(Aplication Progaming Interface)

💡

자바스크립트의 엔진이 아닌 웹 브라우저에서 제공되는 API

• API : 한 프로그램에서 다른 프로그램으로 데이터를 주고 받기 위한 방법

  ⇒ 유저와 서버가 데이터를 주고받기 위한 정확한 방법

  • 예시 : 식당 메뉴판(API) ⇒ 식당 주인과, 손님이 주문을 주고받기 위한 수단

DOM API

💡

자바스크립트 코드를 사용하여 HTML 문서의 구조, 스타일, 콘텐츠를 제어하기 위한 다양한 함수와 속성을 제공하는 API

• 브라우저가 HTML 문서를 객체 지향 방식으로 표현하는 것을 가능하게 한다.

• HTML의 요소 또한 생성 및 변경, 제거 가능하며, 스타일도 변경 가능

• 텍스트를 추가하거나, 이미지를 변경하거나, 웹 페이지의 스크롤 위치를 조정 가능

  <div id="exampleDiv">원래 텍스트</div>
  <sciprt>
  //div 요소를 찾아 요소의 내용을 변경한다. 
  let divElement = document.getElementById("exampleDiv");
  divElement.textContent = "텍스트 변경한다~";
  </sciprt>

Geolocation API

💡

지리 정보를 가져올 수 있는 API로, 이를 이용하여 구글 지도가 사용자의 위치를 찾아 지도에 표시한다.

Canvas와 webGl API

💡

애니메이션 2D 및 3D 그래픽을 만드는데 사용하는 API