[JS] Hello, JavaScript-!

ssjeu·2022년 5월 13일
0

JavaScript

목록 보기
1/2
post-thumbnail

JavaScript Overview

1. Javascript 에 대해서

  • 객체 기반의 스크립트 프로그래밍 언어

  • 웹 브라우저 내에서 주로 사용, 다른 응용 프로그램의 내장 객체에도 접근 가능

  • 웹 페이지에서 복잡한 기능 구현 가능

    • 동적인 내용, 갱신되는 정보, 사용자와 상호작용, 애니메이션
  • Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용

  • 인터프리터 언어

    인터프리터 vs 컴파일러

    • 인터프리터 사용 언어: 코드를 위에서 아래로 실행, 즉시 반환되는 코드 구동 결과, 프로그래머가 읽을 수 있는 형태로 입력되고 별도의 처리없이 그대로 실행되는 코드
    • 컴파일 언어: 컴퓨터가 코드를 실행하기 전 다른 형태로 변환(컴파일), 프로그램은 프로그램의 원본 소스 코드에서 생성한 이진 형식(바이너리)으로부터 실행
    cf.) JavaScript 인터프리터들은 사실 JIT 컴파일(just-in-time 컴파일)이라는 기술을 사용해 성능을 향상하기는 한다.
    스크립트의 실행과 동시에 소스 코드를 더 빠르게 실행할 수 있는 이진 형태로 변환하여 최대한 높은 실행 속도를 얻는 방법.
    하지만 컴파일을 먼저 해놔야 하는 것이 아니라 런타임에 일어나기 때문에 JavaScript는 여전히 인터프리터 언어로 분류된다.

2. Javascript 좀 더 알아보자

Javascript 특징

  • HTML, CSS와 함께 사용해 client side 웹 프로그램을 작성
  • 문법이 쉽고, 브라우저에서 바로 실행됨

Javascript API 기능

  • 애플리케이션 프로그래밍 인터페이스(API)는 JS 코드에서 사용할 수 있는 강력한 마법을 추가로 제공
  • API는 개발자가 직접 구현하기는 어렵거나 불가능한 기능들을 미리 만들어서 제공하는 것
  • 일반적으로 두 개의 범주로 분류
  1. 브라우저 API
    : 웹 브라우저에 내장된 API, 현재 컴퓨터 환경에 관한 데이터를 제공
    - DOM(Document Object Model) API로 HTML/CSS 조작 가능
    - Geolocation API: 지리정보
    - Canvas, WebGL API: 애니메이션 적용한 2D 3D 그래픽 작업, ..

  2. 서드파티 API
    : 브라우저에 탑재되지 않은 API, 웹의 어딘가에서 직접 코드와 정보 검색
    - Twitter API, Google 지도 API, ..


3. 웹 페이지에서 Javascript

Javascript 선언 방법

  1. 내부 Javascript
// head 태그 내 <script></script> 선언
  1. 외부 Javascript
<script src="script.js" defer></script> 선언
  1. 인라인 Javascript
// HTML에 코드 포함 
<script> function a(){} </script>
<button onclick="a()">
  1. addEventListener 사용
const buttons = document.querySelectorAll('button');
  
for (const button of buttons){
  button.addEventListener('click', a);
}

스크립트 로딩 전략

async와 defer: 브라우저가 페이지의 다른 내용(DOM 등)을 불러오는 동안 스크립트를 별도 스레드에서 불러와 스크립트를 가져오는 동안 페이지 로딩이 중단되는걸 방지

  • async 특성 지정: 다운로드가 끝나는 즉시 실행, 실행은 현재 페이지 렌더링을 중단하며, 실행 순서는 보장되지 않음
  • defer 특성 지정: 스크립트는 순서를 유지한 채로 가져오며 모든 콘텐츠를 다 불러온 이후에 실행

의존성 없는 스크립트를 불러온 즉시 실행하려면 async를 사용
다른 스크립트에 의존하거나 DOM 로딩이 필요한 스크립트에는 defer를 사용하고, 원하는 순서에 맞춰서

(참조) 스크립트 로딩 전략


4. JS 공부 관련 Reference

0개의 댓글