[JavaScript] 자바스크립트란?

이호현·2022년 6월 13일
1

📚 JavaScript 📚

목록 보기
3/4
post-thumbnail

💡 JavaScript❓

  • javascript에 대해 간단히 설명해 보자면 1995년 12월 4일 개발된 언어로 브랜든 아이크가 10일 만에 설계한 것으로 시작한다.

  • 모질라 재단 프로토타입 기반 프로그래밍 언어로, 스크립트 언어에 해당된다. 특수한 목적이 아닌 이상 모든 웹 브라우저에 인터프리터가 내장되어 있다.

  • 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어이다.

  • 웹 페이지를 위한 스크립트 언어로 잘 알려져 있지만, Node.js, Apache CouchDB, Adobe Acrobat처럼 많은 비 브라우저 환경에서도 사용하고 있다.

  • 프로토타입 기반, 다중 패러다임, 단일 스레드, 동적 언어로 객체지향형, 명령형, 선언형(함수형 프로그래밍 등) 스타일을 지원한다.


html이 웹 페이지의 기본 구조를 담당하고
css가 디자인을 담당한다면
javascript는 클라이언트 단에서 웹페이지가 동작하는 것을 담당한다.

쉽게 비유하자면

  • HTML은 자동차 뼈대 🚗
  • CSS는 자동차의 외관 🚗🚗
  • JavaScript는 자동차를 움직이는 동력이라고 볼 수 있다. 🚗🚗🚗

자세히 말하자면

  • HTML은 웹 콘텐츠의 구조를 짜고 의미를 부여하는 마크업 언어이다. 예를 들어 페이지의 어디가 문단이고, 헤딩이고, 데이터 표와 외부 이미지/비디오인지 정의한다.

  • CSS는 HTML 콘텐츠에 스타일을 적용할 수 있는 스타일 규칙 언어이다. 배경색을 추가하고, 글꼴을 바꾸고, 콘텐츠를 신문처럼 다열 레이아웃으로 배치할 수 있다.

  • JavaScript는 동적으로 콘텐츠를 바꾸고, 멀티미디어를 제어하고, 애니메이션을 추가하는 등 많은 것들을 만들 수 있는 스크립팅 언어이다.

💡 웹 페이지에서의 JavaScript

JavaScript는 DOM (Document Object Model) API를 통해 HTML과 CSS를 동적으로 수정, 사용자 인터페이스를 업데이트하는 일에 가장 많이 쓰인다.

  • 참고로 웹 문서(페이지)의 코드는 보통 문서 상에 나타나는 순서 그대로 불러와 실행한다.
    수정하려는 HTML과 CSS 코드보다 JavaScript를 먼저 불러와 실행해버리면 오류가 발생할 수 있다.

JavaScript 실행 순서

브라우저가 JavaScript 블록을 마주치면, 일반적으로는 순서대로 위에서 아래로 실행한다. 따라서 코드 배치 순서에도 주의를 기울여야 한다.

const abc = document.querySelector('p');

abc.addEventListener('click', updateID);

function updateID() {
  const id = prompt('Enter a new ID');
  abc.textContent = `Player 1: ${id}`;
}
  • 예를 들어 위 코드처럼 먼저 변수 선언을 한 다음에 호출을 해야 오류가 발생하지 않는다.
    첫째 줄과 세 번째 줄 순서가 바뀌면 TypeError: abc is undefined 에러가 발생한다.

인터프리터

  • 인터프리터를 사용하는 언어에서는 코드를 위에서 아래로 실행하고, 코드 구동 결과는 즉시 반환된다. 브라우저에서 JavaScript 코드를 실행하기 전에 다른 형태로 변환할 필요가 없다는 점을 기억하자

  • 코드는 프로그래머가 읽을 수 있는 형태로 입력되고, 별도의 처리 없이 그대로 실행된다.

