[부스트코스]자바스크립트의 시작(UI와 API, 프로젝트를 마치며)

안녕하세요 부스터코스 3기 서포터즈 허브입니다. 🌿

부스터코스란?

커넥트재단은 네이버가 설립한 비영리 교육 재단입니다.
소프트웨어 개발자 양성 교육 프로그램, 부스트코스와 함께
당신의 개발 커리어를 업그레이드하세요!

 

제 포스팅은 강의 내 생각해보기와 수업에서 다루는 코드를 직접 크롬화면에서 확인 해볼 수 있도록 진행합니다. 관련된 개념과 강의는 함께 올려드리는 링크에서 확인해보실 수 있습니다. 

www.boostcourse.org/cs124/joinLectures/52258

자바스크립트의 시작

---

UI와 API

UI는 User Interface의 약자입니다. API는 Application Programming Interface의 약자이죠. 이 둘의 공통점과 차이점에 대해서 배워보도록 합시다.

예를 들어서 어떤 페이지에 버튼이 하나 있고, 이 버튼을 누르면 경고창이 뜨게 만들었다고 해 봅시다. 이 버튼을 사용하는 것은 웹페이지의 사용자죠. 사용자들이 시스템을 제어하기 위해서 조작하는 장치를 UI라고 부릅니다.

이제 코드를 봅시다. 이 경고창은 우리가 만든 것일까요? 경고창의 텍스트나, 경고창이 뜨는 타이밍은 우리가 만든 것이지만, 우리는 경고창을 실제로 띄우기 위해서는 alert라는 함수를 사용했죠. alert라는 이 함수는 웹브라우저를 만든 사람들이 미리 만들어둔 것입니다. 그리고 우리는 이 alert라는 함수를 호출해서 조작하는 것이죠. 이렇게 프로그래머들이 사용하는 조작 장치들을 API라고 부릅니다. 즉, alert는 API인 것이죠

<input type="button" value="Click me" onclick ="alert('Hello world')"> 

이러한 UI와 API라는 개념은 Javascript 뿐만 아니라 모든 프로그래밍 언어에 적용되는 개념입니다. 우리는 API를 응용하고 결합해서 새로운 프로그램을 만들 수 있는 것입니다.

생각해보기

UI와 API는 어떤 관계를 가지고 있을까요?

 

I/O장치를 활용해 UI라는 매체를 통해 서비스, 웹과 소통하고 JVM 혹은 프로그램은 API를 매체로 하여 소통하게 된다. 
UI 와 API는 어떠한 것을 이어주는 통로이지만 그것이 누구에게 보여지는가가 다르다고 생각한다.

 

---

자신의 프로젝트 진행해보기

https://www.boostcourse.org/cs124/lecture/147575/

자바스크립트의 시작

이 수업을 듣고 나서 여러분들이 해야 할 가장 중요한 것은 자신만의 프로젝트를 해 보는 것입니다. 프로젝트를 시작하려고 할 때 주의해야 할 몇 가지 점에 대해서 알아봅시다.

먼저, 자신이 배운 모든 것을 사용하기 보다는 필수적인 최소한의 도구만 가지고 문제를 해결해 보세요. 순서에 따라서 실행되어야 하는 명령들이 실행되도록 하는 것이 바로 이 최소의 도구입니다. 이것만 사용하다가 한계에 부딪혔을 때, 조건문, 반복문, 함수, 객체 등의 개념들을 활용해보세요.

웹 개발과 관련된 검색어

하지만 이렇게 여러 개념들을 활용하다보면 다시 한계에 부딪히게 될 겁니다. 그 때에는 여러분들이 새롭게 공부를 시작하셔야 합니다. 그 때 도움이 될만한 여러 검색어를 알아봅시다.

먼저 태그를 삭제하거나 자식 태그를 추가하고 싶은 경우에는 document라는 객체를 살펴보세요. 그래도 찾을 수 없다면 DOM 객체에 대해서도 살펴보세요.

만일 웹브라우저 자체를 제어해야 하는 경우, 예를 들면 웹페이지의 주소를 알아낸다거나, 창을 열거나 해야 하는 경우에는 windows 객체의 프로퍼티나 메소드를 찾아보세요.

웹페이지를 새로고침하지 않고도 정보를 변경하고 싶다면 ajax를 사용해보세요. 반대로 웹페이지가 새로고침되어도 현재 상태를 유지하도록 만들고 싶으면 cookie에 대해서 배워보세요.

인터넷이 끊겨도 동작하는 웹페이지를 위해서는 offline web application을 찾아보세요.

화상 통신 웹 앱을 만들고 싶을 때에는 webRTC를 찾아보면 됩니다. 음성을 인식하거나 음성과 관련된 것을 처리하고 싶을 때에는 speech로 시작되는 API들을 살펴보세요.

3차원 그래픽을 이용하고 싶다면 webGL, 가상현실에 대해서 알아보고 싶다면 webVR에 대해서 찾아보시면 됩니다

생각해보기

이제 여러분들이 강의를 통해서 배운 내용을 가지고 HTML+Javascript+CSS를 활용한 새로운 프로젝트를 진행하게 될 겁니다. 어떤 웹 서비스를 만들고 싶으신가요?

 

내가 만들어보고 싶은건 여러가지가 있지만 지금 당장은 내가 쓰고 싶은 것을 만들고 싶다. 음... 뽀모도로 타이머가 생각보다 가격이 바싼데 이걸 웹으로 만들어보는건 어떨까? 남은 시간은 tab title에 띄우도록하고 알람을 주거나 오프라인으로도 사용할 수 있도록 하면 좋을 것이다. 

 

---

강의를 마치며 느낀점

지금까지 약 한달간 자바스크립트를 수업해보았다. 사실 이 수업을 듣고 자바 스크립트를 완벽하게 마스터 했다고 하면 아마 코딩 천재일 것이다. 부스트코스의 자바스크립트의 시작은 말 그대로 "시작"이다. 

 

왜 자바스크립트가 필요한지, 무엇을 공부해야하는지와 같이 방향성을 잡아주고 올바른 학습방법과 호기심을 제시해준다. 사실 생활코딩님의 수업은 코딩을 한번이라도 공부해본 사람은 다 알만큼 유명한 수업이다. 무료이지만 알기쉽고 짧은 강의 덕분 아니였을까? 이번 방학 목표였던 자바스크립트 배우기를 이렇게 마우리 해서 좋았다.

 

하지만 이제 시작이니 WEB UI 과정을 다 듣고 자바 스크립트를 활용하여 나만의 프로젝트를 진행해봐야겠군 ㅎㅎ

---

www.boostcourse.org/

다 함께 배우고 성장하는 부스트코스

github.com/hhhminme

hhhminme - Overview