웹에플리케이션 만들기 – JS, PHP 프로그래밍 5 : JavaScript 실습

우리가 지난 시간에 JavaScript의 실습을 다 끝냈습니다 그리고 거기서 끝내도 되는데 제가 좀 아쉬움이 있어서 나머지 얘기를 좀 더 진행해보죠

그런데 이게 최선은 아니에요 다시 말해서 기능적으로는 우리가 다 끝낸 것인데 이 기능을 구현하는 가장 좋은 방법은 아니었다는 겁니다 여러 가지 문제들이 있는데, 그 중에 하나는 보시는 것처럼 이 html 코드 안에 이 순수하게 남겨놔야 되는 이 html 코드 안에 이렇게 지저분하게 JavaScript가 막 뒤엉켜있다는 거죠 이것은 html의 가치를 현저히 떨어뜨릴 수 가 있습니다 욕할 것 까진 없지만 그렇게 좋은 방법은 아니에요

그런데 더 좋은 방법을 설명 하려면 제가 설명해야 될 양이 확 늘어납니다 그럼 우리 수업이 불필요하게 비대해질 가능성이 있어서 제가 고심 끝에 여러분들한테 그냥 말로 설명 드리고 여러분은 상상력을 발휘해서, 제가 설명하는 것을 그냥 두리뭉실하게 이해하시면 될 것 같아요 그런데 더 중요한 것은 바로 여기에서도 html과 html이 아닌 것들을 분리해서 html을 정보로써 더 가치있게 만드는 컨셉과 그리고 중복되는 코드는 중복을 제거해서 유지보수, 속도, 여러 가지 면에서의 장점이 생기는 그 두 가지 측면에 집중을 하셔서 얘기를 들으셨으면 좋겠습니다 그리고 이거는 실습 아니니까 따라하지 마시고 제가 하는 거 그냥 보시면 됩니다 여기 보시는 것처럼 이 코드를 저는 지워 버릴거에요

너무 보기가 싫어서 그리고 대신에 이 각각의 버튼에 white_btn 이라는 id 값을 주고 밑에 거는 black_btn이라는 id 값을 주었습니다 그리고 이 각각의 버튼이 클릭됐을 때 어떤 일이 일어나야 된다라고 하는 것을 브라우저에게 알려주는 코드는 이 문서에 가장 끝에 body 위쪽 닫히는 body 위쪽에 다가 <script> 태그를 이용해서 저 곳에 다가 코드를 넣을 거예요 그 내용은 이렇습니다 여기 있는데요 여기 있는 이 코드의 내용은 이해하려고 하지 마세요 그래도 제가 얘기를 간단하게 하면, id 값이 white_btn 인 태그

이거죠 이 태그를 변수에 담고 그 태그에 EventListener를 설치한다 라는 뜻인데요 EventListener는 웹브라우저가 white_btn이라는 저 버튼에 어떤 사건이 일어나는지를 째려보도록 하는 겁니다 어떤 사건인지는 바로 여기에 나와 있어요

즉, 클릭이 이루어지는지 안 이뤄지는지를 지켜보고 있으라고 우리가 명령한 거 에요 그래서 클릭이 일어나면 여기 있는 이 구문이 실행되도록 해라라고 브라우저에게 명령한 겁니다 즉, id 값이 target인 element id 값이 target인 이 body 태그의 클래스 값을 흰색으로 주어라 라는 코드입니다 구체적인 내용 이해하지 마시고 그냥 흐름만 보시면 됩니다 마찬가지로 이번에는 이렇게 검은색 버튼에 대한 이벤트를 웹브라우저에게 지시하는 코드를 제가 추가했습니다

즉 black_btn 버튼이 클릭됐을 때 id 값이 target 인 태그의 클래스 값을 black으로 해라라는 코드입니다 이렇게 했더니 이 문서에서 여기에 어디인가에 존재했던 JavaScript 코드가 보시는 것처럼 JavaScript 특별구역으로 이렇게 격리 수용 된 것을 볼 수가 있습니다 그렇죠 그 다음에는 어떻게 해야 돼요 여기 있는 코드를 카피해서 모든 페이지에다가 붙여넣기 하시면 됩니다

그런데 똑같은 내용을 모든 페이지에 붙여넣기 한다라는 것은 무언가의 스멜이 나지 않나요 냄새가 나지 않아요 바로 중복의 냄새가 납니다 중복의 악취가 난다는 것이죠 그럼 그 악취를 어떻게 해결할 수 있느냐

