자바스크립트(JavaScript) 기초 이해하기
등장배경과 장점, 중요성
웹사이트 포트폴리오를 본격적으로 빌딩하고 있는 중 어딘가 모르게 답답함이 계속 느껴졌다. 워드프레스에서 제공하는 기본 테마를 이용하여 이커머스 사이트를 만들어보고 있는데, 이미 다 짜여진 것을 조금 커스텀하는 데에도 아직 이해가 되지 않는 언어들이 보인다. 아무래도 HTML, CSS의 기초적인 것만 알다보니, JavaScript가 나오면 마치 글을 모르는 문맹인 처럼 막히기 마련이다. 어차피 자바스크립트는 장기적으로는 공부해야하는 부분이기 때문에, 하루라도 더 빨리 기초적으로 이해를 하고 좀더 웹사이트를 효과적으로 빌딩하고 싶어서 이번에도 생활코딩의 강좌를 기반으로하고 기타 자료를 수집하여 공부를 시작해 본다.
자바스크립트(JavaScript)의 등장
생활코딩, WEB2 JavaScript - 1. Introduction인류는 HTML을 통해 정보를 표현하고 주고 받을 수 있게 되었다. 당시에는 이것만으로도 혁명적이었으나, HTML은 정적이다. 사람들은 웹페이지도 게임처럼 동적으로 사용자와 상호작용할 수 있기를 원했다. 그렇게 태어난 것이 자바스크립트다.
웹은 HTML을 이용해서 먼저 웹페이지를 만든 뒤 자바스크립트를 이용해서 사용자와 상호작용할 수 있는 기능을 추가함으로써, HTML의 정보와 자바스크립트의 기능을 모두 갖춘 전무후무한 유일무이한 시스템으로 성장했다.
자바스크립트란 무엇인가?
구글링을 통해, 자바스크립트를 이해하기 좋은 튜토리얼을 발견해서 함께 참고해서 공부하면 좋을 것 같다.
What is JavaScript?
자바스크립트는 위에서도 언급했듯, 웹페이지를 살아있게 만들도록 탄생된 것이다. 자바스크립트는 프로그래밍언어인 Java와는 다르다는 점을 유의해야 한다. 자바스크립트는 처음에 'LiveScript'라는 이름이었다고 한다. 하지만 만들어졌을 당시 자바가 매우 유명했기 때문에 자바의 동생, 형제라고 칭해서 새로운 언어로 포지셔닝하는 것이 좋겠다는 판단으로 자바스크립트가 된 것이다. 하지만 자바스크립트가 진화함에 따라, ECMAScript라 불리는 자체 표준 기술 기준과 함께 자바와 다른 완전히 독립적인 언어가 됐다.
오늘 날 자바스크립트는 브라우저 뿐만 아니라 서버, 자바스크립트 엔진이라 불리는 특별한 프로그램이 내장된 기기에서도 동작할 수 있다. 각각의 다른 엔진은 다른 'codenames'을 갖는데 예를들면 V8 – in Chrome and Opera, SpiderMonkey – in Firefox와 같다. 이런 코드네임을 기억해두면 좋은 것은 이후에 어떤 기능이 V8에 의해 지원된다는 말이 나오면, 이는 즉 크롬과 오페라에서 작동됨을 알 수 있기 때문이다.
자바스크립트로 뭘 할 수 있을까?
가볍게 이해 하기
What can in-browser JavaScript do?
브라우저 내의 자바스크립트로는 뭘 할 수 있을까? 웹 서버 그리고 사용자와의 인터렉션, 웹 페이지의 조작과 관련된 모든 것이 가능하다.
예를 들면 다음과 같다.
1. 페이지에 새로운 HTML을 추가, 기존 내용 변경, 스타일 수정
2. 사용자의 행위, 마우스 클릭에 동작, 마우스 이동, 키 누름에 반응
3. 네트워크에서 리모트 서버를 넘어 요청 전송, 파일 업로드 및 다운로드
4. 쿠키 획득, 방문객에 메세지를 보여주고 질문
5. 클라이언트 사이드 (로컬 스토리지)의 데이터 기억
자바스크립트는 내가 생각한 것 보다 훨씬 많은 기능을 갖고 있었다. 어떻게 보면 내가 구현하고 싶은 대부분은 정적인 언어가 아닌 동적인, 자바스크립트에 모두 해당하는 것이나 다름 없다. 알면 알수록 내가 앞으로 자바스크립트를 모르고서 이 분야에서 살아남는 것이 말이 안된다는 것을 깨달았다.
간단한 실습으로 이해하기
웹브라우저는 한 번 화면에 출력되면 그 다음에는 자기 자신을 바꿀 수 있는 능력이 없다. 그걸 대신해주는 것이 바로 자바스크립트다. 본 수업 과정에서는 night, day 버튼을 클릭했을 때 배경과 본문의 폰트 컬러를 바뀌게 하는 자바스크립트의 능력을 실습해보며 문법을 익힌다.
생활코딩, WEB2 JavaScript - 2. The goal of this course우선, 문법에 대한 정확한 이해보다는 한국말로서 이해하는 것이 필요하다.
night와 day라는 버튼은 <input>이라는 태그를 통해 만들 수 있다.
<input>태그 type의 속성 값으로 "button"을 준다.
그리고 value라는 속성 값에 "night"을 주면, 웹브라우저는 이 버튼의 이름으로 night를 쓰게된다.
HTML 사용설명서에 따르면, onclick이라는 속성에는 자바스크립트가 와야한다고 써있다고 한다.
onclick 속성 값에 자바스크립트를 넣어주면, 사용자가 onclick 속성이 위치하고 있는 버튼을 클릭했을 때 이 자바스크립트 코드(document.querySelector...'black'; 부분)를 실행 시킬 것이다. 라고 써있다고 한다.
생활코딩, WEB2 JavaScript - 2. The goal of this coursenight 버튼을 클릭하면 <body> 태그 옆에 style 속성들이 생긴다. CSS는 전에 다뤄봐서 이해되는 부분인데, 이 style 속성에는 CSS가 와야한 다는 것이 HTML사용 설명서에 써져 있다. 이와 같이, 자세한 자바스크립트의 문법에 대한 이해 보다는 어떻게 자바스크립트가 동작하고 웹 브라우저 내에서 사용자와 동적으로 상호작용하는 지를 확인해볼 수 있다.
자바스크립트는 왜 특별한가?
자바스크립트의 최소 세 가지의 좋은 점.
1. HTML/CSS와의 완전한 통합
2. 간단한 것들이 간단하게 처리됨
3. 모든 주요 브라우저에서 지원되며 기본적으로 사용 가능
자바스크립트는 이 세가지를 결합하는 유일한 브라우저 기술이기 때문에 특별한 것이다.
자바스크립트를 왜 배워야 하는지에 대한 3가지를 소개한 영상이다. 사용자와 맞닿아 있는 UI, 동적인 프로토타이핑을 제작하는 데에 유용하다. 사용자와 맞닿아 있는 무언가를 한다면, UI디자이너라면 꼭 자바스크립트를 배워야 함을 강조한다. 이번 기회에 기초들을 차근차근 공부하면서 나도 점점 웹사이트를 만드는 것에 대해, UI에 대한 이해의 폭이 더 깊어질 것을 기대해 본다.
