01. Introduction to JavaScript

01-1. JavaScript 소개

웹페이지의 구조를 정의하는 것은 HTML 입니다. 하지만 HTML만 있다고 해서 웹페이지가 돌아가지는 않습니다. 텍스트만 가득한 하나의 페이지라면 상관 없겠지만 우리가 알고 있는 거의 모든 페이지에는 JavaScript 코드가 들어가 있습니다.

JavaScript(자바스크립트)는 웹 페이지와 상호작용하도록 만들어진 언어입니다. 브라우저에서 사용자의 행동을 처리하고, 데이터도 저장하고, 네트워크 응답과 요청을 처리하는 역할을 합니다. 확장자는 .js 입니다. (참고로 가끔 혼동하는, 이름만 비슷한 Java 와 아무 상관이 없습니다.) 프론트앤드 개발자의 가장 큰 역할이라면 역시 이 JavaScript 를 사용하여 웹페이지를 dynamic 하고 interactive 하게 만드는 일입니다.

✔️ JavaScript를 실행시키려면

• 브라우저가 존재해야 한다.
• HTML파일이 있어야 한다.
• HTML파일에서 JavaScript 파일을 연결시켜 주어야 한다.

첫 시간에는 JavaScript의 함수 두 가지를 살펴보려고 합니다. 가장 기초적인 함수지만 개발할 때 정말 많이 사용 되고 있답니다! (함수는 프로그래밍에서 자주 사용 되는 용어 입니다. 지금 당장은 이해가 안가셔도 괜찮습니다. 곧 자세히 학습하게 됩니다.) 두 함수를 통해 자바스크립트가 웹 페이지를 어떻게 동적으로 만드는지 직접 체험해 보도록 하겠습니다.

01-2. 알림창 띄우기

웹 페이지를 동적으로 만들어주는 자바스크립트에서 소개하는 첫 번째 함수는 alert( ) 함수입니다. 혹시 다른 웹사이트에서 뭔가를 클릭한 다음에 뜨는 작은 박스를 본 적 있으신가요? 이러한 작은 박스를 웹에서는 alert 창(알림창) 이라고 부릅니다.

위의 알림창을 만들기 위해 HTML 의 div 태그를 만들고, CSS 를 이용해 버튼을 파란색으로 스타일링 하고.. 굳이 그렇게까지 할 필요가 없습니다. HTML, CSS 코드 없이 JavaScript 코드로 알림창을 띄울 수 있기 때문입니다. (다만 개발자가 디자인을 변경할 수는 없습니다. 다양한 종류의 브라우저 (ex. IE(Internet Explorer), Chrome, Safari, Firefox) 에서 기본적으로 정해진 알림창이 있으며 각각 정해진 디자인을 따르기 때문에 각기 다른 모양을 갖습니다.)

아래는 "안녕하세요!" 라는 메시지의 알림창을 띄워주는 코드입니다.

alert("안녕하세요!");

레플릿에 이미 코드가 존재합니다. 코드 에디터 상단에 위치한 run ▶ 버튼을 눌러서 자바스크립트 코드를 실행할 수 있습니다. (참고로 레플릿은 브라우저 환경이 아니기 때문에 alert 함수를 이용해도 알림창이 뜨지 않습니다.)

알림창은 보통 언제 사용할까요? 예를 들어, 로그인 창에서 비밀번호가 틀렸을 때 "비밀번호가 틀렸습니다" 라는 텍스트로 알림창을 보여줄 수 있습니다. 물론 디자인이 더욱 가미된 예쁜 알림창을 보여주면 좋겠지만 개발을 급하게 해야 하는 경우에는 HTML, CSS 작성할 시간을 단축하기 위해 일단 브라우저의 기본 알림창을 사용하는 경우도 많습니다.

01-3. console.log( )

웹 페이지를 동적으로 만들어주는 자바스크립트에서 소개하는 두 번째 함수는 console.log() 함수입니다. console.log() 함수도 alert() 함수와 비슷한 역할을 합니다. **alert() 함수는 사용자에게 안내하고 싶은 텍스트를 보여줬다면, console.log( ) 함수는 개발자가 확인하고 싶은 내용을 출력하는 함수**입니다.

개발자가 확인하고 싶은 내용을 출력하는 console.log() 함수의 결과는 일반 사용자가 볼 수 없도록 브라우저에 내장된 '개발자 도구' 를 통해서만 확인할 수 있습니다. (개발자 도구는 오프라인 세션으로 자세히 다룰 예정입니다!)

앞으로 코드 에디터 하단의 결과가 출력되는 공간을 콘솔(console)창 이라고 부르겠습니다. 콘솔은 아래와 같이 사용할 수 있습니다.

console.log("아래에 나와요"); 

이제 run ▶ 버튼을 눌러 미리 작성되어 있는 코드를 실행시켜보겠습니다. 좌측 하단 콘솔 창에 어떤 값이 나오는지 확인해주세요! 참고로 alert() 함수와 console.log() 함수는 자바스크립트에서 이미 정의된, 약속된 단어입니다. 이렇게 약속된 단어들은 약속어(Reserved Words) 라고도 불립니다. alert라는 이름의 함수는 이미 존재하므로, 내 마음대로 alert라는 이름의 함수를 중복해서 만들면 안 됩니다. 약속어로 지정된 단어는 이미 사용중이기 때문에 코딩할 때 함부로 사용할 수 없다는 점만 기억해주세요.

자바스크립트 약속어는 이 둘, alert(), console.log() 뿐만 아니라 수 없이 많이 있습니다. 앞으로 수많은 자바스크립트의 약속어들을 차차 배우가도록 하겠습니다.

01-4. 참고 자료

정리) HTML, CSS 로만 이루어진 정적인 웹페이지는 JavaScript 를 만나 동적으로 동작하게 됩니다. 이번 시간에는 자바스크립트에서 이미 정의된(약속어) 두 함수, alert 함수와 console.log 함수를 통해 웹페이지가 어떻게 사용자와 상호작용하며 동적으로 동작 하는지 살펴보았습니다.

아래의 영상은 자바스크립트의 역사와 탄생 배경, 그리고 현재까지 어떻게 발전해왔는지에 대한 내용을 다루고 있습니다. 본격적으로 자바스크립트를, 웹 개발을 시작하는 단계에서 한 번은 꼭 정리해야 하는 내용이니 시청해주시기 바랍니다.

자바스크립트 배우기전 꼭 봐야할 영상 | 자바스크립트의 역사와 현재 그리고 미래 (JavaScript, ECMAScript, JQuery, Babel, Node.js)

Assignment

아래에 나와있는 사항을 이행해주세요.

• 콘솔창에 "I love WeCode!" 메세지가 출력되도록 해주세요.
• 기존에 있던 코드들은 모두 삭제하고 "I love WeCode!" 만 출력되도록 해주시면 됩니다.

console.log("I love WeCode!");