CSS 처럼 이 JavaScript 파일을 별도의 JavaScript 코드를 별도의 파일로 분리시키는 거죠 분리시키는 겁니다 해보죠 실습 아닙니다 따라하지 마세요

이렇게 하고 그리고 http://localhost 그리고 scriptjs 라고 합니다 여기 있는 스크립트는 아무 이름이나 써도 됩니다 하지만 이 js 는 될 수 있으면 확장자를 js 로 쓰시기 바래요 그리고 여기 밑에 있는 이 코드는 저 script

js 로 이사를 가야 돼요 이것을 컷해서 없애고, 여기에 있는 이 코드를 이렇게 그 다음에 scriptjs 라고 이렇게 하고 scriptjs 에다가 이런 코드를 넣어놓는 거죠 그러면 (화면 조작 중) 보시는 것처럼 page_vc 라고 하는 파일이 웹브라우저에 의해서 실행이 되면 쭉 실행이 되겠죠

그 웹브라우저가 <script> 태그를 받는데 src 라고 하는 속성이 들어 있어요 그리고 그 뒤에 주소가 있습니다 그럼 웹브라우저는 이 주소에 해당되는 이 javascript 파일을 읽어서 저 내용을 마치 여기에 코드가 있는 것처럼 위치시켜서 해석하고 실행을 시키게 되는 겁니다 그러면 여러분들은 이 코드를 다른 파일에도 똑같이 붙여넣기 하면 되겠죠 실습 아닙니다

이렇고 붙여넣기하고 여기에 있는 저 컨트롤에 들어있는 이 onclick, 우리를 아주 지저분하게 느끼게 했던 저것을 몰아내고 타도해 버리고 이것의 id 값을 white_btn으로 하고 이것은 id 값을 black_btn으로 하면 이제 indexhtml파일도 잘 동작하게 될 겁니다 그런데 나중에 알고 보니까 이 scriptjs 파일안에 있는 이 코드에 버그가 있었어요 아니면 무언가 개선이 필요해요

그러면 이제부터 우리는 이 scriptjs 라는 파일의 내용만 수정하면 scriptjs 를 가져다쓰고 있는 모든 웹페이지 지금 우리가 한 것 중에는 indexhtml과 page_vs

html 에 동시에 저 변경 사항이 반영되기 때문에 우리는 하나의 파일에 집중하면 된다라는 것이죠 하나의 파일만 바뀌면 모든 파일에 그 변경 사항이 반영된다라는 것이 바로 중복이 우리에게 제공하는 혜택이고 이런 방향성은 기술의 진보 방향성이기도 하고 여러분들도 프로그래밍을 작성하는 과정에서 프로그래밍을 어떻게 하면 효율적으로 만들 것인가라고 하는 것에서 여러분들이 중요하게 고려해야 될 개선사안이기도 한 겁니다 그런데 이 내용은 상당히 복잡한 내용이에요 실제로는 그렇기 때문에 여러분들에게 부담이 될 수 있고 우리 수업을 불 필요하게 어렵게 만들 수 있기 때문에 저는 이 내용을 우리 소스 코드에 반영하지 않고 이렇게 언급만 하고 넘어 가겠습니다 우리의 소스 코드는 onclick 에 의해서 페이지의 디자인이 바뀌는 그것을 이어 나갈 거 에요

여기서 혼선이 있으면 안 되는데 걱정이 좀되지만 그럼 우리 이야기에 정리를 좀 해보죠 웹에서 가장 중심이 되는 언어는 html입니다 그리고 이 html에 왼팔 오른팔이 있는데 CSS와 JavaScript 입니다 CSS가 하는 역할과 JavaScript가 하는 역할을 잘 구분해야 되는데 html은 정보를 담당합니다 그리고 CSS는 그 정보를 예쁘게 하는 디자인을 담당해요

JavaScript는 바로 이 html을 JavaScript로 프로그래밍 쪽으로 제어를 담당한다 라고하는 이 사실을 여러분들이 깔끔이 정리하고 이해하고 계시면 우리수업은 성공한 수업이 됩니다 여기까지 해서 우리가 클라이언트 쪽 프로그래밍 즉 웹브라우저 위에서 동작하는 기술들에 대한 이야기를 여기서 마무리를 하고요 다음 시간부터는 서버 쪽에 있는 컴퓨터에서 동착하는 기술 php 또는 MySQL와 같은 것을 살펴보도록 하겠습니다