자바스크립트

모던 자바스크립트 딥다이브

jeongsso 2022. 11. 24. 19:37
자바스크립트란

웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하여, 

탄생한 것이 바로 '브렌던 아이크'가 개발한 자바스크립트이다.(1996.03)

 

#렌더링
HTML, CSS, 자바스크립트로 작성된 문서를 해석해서 브라우저에 시각적으로 출력하는 것을 말한다.
때로는 서버에서 데이터를 HTML로 변환해서 브라우저에 전달하는과정(SSR : Sever Side Rendering)을 가르키기도 한다.

브라우저가 HTML, CSS, 자바스크립트를 로드하고 파싱해서 렌더링하는 과정 ->추후 자세히 다시 언급예정

 

Ajax

자바스크립트를 이용해서 서버와 브라우저가 비동기 방식으로 데이터를 교환할수있는 통신기능이다.

웹페이지에서 원래는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML 코드를 서버로부터 전송받기 때문에 불필요한 데이터 통신이 발생하고, 변경할 필요가 없는 부분까지 처음부터 다시 렌더링해야 하기 때문에 성능면에서 불리한데,

-> 이걸 Ajax 가 해결해냈다.

 

How?!?

=> 웹페이지에서 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 서버로부터 필요한 데이터만 전송받아 변경해야하는 부분만 한정적으로 렌더링하는 방식이 가능하게 했다.

 

Node.js

자바스크립트 엔진을 기반으로 하므로 동작하는 애플리케이션은 자바스크립트를 이용해 개발한다.

프런트엔드와 백엔드 영역에서 자바스크립트를 사용할 수 있다는 동형성은 별도의 언어를 학습하기 위한 시간을 덜 수 있다는 장점이 있다.

 

Node.js 는 비동기 I/O를 지원하면서 단일 스레드 이벤트 루프 기반으로 동작함으로 요청 처리 성능이 좋다.

따라서, Node.js는 데이터를 실시간으로 처리하기 위해 I/O가 빈번하게 발생하는 SPA에 적합하다.

하지만 CPU 사용률이 높은 애플리케이션에는 권장하지 않는다.

 

 

자바스크립트의 특징

자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어다.

기본 문법은 C, 자바와 유사하고 셀프에서는 프로토타입 기반 상속을 스킴에서는 일급 함수의 개념을 차용했다.

 

자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지않는 인터프리터 언어다.

모던 자바스크립트 엔진은 인터프리터-컴파일러의 장점을 결합해 처리 속도가 느린 인터프리터의 단점을 해결했다.

 

 

인터프리터 언어 컴파일러 언어
코드가 실행되는 단계인 런타임에 문 단위로 한 줄씩
중간 코드인 바이트코드로 변환한 후 실행한다.
(*특정한 하드웨어가 아니라 가상 머신에서 실행하도록
만든 바이너리코드)		 코드가 실행되기 전 단계인 컴파일 타임에
소스코드 전체를 한번에 머신 코드로 변환후 시행한다.
(*CPU가 바로 실행할 수 있는 기계어)
실행 파일을 생성하지 않는다. 실행 파일을 생성한다.
인터프리트 단계와 실행단계가 분리되지 X
한 줄씩 바이트코드로 변환하고 즉시 실행한다.		 컴파일 단계와 실행단계가 분리되어 있다.
명시적인 컴파일 단계를 거치고
명시적으로 실행 파일을 실행한다.
코드가 실행될 때마다 인터프리트 과정이 반복수행된다. 실행에 앞서 컴파일은 단 한번만 수행된다.
인터프리트 단계와 실행단계가 분리되어 있지않고 
반복수행되어 코드실행 속도가 비교적 느리다.		 컴파일과 실행단계가 분리되어 있어 코드 실행속도가 빠름

 

 

자바스크립트는 런타임에 컴파일되며 실행 파일이 생성되지않고 인터프리터의 도움 없이 실행할 수 없기 때문에 컴파일러 언어라고 할 수는 없다.

그리고, 명령형 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다.

 

모든 브라우저는 자바스크립트를 해석하고 실행할 수있는 자바스크립트 엔진을 내장하고 있다.

 

주의해야 할 점은 브라우저와 Node.js는 용도가 다르다.

브라우저는 HTML, CSS, 자바스크립트를 실행해 웹페이지를 브라우저 화면에 렌더링하는 것이 주된 목적이지만,

Node.js는 브라우저 외부에서 자바스크립트 실행환경을 제공하는 것이 주된 목적이다.

 

브라우저는 파싱된 HTML 요소를 선택하거나 조작하는 기능의 집합안 DOM API를 기본적으로 제공한다.

하지만 브라우저 외부에서 자바스크립트 개발 환경을 제공하는 것이 주 목적인 Node.js는 DOM API를 제공하지 않는다.

브라우저 외부 환경에서는 HTML요소를 파싱해서 객체화한 DOM을 직접 다룰 필요가 없기 때문이다.

 

 

##웹 크롤링
서버에서  웹사이트의 콘센츠를 수집하기 위해 웹사이트에서 HTML 문서를 가져온 다음, 이를 가공에서 필요한 데이터만 추출하는 경우가 있다. 이를 웹 크롤링이라고 한다.
서버환경은  DOM API를 제공하지 않아  cheerio같은 DOM 라이브러리를 사용해 HTML문서를 가공하기도 한다.

 

 

Chrome 개발자도구 

개발자 도구는 웹 개발에 유용한 다양한 기능을 제공한다.

  • Elements 
    • 로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인할 수 있다.  단, 편집한 내용이 저장되지 x 
      웹페이지가 의도된 대로 렌더링 되지않았다면 이 패널을 확인해 유용한 힌트를 얻을 수 있다.
  • Console
    • 로딩된 웹페이지의 에러를 확인하거나 자바스크립트 소스코드에 작성한 console.log 실행 결과를 확인할 수있다.
  • Sources 
    • 로딩된 웹페이지의 자바스크립트 코드를 디버깅할 수 있다.
  • Network
    • 로딩된 웹페이지에 관련된 네트워크 요청정보와 성능을 확인 할 수 있다.
  • Applocation
    • 웹페이지, 세션, 쿠키를 확인하고 관리할 수 있다.

 

- 콘솔 -

개발자 도구의 Console 패널은 자바스크립트 코드에서 에러가 발생해 애플리케이션이 정상적으로 동작하지 않을 때 가장 우선적으로 살펴봐야 할 곳이다. 어떤 에러가 발생했는지 알 수 있다.

콘솔로 에러를 잡아낼 수 있지만, 디버깅이라는 것도 존재한다.

 

- 디버깅 -

콘솔 패널에서 에러위치를 누르면, 그 소스패널로 이동하게 되는데,

거기서 브레이크 포인트를 잡고 다시 에러가 난 기능구현을 다시 재현하여 어떤 값이 나오는지 확인할 수있다.