JavaScript는 가볍고, 인터프리터를 사용하는 프로그래밍 언어

  • 웹 브라우저는 JavaScript 코드를 원문 텍스트 형식으로 입력받아 실행한다.

  • 대부분의 모던 JavaScript 인터프리터들은 사실 JIT 컴파일(just-in-time 컴파일)이라는 기술을 사용해 성능을 향상한다.
    이 방법은 스크립트의 실행과 동시에 소스 코드를 더 빠르게 실행할 수 있는 이진 형태로 변환하여 최대한 높은 실행 속도를 얻는 방법이다.

  • 하지만 JavaScript는 여전히 인터프리터 언어로 분류된다. 컴파일을 먼저 해놔야 하는 것이 아니라 런타임에 일어나기 때문이다.


💡 클라이언트 사이드(Client-Side)와 서버 사이드(Server-Side) 코드

클라이언트 사이드 코드 : 클라이언트(사용자)측 컴퓨터에서 동작하는 코드이다.

  • 웹 페이지를 방문하면 브라우저가 페이지 내의 클라이언트 사이드 코드를 다운로드하고 실행해서 화면에 띄운다. 바로 이 과정에서 다루는 것이 클라이언트 사이드 JavaScript(코드)이다.

서버 사이드 코드 : 서버(제공자)측애서 즉시 처리하는 코드이다.

  • 실행 결과를 브라우저가 다운로드해서 화면에 띄우게 된다.
    유명한 서버 사이드 웹 언어로는 PHP, Python, Ruby, 등등 그리고 JavaScript또한 포함 된다.

  • JavaScript는 브라우저 뿐만 아니라, 많은 사람들이 사용하는 Node.js 환경처럼 서버 사이드 언어로도 사용할 수 있다.

💡 동적 코드와 정적 코드

클라이언트 사이드 JavaScript서버 사이드 언어들 모두 동적이라는 단어로 설명할 수 있다.

  • 그 이유는 웹 페이지/웹 앱의 서로 다른 상황에 서로 다른 화면을 보여줄 수 있고, 필요하면 새로운 콘텐츠를 생성할 수 있기 때문이다.

  • 클라이언트 사이드 JavaScript는 클라이언트의 브라우저 내에서 새로운 콘텐츠를 생성 새로운 HTML 표를 생성하고, 서버에서 받아온 데이터로 채운 후, 사용자가 보고 있는 웹 페이지에 표시한다.

  • 서버 사이드 코드는 서버에서 새로운 콘텐츠를 생성 데이터베이스에서 데이터를 가져오는 등등 수행한다.

두 맥락 내에서 '동적'이라는 단어의 정확한 뜻은 약간 다르지만, 그럼에도 서로 연관되어 있으며,
두 방법(클라이언트와 서버 사이드)을 보통 함께 사용한다.


💡 Browser API

Browser API는 웹 브라우저에 내장된 API로, 현재 컴퓨터 환경에 관한 데이터를 제공하거나 여러가지 유용하고 복잡한 일을 수행한다.

EX)

  • DOM (Document Object Model) : API로 HTML 콘텐츠를 추가, 제거, 변경하고, 동적으로 페이지에 스타일을 추가하는 등 HTML/CSS를 조작할 수 있다. 페이지 위에 뜨는 팝업창이나, 새로운 콘텐츠가 나타나는 것을 본 적이 있으면 DOM이 동작한 것이다.

  • Geolocation : API로 지리 정보를 가져올 수 있다. Google 지도에서 우리의 위치를 찾아 지도에 그릴 수 있는 이유가 바로 이 API이다.

  • Canvas와 WebGL : API로 애니메이션을 적용한 2D와 3D 그래픽을 만들 수 있다.

  • HTMLMediaElement와 WebRTC : 를 포함하는 오디오와 비디오 API로는 멀티미디어를 사용한 일을 할 수 있다. 예를 들어 오디오나 비디오를 웹 페이지에서 바로 재생하거나, 웹캠으로 비디오를 찍어 다른 사람의 화면에 보여줄 수 있다.

서드파티 API는 브라우저에 탑재되지 않은 API로, 웹의 어딘가에서 직접 코드와 정보를 찾아야 한다.

감사합니다 😊

profile
# HoHo.log :)

0개의 댓글