[자바스크립트의 시작] 9번째: 활용

0. 오늘의 정리

34. 파일로 쪼개서 정리 정돈하기
35. 라이브러리와 프레임워크
36. UI vs API
37. 수업을 마치며

1. 파일로 정리하기

이제까지 배운 자바스크립트를 이용해 코드를 작성하면 html문서 내에 아주 복잡한 자바스크립트 코드가 많아지게 됩니다. 이는 가독성을 어렵게 만들고, 유지보수 또한 어렵게 합니다. 이를 해결하는 방법은 기능별로 JS코드를 적은 파일을 만드는 것입니다. 이렇게 하면 코드가 명확해지고 가독성이 좋아진다는 장점이 있습니다.
새로운 파일을 만들고, 확장자는 .js로 하면 js코드를 저장하는 파일이 만들어집니다. 그리고 HTML과의 연결은 <script>태그와 src속성을 이용해서 합니다.
코드로 작성하면 다음과 같습니다.

<script src='colors.js'></script>

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

오늘날의 소프트웨어 개발은 모든 부분을 혼자하지 않스비다. 다른 사람들이 이미 잘 만들어 놓은 코드를 가지고 조립하거나 수정하면서 빠르게 개발합니다. 그 중 첫번째로 알아볼 것은 라이브러리입니다. 라이브러리는 프로그램에 필요한 일부 코드들을 정리한 것입니다. 일부 코드는 프로그램을 만들 때 사용될 부품이라고 생각하면 됩니다. 라이브러리를 선언하고 우리가 그 안에서 부품을 꺼내 내가 만들 프로그램에 적용하면 되는 것입니다. 대표적인 라이브러리로 jQuery가 있다고 합니다. 하지만 이는 여러 문제점이 있어 요즘에는 잘 사용하지 않는다고 합니다. 이 글에서는 라이브러리가 어떤 느낌인지 알아가는 용으로 사용하도록 합시다.
jQuery를 사용하기 위해서는 다운로드 받거나 html에 CDN으로 선언해도 됩니다. CDN으로 선언하는 방법은 다음 코드와 같습니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

jQuery에는 반복문을 사용하지 않고도 모든 태그를 한 번에 처리할 수 있는 코드가 있습니다. 이 코드가 필요하면 우리는 그냥 부품을 꺼내사용하는 것처럼 가져다 사용하면 됩니다. 다음 코드는 한 줄만으로 모든 a태그의 색깔을 powderblue로 바꾸는 것입니다.

$('a').css("color","powderblue");

라이브러리가 부품들을 정리해 놓은 통이라면 기본적인 뼈대를 갖춘 것을 프레임워크라고 할 수 있습니다. 프레임워크는 어떤 종류의 개발시 필요한 공통적인 부분을 미리 만들어두어 몇몇 내용을 추가 및 수정함으로 프로그램을 쉽게 개발할 수 있게 해주는 것입니다. 게임이면 게임의 공통 요소를, 문서 프로그램이면 그에 맞는 공통 요소를 미리 만들어두는 것입니다. 자바스크립트의 대표적인 프레임워크로는 리액트, 앵귤러, 뷰 등등이 있습니다.

3. UI와 API

UI는 User Interface의 약자입니다. API는 Application Programming Interface의 약자이죠.
예를 들어서 어떤 페이지에 버튼이 하나 있고, 이 버튼을 누르면 경고창이 뜨게 만들었다고 해 봅시다. 이 버튼을 사용하는 것은 웹페이지의 사용자죠. 사용자들이 시스템을 제어하기 위해서 조작하는 장치를 UI라고 부릅니다.
경고창의 텍스트나, 경고창이 뜨는 타이밍은 우리가 만든 것이지만, 우리는 경고창을 실제로 띄우기 위해서는 alert라는 함수를 사용했죠. alert라는 이 함수는 웹브라우저를 만든 사람들이 미리 만들어둔 것입니다. 그리고 우리는 이 alert라는 함수를 호출해서 조작하는 것이죠. 이렇게 프로그래머들이 사용하는 조작 장치들을 API라고 부릅니다. 즉, alert는 API인 것이죠.

4. 수업을 마치며

이 수업을 들으며 내용을 가지고 자신만의 프로젝트를 하는 것이 중요하다고 합니다. 그리고 배운 최소한의 도구를 이용해서 문제를 해결하려고 하는 것도 중요하다고 합니다.
또한, 프로젝트를 하며 부딪힐 문제에 대해 새로운 공부가 필요할 경우 도움이 될만한 검색어를 알려주셨습니다.

• 태그를 삭제하거나 자식 태그를 추가하고 싶은 경우에는 document라는 객체를 살펴보라고 합니다. 그래도 찾을 수 없다면 DOM 객체에 대해서도 알아보라고 합니다.
• 만일 웹브라우저 자체를 제어해야 하는 경우, 예를 들면 웹페이지의 주소를 알아낸다거나, 창을 열거나 해야 하는 경우에는 windows 객체의 프로퍼티나 메소드를 찾아보면 된다고 합니다.
• 웹페이지를 새로고침하지 않고도 정보를 변경하고 싶다면 ajax를 사용해보라고 합니다. 반대로 웹페이지가 새로고침되어도 현재 상태를 유지하도록 만들고 싶으면 cookie에 대해서 배우길 추천합니다.
• 인터넷이 끊겨도 동작하는 웹페이지를 위해서는 offline web application을 찾아보세요.
• 화상 통신 웹 앱을 만들고 싶을 때에는 webRTC를 찾아보면 됩니다. 음성을 인식하거나 음성과 관련된 것을 처리하고 싶을 때에는 speech로 시작되는 API들을 살펴보세요.
• 3차원 그래픽을 이용하고 싶다면 webGL, 가상현실에 대해서 알아보고 싶다면 webVR에 대해서 찾아보시면 됩니다.