5/10(2) 생활코딩 - JavaScript 完

오늘의 진도:

 WEB2 - JavaScript

  파일로 쪼개서 정리정돈하기~수업을 마치며

 

1. 파일로 쪼개서 정리정돈하기

파일 또한 정리정돈의 도구이다.

서로 연관된 코드들을 파일로 묶어서 그룹핑할 수 있다.

 

night 버튼이 있는 input 태그를 다른 웹페이지에 배포해보자.

회색으로 표시한 부분을 복사해서 다른 웹페이지에 붙여넣으면

잘 작동하지 않는다.

자바스크립트는 따라가지 않았기 때문.

 

이 때 colors.js라는 파일을 만들고,

공통적으로 들어가는 코드를 카피해서 붙여넣는다.

※ script 태그가 들어가면 안 된다!

그리고 모든 웹페이지의 head 안에

script src="colors.js" 코드를 추가하면 정상적으로 작동한다.

 

2. 라이브러리와 프레임워크

다른 사람이 만든 SW를 부품으로 해서, 그 SW를 소비해서,

내가 만드는 SW의 생산자가 되는 방법

= 생산자로서 소비자, SW의 사회성

 

라이브러리와 프레임워크

- 공통점: 다른 사람의 도움을 받아 SW를 만든다. 다른 사람과 협력하는 모델

 

① 라이브러리: 내가 만들고자 하는 프로그램에 필요한 부품이 되는 SW를 잘 정리정돈해놓아, 재사용하기 쉽도록 되어 있는 SW.

 SW를 만드는 내가 라이브러리를 당겨와서 쓰는 느낌

 

② 프레임워크: 만들고자 하는 것이 무엇(게임, 웹, 채팅 등)이냐에 따라서 그것을 만들려고 할 때 언제나 필요한 공통적인 것이 있고, 만들고자 하는 것에 대한 기획 의도에 따라서 달라지는 부분이 있을 것이다.

 그 중에서 공통적인 부분은 프레임워크라는 것이 만들어 놓고, 우리는 만들고자하는 것의 기능이나 개성에 따라 달라지는 부분만 살짝 살짝 수정하는 것을 통해서,

 만들고자 하는 것을 처음부터 끝까지 만들지 않도록 해주는 반제품과 같은 것.

 프레임워크 안에 우리가 들어가서 작업하는 ㅡㄴ낌

 

 자바스크립트의 라이브러리 중에서 가장 유명한 것이 jQuery이다.

다운로드된 파일을 프로젝트 폴더 디렉토리로 이동해도 된다.

 

또 다른 편리한 방법은 이 jQuery 페이지에서

