반응형
웹퍼블리싱을 실무에서 하다보면 자바스크립트를 꼭 해야하나?
해야 한다면 과연 어디까지 해야하나? 에 대해 많은 퍼블리셔들은 고민을 할 것입니다. 저 또한 이런 문제로 고민할 때가 많았습니다. 그 고민에 대한 결과로 퍼블리셔는 front end, 또는 UI에 관련된 부분만 작업하는 것이라고 저는 정의 내리고 있습니다.
예를 들어 메인 페이지부분의 개발 소스가 들어가지 않는 부분을 말하는 것입니다. 비쥬얼 움직임이 그 예 입니다. 개발이 들어가는 부분에 대해서는 간단한 자바스크립트라 하더라도 하지 않는게 제 원칙입니다. 나중에 프로젝트 완료시 그부분이 제대로 작동하지 않을시 서로 책임을 떠 넘기는 식의 문제가 발생하기 때문입니다. 그래서 저는 프로젝트 시작 시 그부분에 대해 명확히 개발자 분들과 이야기 합니다. 그렇게 하다보면 대략 웹페이지 같은 경우는 20가지 정도 기능의 스크립트 예제만 있어도 어떤 홈페이지든 제작이 가능합니다.
하지만 예제가 있더라도 소스를 읽지 못한다거나 간단한 수정을 할 수 없다면 무용 지물이겠지요? 그래서 퍼블리셔분들의 개발자만큼 스크립트를 다루지 않더라도 일하는데 지장이 되지 않을 정도의 부담없이 배울수 있는 강좌를 하려고 합니다.
모르시는 분들을 위해 완전 기초부터 시작하겠습니다.

페이지 내에 자바스크립트 추가하기

<script>는 평범한 THML입니다. 그리고 HTML을 다루다 보면 웹 페이지의 <head> 부분에 다음과 같이 <script> 태그를 추가할 일이 심심치 않게 생깁니다.

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Untitled Document</title>
	
</head>

<script> 태그의 type 속성은 포함되는 스크립트의 형식과 종류를 가리킵니다. 이 경우에 type="text/javascript"는 스크립트가 보통의 텍스트(HTML과 같은)이고, 자바스크립트로 작성되었다는 것을 의미합니다.

외부 자바스크립트 파일

페이지 내 <script> 태그를 사용하면 자바스크립트를 하나의 페이지에 추가할 수 있습니다. 하지만 대부분의 경우에는, 하나의 스크립트를 여러페이지에서 사용하게 될 것입니다. 예를 들어 메인 메뉴 스크립트는 한페이지가 아닌 모든 페이지에서 사용하게 될 것 입니다. 모든 페이지에 메인메뉴 스크립트를 사용하기 위해 자바스크립트 코드를 복사하고 붙인다면, 이는 효율적이지 않을 것입니다.
또한 자바스크립트 코드 변경하거나 개선하려고 한다면 모든페이지를 다시 열어서 수정해야하는 수고를 하게 될 것입니다.
프로그램 코드가 모든 페이지에 다 있다면 각 페이지는 덩치가 꽤 커져서 다운로드 속도를 더 늦추게 될 것입니다. 이 모든것들을 해결하기 위한 접근법으로 사용하는 것이 외부 자바스크립트 파일을 사용하는 방법입니다. 이는 .js라는 파일 확장자 텍스트 파일을 <script> 태그를 사용해 웹 페이지에 자바스크립트 코드를 포함한 파일을 링크하면 되는 것입니다.

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Untitled Document</title>
	
</head>

웹페이지에 텍스트 쓰기

자바스크립트를 사용해서 웹 페이지에 바로 메시지를 출력하는 방법에 대해 알아보겠습니다. 이것을 보고 너무 시시하다고 느꼇을지도 모르겠습니다. 하지만 기본을 완벽하게 이해하는 것이 중요하기 때문입니다.

<script type="text/javascript">
	document.write('Hello world!');
</script>

alert() 함수처럼, document.write()는 여는 괄호와 닫는 괄호 사이에 있는 문장을 출력하는 명령어 입니다. alert() 함수가 새창을 띄워 문장을 출력하는 것이라면 document.write() 는 페이지 내에서 문장을 출력 합니다.

에러추적하기

스크립트를 작성하면서 할 수 있는 실수는 단순한 오타부터 로직상의 복잡한 에러까지 다양합니다. 자바스크립트 프로그래밍 초보라면 실수의 대부분은 오타입니다. 세미콜론, 따옴표, 괄호 등을 빼먹거나, 자바스크립트 명령어를 잘 못 치기도 합니다.
그러면 간단한 몇 가지 예를 들어 보겠습니다.

실수의 종류 검사결과
인수 목록 뒤에 닫는 괄호 ')'를 빼먹는 경우 명령어의 마지막 닫는 괄호를 깜박할 수 있습니다. 예를 들어 'hellow' 뒤에 닫는 괄호를 빠뜨려서 alert('hello';가 되는 등의 경우가 있습니다.
종료되지 않은 문자열 문자열(string)은 따옴표로 감싼 문자들의 집합니다. 'hello'는 alert('hello')라는 코드 안에 있는 문자열입니다. 열거나 닫는 부호를 빼먹기 쉽습니다.
복합문에서 }를 빼먹는 경우 프로그램을 작성하다 보면 괄호와 따옴표뿐만 아니라 {}기호와 같은 다른 형태의 구두 기호도 사용하게 될 것입니다. 이런 류의 오류를 만나면, 여는 괄호와 닫는 괄호의 쌍을 제대로 맞추었는지 확인해야 합니다.
복합문에서 }XXX가 정의되지 않았습니다. 자바스크립트 명령어에 aler('hello')처럼 오타가 있는 경우, 명령어가 정의되지 않았다는 에러 메시지를 받습니다. 인터넷 익스플로러에서는 "aler는 정의되지 않았습니다." 라는 메시지가 나타납니다.
문법상 실수 문법상 실수라는 것은 오타는 아니지만 허용되지 않는 방식으로 하나 혹은 하나 이상의 자바스크립트 문장이 섞였을 때 나타나는 에러를 통칭합니다.

마치며

위 예제는 '거침없이 배우는 자바스크립트' 책의 예제를 사용 하였습니다.
처음에 어려운 것보다는 기본부터 쉽게 부담가지지 않고 접근할 수 있는 간단한 것부터 정리해 보았습니다.

반응형

+ Recent posts