TIL1. Java Script란 무엇인가(1)

(1*MDN Documentation을 읽으면서 혼자 정리하는 포스트입니다. (공책 낭비하면 나무가 너무 아까우니까요.. 그냥 블로그에 쓰려구요...) 영어 문장을 아주 어색하게 직역하고 있으며, 개인 사담이 많이 들어갑니다. 

 

 

 

 

1. 자바스크립트란?

 

자바스크립트는 scripting or programming language로 웹 페이지를 동적으로 만들어 준다. 여기서 동적인 웹페이지란 정보를 단순히 나열해서 보여주는 식의 홈페이지가 아니라 (2000년대 초반에 많이 봤던 홈페이지들..) 사용자와 인터액티브하게 반응하는 (클릭을 하면 이미지가 어디서 슝-하고 나타난다거나, 스크롤링 할 때 여러 효과가 나타나고,  2D/3D 그래픽도 들어가는 등등..) 웹페이지라고 할 수 있다. 지금 볼 수 있는 대부분의 웹페이지는 동적인 웹페이지라고 할 수 있고, 그 웹페이지를 만들어 주는 프로그래밍 언어가 자바스크립트이다 !

 

 

 

 

 

---

*내가 자바스크립트에 매료 된 이유?

물론, 자바스크립트를 잘 배워두면 나중에 Electron을 추가로 배워서 데스크탑 앱을 만들 수 있고,

또 React Native를 배우면 모바일 앱까지 만들 수 있으며(!!!!)

Node.js를 배우면 백앤드까지 커버할 수 있다는 실용적인 이유도 있지만,

그냥 처음 자바스크립트를 배울때 DOM을 이용해서 document에 있는 element를 받아와서

정말 몇 줄 안되는 코드로도 웹페이지에 다양한 효과를 줄 수 있다는 사실을 배웠을 때 너무나 놀라웠다!!!!

(웹개발 하면서 가장 감격했던 순간 베스트 3중 하나 ㅋㅋㅋㅋ )

그래서 자바스크립트를 배우는 일이 너무 즐겁다.

 

---

 

 

2. 그래서 자바스크립트가 정확히 무엇을 할 수 있는가?

 

자바스크립트도 다른 프로그래밍 언어처럼 변수에 값을 저장해서 정말 유용하게 사용할 수 있고

(가끔 variable이 없어서 매번 value가 필요할 때 마다, 그 value를 입력해야하는 상황을 상상해본다.....)

string을 잘랐다 붙였다 하는 등등도 할 수 있다. 내가 가장 좋아하는 건 웹페이지에서 일어나는 여러 사건들(클릭, submit, 스크롤링 등등)에 반응해서 웹페이지가 변화무쌍하게 또 변할 수 있다는 것!!! 그걸 가능하게 한다는 게 정말 자바스크립트의 큰 매력이 아닐까😍

 

 

자바스크립트를 이용하면 또 정말 멋진 점이!!!(아직 내가 더 열심히 배워야하는 부분인데🙄)

API를 이용하는 것!!!!

 

 

*API가 모죠?

APIs는 Application Programming Interfaces의 약자다.

이미 만들어져있는 코드 블록이라고 생각하면 되는데 API를 사용하면 내가 쓴 보잘 것 없는 자바 스크립트 코드에 막강한 기능을 더해준다!!!!!!!!!!

(나 혼자 그런 기능까지 만들어서 웹페이지를 만들어야 한다면.. 배포하려고 하면 세상 다 변해있을 듯ㅋㅋ)

 

MDN은 이케아에 비유를 하는 것 같은데 ㅎㅎ

우리가 책장 하나 만들자고 직접 다 디자인하고, 치수 재고, 목재 구해와서, 니스칠하고 등등등을 할 수는 없는 거 아니겠어요?(물론 취미로 목공 배우고는 싶다) 이미 깔끔하게 다 디자인 되어 나온 선반들 가져와서 잘 끼워넣기만 하면!! 훨씬 편하겠죠!! 그걸 웹개발에서 API님이 해주시는 것...

 

 

API에는 두 가지 카테고리가 있다. 

 

1. Browser APIs

MDN의 설명:

Browser APIs are built into your web browser, and are able to expose data from the surrounding computer environment, or do useful complex things. 

(솔직히 말해서 아직까지 data from surrounding computer를 expose할 수 있다는 게 어떤 기능인지 잘 모르겠다. 공부하고 실습하다 보면 알게 되겠지 ㅎㅎㅎ)

예를 들어서,

-DOM API를 사용하면 개발자가 HTML과 CSS를 manipulate 할 수 있다. 

HTML을 생성하고 제거하고 변화시킬 수 있으며, 페이지에 새로운 스타일을 적용할 수 있다. 

팝업창이 뜨는 것도 DOM API를 이용한 것.

(->요즘 매일 하는 것)

- Geolocation API는 geographical information을 준다. 이 API가 바로 구글 지도가 우리 위치를 찾아서 지도에 찍어내는 방법이라는데.....

(도대체 어떤 천재가 어떻게 만든 건지 너무 궁금하다)

- Canvas와 WebGL API는 2D, 3D 그래픽을 만드는 데 사용된다.

(우와!!! 나 간단한 그림판 만들어 봤는데 이게 그거 였..@_@!!!!!!!!!!!!!!)

- Audio와 비디오 APIs는 웹페이지에서 오디오나 비디오를 재생하는 것, grab video from your web cameara and display it on someone else's computer 과 같이 멀티미디어를 사용할 수 있게 해준다.

(아직 안써봐서 정확히 어떤 기능인지 모르겠다. 그래서 번역도 어떻게 해야할 지 모르겠다 ㅋㅋㅋㅋ 다음달에 할 자바스크립트 프로젝트 리스트에서 그래도 보긴 봤으니.. 아마 그때 실습해보면 더 자세히 머릿속에 그림이 그려질 것 같다!)

 

 

 

MDN 읽다가  real code that real customers will use 라는 문장을 봤는데 너무나 심장이 콩닥콩닥 한거야..

흔들리는 코드 속에서~~~ 내 버그가 느껴진거야~~~~~

 

 

 

 

2. Third party APIs

- 디폴트로 웹에 깔려있는게 아니다.

- 웹 어디선가 코드와 정보를 가지고 와야 쓸 수 있다.

- Twitter API 사용하면 내 웹사이트에 나의 가장 최근 트윗을 띄울 수 있다. 

(머리에 딱 떠오른 사례는 dw.com 사이트. DW에서 관리하는 트위터 계정의 멘션들이 꾸준히 업데이트 되서 실시간으로 볼 수 있었던 거 기억난다.. 그게 이거였어!!!)

- Google Maps API나 OpenStreetMapAPI를 사용하면 그들의 custom maps를 내 웹사이트에 embed할 수 있다.

- 내가 가장 처음으로 써 본 Third party APIs는  To Do List 만들 때 써본 날씨 API였다!