[JavaScript] 자바스크립트란? 뭘까요?

 

HTML은 웹페이지상에서 문단, 제목, 표 이미지, 동영상 등을 정의하고 그 구조화 의미를 부여하는 마크업 언어입니다.

CSS는 배경색, 폰트, 컨텐츠의 레이아웃등을 지정하며, HTML을 꾸며주는 스타일 규칙 언어입니다.

JavaScript는 동적으로 컨텐츠를 변경하고, 멀티미디어를 다루고, 움직이는 이미지 등 웹 페이지를 다이나믹하게 만들어주는 프로그래밍언어, 스크립트 언어입니다.

 

JavaScript는 HTML과 CSS가 결합되고 웹페이지 상에서 올려진 후, 브라우저의 JavaScript 엔진에 의해 실행됩니다. 이는 페이지의 구조와 스타일 등을 정해놓고, 자바스크립트가 실행된다는 의미입니다.

 

웹 개발 맥락에서 서버측과 클라이언트 측 코드에 대해 들어보셨을 겁니다. 클라이언트측 코드란 사용자의 컴퓨터에서 작동되는 코드이다. 만약 웹페이지를 보고자 한다면, 클라이언트 측 코드가 사용자의 컴퓨터로 다운로드되고 브라우저가 이를 표시하는 것입니다. 이러한 자바스크립트 모듈을 정확히는 클라이언트측 자바스크립트라고 합니다.

 

반면 서버측 코드는 서버에서 작동되고, 그 결과가 사용자의 브라우저에 넘어가 표시되는 것입니다. PHP, Pyton, Ruby, Asp.NEt 등이 서버측 웹언어의 대표적 예입니다. 물론 자바스크립트도 가능합니다. Node.js란 환경을 통해 서버측에서도 자바스크립트가 사용 가능합니다.

 

'동적'이라는 말은 클라이언트측, 서버측 언어 모드를 가르킵니다. 이는 각기 다른 상황에서 적절한 정보가 보이고, 컨텐츠를 웹페이지나 앱 상에 계속적으로 노출시키는 역할을 합니다. 서버측 코드는 데이터베이스로 부터 데이터를 던지는 등 동적으로 새로운 컨텐츠들을 만듭니다. 반면에, 클라이언트측 자바스크립트는 새로운 HTML 표를 만들어 서버에서 요청한 데이터를 뿌려 사용자에게 보이는 등 동적으로 브라우저 안에서 작동됩니다. 이 둘 사이는 서로 차이가 있지만, 서로 연관이 있고 관계와 접근에 대해 알 필요가 있습니다.

동적으로 바뀌지 않은 페이지를 '정적'페이지라고 합니다.

 

 

자바스크립트의 특징

- 객체 기반의 언어입니다. 하지만 상속과 클래스라는 개념은 없습니다.

- 인터프리터 언어로서 클라이언트의 웹 브라우저에 의해 해석되고 실행됩니다.

- HTML 문서 내에 기술되고 HTML 문서와 함께 수행됩니다.

- HTML에 연산 제어 등 프로그래밍적인 요소를 추가하고 클라이언트의 자원을 활용할 수 있게 합니다.

 

 

자바스크립트의 역할

- HTML 페이지 변경 및 HTML 엘리먼트와 콘텐츠의 추가나 제거

- CSS 및 HTML 엘리먼트의 스타일 변경

- 사용자와의 상호작용, 폼의 유효성 검증

- 마우스와 키보드 이벤트에 대한 스크립트 실행

- 웹 브라우저 제어, 쿠키 등의 설정과 조회

- AJAX 기술을 이용한 웹 서버와의 통신

- 동적인 효과 이미지를 롤오버 상태표시줄에 문자열표시 등

- 웹사이트의 기능적인 면 쿠키처리, 새로운 Window 열기 등

 

 

자바스크립트의 장단점

장점

자바스크립트는 커파일 과정이 없기 때문에 다른 언어에 비해 빠른 시간안에 코드 장성을 가능케 합니다. 기존 C나 자바와는 달리 굉장히 단순한 구조의 원칙을 가지고 있기 때문에 초보 개발자들이 쉽게 배우고 이해할 수 있습니다. 예시로 코드 안에서는 변수, 클래스 및 메소드를 선언하지 않고 메소드가 public인지 private인지 구분하지 않아도 됩니다. 

자바스크립트는 웹에 특화되었기에 운영체제나 플랫폼에 상관없이 잘 작동되고 확장성도 높습니다.

단점

단점은 성능이나 보안 측면이 있습니다. 일단 내부에서 제공되는 기능이 제한적입니다. 관련된 개발도구도 적은편이고, 자바스크립트 HTML 소스코드에 함께 작성되며 소스코드가 외부로 공개되어 이 과정에서 보안 취약점이 발생할 수 있습니다.

 

 

Ajax란?

Ajax는 JavaScript의 라이브러리 중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 Xml)의 약자입니다. 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해 전체 페이지를 새로 고치지 않고도 일부만을 위한 데이터를 로드하는 기법입니다. Ajax를 한마디로 정의하자면 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술입니다.

**비동기식(async)방식이란?

비동시 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식입니다. 페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데 이미지, 스크립트, 기타 코드등을 모드 재요청할 경우 불필요한 리소스 낭비가 발생합니다. 이 방식의 장점은 비동기식 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있다는 점이다.