JavaScript

[JavaScript 스터디] 1. JavaScript 개요

시고_ 2023. 1. 3. 19:43

강의명: JavaScript 완벽 가이드: 초급 + 고급 마스터 과정

플랫폼: Udemy


개요

JavaScript란 무엇인가?

런타임에 컴파일 되는 동적 약형 프로그래밍 언어

브라우저에서 웹 페이지의 일부로 실행될 수 있으며, 호스트 환경이라 불리는 모든 머신에서 직접 실행 될 수 있다.

웹 페이지를 보다 동적으로 만들기 위해 탄생한 언어이며, 브라우저 내에서 페이지의 내용을 직접 변경하기 위해 만들어졌다.

동적으로 웹 페이지에 새로운 컨텐츠를 추가할 수 있다.

JS로 오버레이 표시 가능(ex. modal) → 사용자를 새 페이지로 보내지 않기 때문에 더 나은 사용자 경험 제공, 기존 페이지를 벗어나 새 html 코드가 다운로드 되기를 기다릴 필요도 없음

오늘날 웹 페이지에서 흔히 볼 수 있는 형식이며, 더 빠르고 작업이 완료될 때까지 기다릴 필요 없는 모바일 애플리케이션과 비슷 = JS가 중요한 이유!

 

JavaScript의 특징

  1. 동적 약형 프로그래밍 언어
  2. 해석형 언어이므로 전송 중 컴파일이 됨 - 실행전에 컴파일 됨
  3. 호스팅된 언어이므로 여러 환경에서 실행 가능함 - 브라우저가 이에 해당
  4. 웹 페이지의 브라우저에서 코드를 실행하여 보다 동적으로 만듦

 


+) 모달(modal) - 페이지 내 링크 클릭시 팝업창처럼 새 창이 뜸

head에 script로 js 파일을 html 파일에 적용해주고
a 태그가 적용된 곳에 href="#", data-text="(나올 텍스트)", class="info-modal" 속성 추가해주면
링크된 단어를 눌렀을 때 새 html 창이 아닌 팝업 형식으로 단어 설명이 뜬다.

 


JavaScript는 어떻게 작동하는가?

JavaScript 코드 실행은 하나의 단일 스레드에서 실행된다.

즉, 항상 운영 체제의 단일 스레드에서 진행된다.

 

동적 vs 약형 언어

동적(Dynamic)

미리 컴파일 되지 않고, 런타임에 분석 및 해석이 되어 컴파일링 되는 특성

C++ 같은 언어는 개발 중, 또는 개발 후에 컴파일 된다. → 최종 사용자와 공유하기 전에 컴파일됨(정적)

JS는 전송 중에 컴파일링되며, 코드가 런타임에 평가되고 실행된다. → 코드가 런타임에서 변경될 수도 있음

JS 코드 내에서 다른 프로그래밍 언어에서 허용되지 않는 특정 작업 수행 가능, 또한 데이터형을 동적으로 변경 가능하다.

 

약형(Weakly Typed)

데이터 컨테이너에 저장된 데이터 유형을 자동으로 유추하고 그대로 받아들임

JS에 텍스트 또는 숫자라고 데이터 형을 미리 명시하거나 고정할 필요가 없다. → 동적 특성과도 관련이 있음

다른 프로그래밍 언어에서는 변수의 데이터 형을 미리 정의해야 한다. - 그들과 다르게 JS는 관대함

 

호스팅된 환경에서의 JavaScript 실행

JS는 호스팅된 모든 환경에서 실행 가능하다. → 가장 대표적 환경: 브라우저

다른 환경에서도 물론 실행 가능하다. 서버 측, 브라우저 밖에서 실행

JS는 본래 웹 사이트를 보다 동적으로 만들고, 새 페이지를 로드하지 않고도 웹사이트의 내용을 변경할 수 있게 브라우저에서 실행되도록 개발되었다.

JS 사용해 백그라운드 http 요청을 보낼 수도 있다.

* 브라우저 측 JS로 할 수 없는 작업
보안상의 이유로 로컬 파일 시스템에 접근 불가(방문 하는 모든 페이지가 로컬 파일 시스템을 읽을 수 있고, 악용 될 수 있음)

따라서 브라우저 측 JS는 샌드박스에서 실행된다. 이는 운영 체제와 상호작용 할 수 없음을 뜻한다.

 

구글의 JS엔진 V8은 브라우저 외의 어느 환경에서나 JS를 실행할 수 있도록 추출되었다.

→ 브라우저에 엔진이 있다면, 엔진을 브라우저에서 떼어내 독립적인 도구로 이용해 컴퓨터의 다른 곳에 직접 JS를 실행할 수 있다는 생각에서 착안됨

→ 그리고 그 도구가 바로 NodeJS

 

NodeJS는 어느 머신에서나 실행할 수 있고 웹 백엔드와 웹 서버를 구축하는 데에도 자주 사용된다. → 서버 측 JS

이는 사용자의 브라우저 클라이언트가 아니라 서버에서 실행되고, 컴퓨터에서 바로 실행되기 때문에 로컬 파일 시스템으로의 접근과 파일 작성 등의 작업이 가능하다.

브라우저 측 JS와 달리 NodeJS(서버 측 JS) 코드는 사용자가 직접 실행해야 하며, 실행 되고 있는 머신 내의 시스템에만 접근 가능하다.

운영체제와 상호작용도 가능하다. → 그러나 로드된 웹 페이지에 직접 접근할 수 없기 때문에 브라우저 측 JS와 달리 html css를 조작할 수는 없음

따라서 브라우저와 서버 측 JS의 접근 가능 영역은 정반대지만, 둘 다 JS 구문은 동일하다.

 

JavaScript VS Java

이름이 비슷한 것 외에는 비슷한 점이 없다. → 이름 비슷한 이유: 그냥 그 당시에 Java가 인기 많았어서...

JS는 브라우저와 다른 모든 환경에서 실행되지만, Java는 브라우저에서 실행 안 된다. (브라우저에서 직접 지원이 안됨)

Java: 엄격하게 객체 지향적이며 강형 - 데이터 형 정의해야 하며 변동은 허용되지 않음.
JS: 정해진 곳에서만 작업할 필요가 없고 유연함. (약형 언어)

 

클라이언트 측 JS (Browser) VS 서버측 JS (NodeJS)

클라이언트(브라우저)

JS의 기원

다양한 브라우저 개발 업체들은 대개 자체 JS 실행 엔진을 제공한다.

브라우저에서 웹 페이지와 상호작용할 수 있다. → JS 내부에서 로드된 웹 페이지 조작 가능

API라 불리는 특정 브라우저 기능을 이용한다.

 

서버(NodeJS)

브라우저에서 엔진을 추출하여 그 외부에서 실행하려는 목적으로 개발됐다. → JS 지식을 재사용하되 다른 작업에 JS 사용 가능, 어디에서든 NodeJS와 JS 실행 가능

기타 Non-Browser API를 이용한다. → 파일 시스템으로 작업하거나, 들어오는 http 요청 처리 등의 기능을 가짐

 

그러나 둘의 JS 구문, 개념과 핵심 기능은 차이가 없다.

특히 브라우저 측 JS는 JS의 기원 그 자체이며, 대안이 없다. → 프론트엔드 측에서 사용 가능한 유일한 프로그래밍 언어