CDN(Content Delivery Network을 찾아보는 것이다.

내가 이 라이브러리를 다운로드 받아서,

내 프로젝트에 포함시키고, 업로드하고,

그리고 그걸 또 서비스하려면 돈을 내고,

복잡하고, 돈이 든다.

 

그래서 이런 많은 라이브러리들이 CDN이라는 걸 통해서

자기들의 서버에다가 파일을 보관해놓고

우리는 그것을 script src를 통해서 가져갈 수 있도록 하는 방식을 취하고 있다.

사용료까지 대주고, 얼마나 좋은가

이 중에서 구글 CDN을 눌러서 들어가서

 

제일 최신 버전인 3.x를 복사해서

 

내가 만든 웹페이지의 head 안에

colors.js 앞에 script 태그로 붙여넣는다.

이것을 jQuery를 사용하려는 모든 웹페이지에 붙여넣기 해야한다.

그럼 더이상 뭘 다운받거나 할 필요 없이 이걸로 끝인 것이다.

 

jQuery를 이용해서 colocr.js 파일을 수정해보겠다.

 

반복문을 통해서 여러 태그들을 처리해야될 때,

jQeury를 이용하면 jQuery가 우리 대신 반복문을 처리해주니까

반복문을 쓰지 않고 한 줄짜리 코드로 할 수 있다.

 

회색으로 선택한 코드는 주석처리를 해서 동작하지 않게 했다. (Ctr+/)

 

jQuery는 $로 시작한다.

즉, $라는 이름의 함수이다.

$('a')라고 하면 이 웹페이지의 모든 a 태그를 jQuery로 제어하겠다는 뜻이다.

jQuery에서 CSS를 바꾸는 방법을 검색해보자.

검색어: jQuery CSS

 

css라는 함수를 쓰면 된다고 나와있다.

그리고 .css("color","red") 이런식으로 쓰면 된다고 나와있다.

 

그래서 .css라고 쓰고,

이 코드가 바꾸려고 하는 것은 color 값이므로 color라고 쓰고,

두 번째 인자로는 이 매개변수를 통해 들어온 color 값을 준다.

나머지 두 개도 같은 방식으로 바꿔준다.

 

3. UI vs API

(1) UI (User Interface)

위 그림의 아래와 같은 코드를 입력하고

Click 버튼을 누르면 경고창이 뜬다.

 

이 버튼은 누가 사용하는가?

우리의 웹 어플리케이션(앱)을 이용하려고 하는 사용자가

이런 버튼과 같은 조작 장치를 이용해서

우리의 웹 애플리케이션을 사용하고 있는 것이다.

 

사용자가 시스템을 제어하기 위해서 사용하는 조작 장치를 UI라고 부른다.

 

(2) API (Application Programming Interface)

위 그림의 경고창은 우리가 만든 것일까, 우리가 만들지 않은 것일까?

우리가 만들기도, 만들지 않기도 했다.

 

이 경고창이 실행되는 타이밍이나

경고창에 표시되는 텍스트는

우리의 의도가 반영되었으므로

우리가 만든 것이라 할 수 있다.

 

그러나 이 한 줄짜리 코드에

경고창의 기능이나 모양 등은 설명되어 있지 않다.

 

이 경고창은 어떻게 만들어진 것일까?

웹브라우저를 만드는 사람들이

우리 대신에 경고창 기능을 미리 만들어 두었다가

우리가 alert라는 함수를 실행하면 경고창을 띄워주겠다고

JavaScript의 사용설명서를 통해 약속한 것이다.

 

즉, 함수 alert는 경고창을 실행하는 조작 장치인 것이다.

이렇게 애플리케이션을 만들기 위해서

프로그래밍을 할 때 사용하는 조작 장치들을 API라고 부른다.

alert라는 것이 API인 것이다.

 

모든 애플리케이션들은

API를 프로그래밍적으로, 즉 순서대로 실행하는 것을 통해 만들어진다.

 

API가 없다면 순서가 무슨 소용이 있겠는가?

또 순서가 없다면 API가 또 무슨 소용이 있겠는가?

 

API와 순서는 단어와 문법처럼, 또 부품과 그 부품의 결합 방법 처럼

서로 떼려야 뗄 수 없는 관계에 있다.

 

프로그래머가 되기 전까지 여러분은 평생 UI만 사용했을 것이다.

이제 우리는 API도 사용하는 프로그래머가 된 것이다.

JavaScript라는 접착제로 API들을 결합(응용)해서

세상의 누구도 만들어 본 적이 없는 응용 프로그램을 만들 수 있게 된 것이다.

 

4. 수업을 마치며

지금이 바로 프로젝트를 시작할 때이다.

시작이 늦어질수록, 공부를 많이 할수록

자기가 짠 코드를 긍정하기 어려워지고 머리속이 복잡해진다.

 

자신의 프로젝트를 시작할 때

모든 개념을 총동원하려고 하지 말고,

필수불가결한 최소한의 도구만을 가지고

문제를 해결하려고 시도해보라.

 

최소한의 도구란

순서(프로그램)에 따라서 실행되어야 하는 명령들이 실행되도록 하는 것이다.

객체도, 함수도, 조건문도, 반복문도 필요하지 않다.

 

최소한의 지식으로

현실의 문제를 해결하기 위해서 노력해 보자.

그러다보면 그것만으로는 도저히 해결할 수 없는 순간이 오는데

그때 주의깊게 반복문, 조건문, 함수, 객체를 신중하게 도입하면서

각각의 개념들간의 관계에 익숙해지다보면

마침내 유창하게 이런 개념들을 활용할 수 있게 될 것이다.

 

그렇게 즐거운 시간을 보내다 보면

또 다시 한계가 찾아올 것이다.

바로 그때가 실습을 멈추고 공부를 다시 시작할 때이다.

 

< 앞으로 부딪히게 될 만한 몇가지 한계들과

그 한계를 극복하는데 도움을 줄 만한 검색어 추천 >

 

여러분이 웹페이지에 있는 어떤 태그를 삭제하고 싶거나

어떤 태그에 자식 태그를 추가하고 싶다면

document 객체를 좀 더 자세히 살펴 보세요

여러분이 필요한 메소드가 그 안에 포함되어 있을 겁니다

 

만약에 document 객체를 통해서도 찾을 수 없다면

DOM으로 수색 범위를 넓혀 보세요

DOM 객체, document 객체는 DOM의 일부거든요

 

또 웹페이지가 아니라 웹브라우저 자체를 제어해야 한다면

window 객체를 조사해 보세요

 

이를테면, 현재 열려있는 웹페이지 주소가 뭔지 알아내야 될 수도 있고

여러분이 새 창을 열어야 될 수도 있고,

 

또 웹브라우저의 화면 크기를 JavaScript를 통해 알아야 한다면

window 객체에 속해 있는 프로퍼티나 메소드가 여러분을 도울 수 있을 거에요

 

또 웹페이지를 리로드하지 않고 정보를 변경하고 싶다면

ajax가 필요할 겁니다

현대적인 웹앱을 만드는 데 필수적인 테크닉입니다

 

또 웹페이지가 리로드되어도 현재 상태를 유지하고 싶다면 cookie를 배우세요.

cookie와 함께라면 사용자를 위한 개인화된 서비스를 제공할 수 있습니다

 

인터넷이 끊겨도 동작하는 웹 페이지를 만들고 싶다면

offine web application을 찾아보세요

 

화상 통신 웹 앱을 만들고 싶다구요?

webRTC라는 것이 있습니다

 

또 사용자의 음성을 인식하고 음성으로 정보를 전달하고 싶다면

speech로 시작하는 API들을 살펴 보세요

 

또 3차원 그래픽으로 게임과 같은 것을 만들고 싶다면

webGL을 살펴보십시오

 

가상현실에 관심이 많으시다구요?

그럼 webVR이라는 것도 있습니다.