4 min to read
Modern Js 1(소개)
자바스크립트와 자바스크립트에 대한 기초 문법에 대한 정리

본 문서는 모던 자바스크립트를 정리하고 공부한 문서입니다.
1. 자바스크립트란?
정의 자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어입니다. 자바스크립트로 작성한 프로그램을 스크립트(script) 라고 부릅니다. 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행됩니다. 스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고, 실행도 할 수 있습니다. 이런 관점에서 보면 자바스크립트는 자바(Java)와는 매우 다른 언어라고 할 수 있습니다.
ℹ️ 왜 자바스크립트인가요?
처음 자바스크립트가 만들어졌을 때는 LiveScript’라는 이름으로 불렸습니다. 그런데, 당시 자바의 인기가 아주 높은 상황이었습니다. 관련인들은 자바스크립트를 자바의 ‘동생’ 격인 언어로 홍보하면 도움이 될 것이라는 의사결정을 내리고 이름을 바꿨습니다. 이름은 자바에서 차용해 왔지만, 자바스크립트는 자바와는 독자적인 언어입니다. 꾸준히 발전을 거듭하면서 ECMAScript라는 고유한 명세를 갖춘 독립적인 언어가 되었죠. 자바스크립트는 자바와 아무런 연관이 없습니다. 브라우저엔 ‘자바스크립트 가상 머신’이라 불리는 엔진이 내장되어 있습니다.
브라우저에서 할 수 있는 일
-
페이지에 새로운 HTML을 추가하거나 기존 HTML, 혹은 스타일 수정하기
-
마우스 클릭이나 포인터의 움직임, 키보드 키 눌림 등과 같은 사용자 행동에 반응하기
-
네트워크를 통해 원격 서버에 요청을 보내거나, 파일 다운로드, 업로드하기(AJAX나 COMET과 같은 기술 사용)
-
쿠키를 가져오거나 설정하기. 사용자에게 질문을 건네거나 메시지 보여주기
-
클라이언트 측에 데이터 저장하기(로컬 스토리지)
브라우저에서 할 수 없는 일
-
접근 제한, 확실한 보안
-
브라우저 내 탭과 창은 대개 서로의 정보를 알 수 없다, ‘동일 출처 정책’에 의해 동의와 관련된 특수한 자바스크립트 코드가 없다면 데이터 교환 X
-
서버와 쉽게 정보를 교환 가능, 타사이트나 도메인에서는 X
자바스크립트만의 강점
-
HTML/CSS와 완전히 통합할 수 있음
-
간단한 일은 간단하게 처리할 수 있게 해줌
-
모든 주요 브라우저에서 지원하고, 기본 언어로 사용됨
자바스크립트 ‘너머의’ 언어들
-
CoffeeScript는 자바스크립트를 위한 ‘syntactic sugar’입니다. 짧은 문법을 도입하여 명료하고 이해하기 쉬운 코드를 작성할 수 있습니다. Ruby 개발자들이 좋아합니다.
-
TypeScript는 개발을 단순화 하고 복잡한 시스템을 지원하려는 목적으로 ‘자료형의 명시화(strict data typing)’에 집중해 만든 언어입니다. Microsoft가 개발하였습니다.
-
Flow 역시 자료형을 강제하는데, TypeScript와는 다른 방식을 사용합니다. Facebook이 개발하였습니다.
-
Dart는 모바일 앱과 같이 브라우저가 아닌 환경에서 동작하는 고유의 엔진을 가진 독자적 언어입니다. Google이 개발하였습니다.
요약
-
자바스크립트는 브라우저에서만 쓸 목적으로 고안된 언어이지만, 지금은 다양한 환경에서 쓰이고 있습니다.
-
오늘날 자바스크립트는 브라우저 환경에서 가장 널리 사용되는 언어로 자리매김하였습니다. HTML/CSS와 완전한 통합이 가능합니다.
-
자바스크립트로 ‘트랜스파일’할 수 있는 언어는 많습니다. 각 언어마다 고유한 기능을 제공하죠. 자바스크립트에 숙달한 뒤에 이 언어들을 살펴볼 것을 추천드립니다.
2.1 Hello, World!
- script 태그
<!DOCTYPE HTML>
<html>
<body>
<p>스크립트 전</p>
<script>
alert( 'Hello, world!' );
</script>
<p>스크립트 후</p>
</body>
</html>
<script>
태그엔 자바스크립트 코드가 들어갑니다. 브라우저는 이 태그를 만나면 안의 코드를 자동으로 처리합니다.
모던 마크업
-
<script>
태그엔 몇 가지 속성(attribute)이 있습니다. - type 속성: <script type=…>
- language 속성: <script language=…>
외부 스크립트
-
자바스크립트 코드의 양이 많은 경우엔, 파일로 소분하여 저장할 수 있습니다.
-
이렇게 분해해 놓은 각 파일은
src
속성을 사용해 HTML에 삽입합니다.
<script src="/path/to/script.js"></script>
- 물론 아래와 같이 URL 전체를 속성으로 사용할 수도 있습니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
- 복수의 스크립트를 HTML에 삽입하고 싶다면 스크립트 태그를 여러 개 사용하면 됩니다.
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
src
속성이 있으면 태그 내부의 코드는 무시됩니다.
-
<script>
태그는src
속성과 내부 코드를 동시에 가지지 못합니다. -
다음 코드는 실행되지 않습니다.
<script *src*="file.js">
alert(1); // src 속성이 사용되었으므로 이 코드는 무시됩니다.
</script>
-
따라서
<script src="…">
로 외부 파일을 연결할지 아니면<script>
태그 내에 코드를 작성할지를 선택해야 합니다. -
위의 예시는 스크립트 두 개로 분리하면 정상적으로 실행됩니다.
<script src="file.js"></script>
<script>
alert(1);
</script>
요약
-
웹 페이지에 자바스크립트 코드를 추가하기 위해
<script>
태그를 사용합니다. -
type
과language
속성은 필수가 아닙니다. -
외부 스크립트 파일은
<script src="path/to/script.js"></script>
와 같이 삽입합니다.
Comments