> [!date] published: 2021-05-22 > [!Info] > Do it! 웹 프로그래밍을 위한 자바스크립트 기본 편을 읽고, 공부하고, 정리한 글 > [책 정보](http://www.easyspub.co.kr/20_Menu/BookView/A001/295/PUB) ## 💛 들어가며 사실 나는 책으로 공부하는 것을 별로 좋아하지 않는 사람이었다. 책에 있는 정보를 공부하는 것 보다는 실제로 구현해보면서 그때그때 필요한 정보들을 구글링해서 찾아보는 방식의 공부 방법이 더 좋을 것이라는 생각을 하고 있었는데 요즘 들어 그 생각이 조금은 틀렸을 수도 있겠다는 생각이 들어서 책을 구입하였다. 확실히 조금 아는 상태에서는 방대한 지식들 속에서 유용한 정보만을 쏙쏙 골라서 잘 공부할 수 있겠지만 완전히 처음 공부하는 상태에서는... 별로 정제된 정보를 얻을 수 있을 것 같지 않았다. 아니, 얻을 수 없었다.😂 지금 급하게 하고 있는 졸업 프로젝트에서도 자바스크립트를 사용하고 있는데 어줍잖게 알고 있는 상태에서 열심히 구글링해서 짠 코드는.. 공부해서 진짜 알고 짰다기보다는 그냥 잘 끼워맞춰서 완성된? 그런 느낌이 강했다. 어디 나가서 자랑스럽게 선보일수는 없겠다는 생각이 문득 들어 자바스크립트의 기본을 확실하게 공부해야겠다는 결심을 했고, 무분별한 구글링으로 이 사단(?)이 났으니 보다 정제된 지식을 얻을 수 있는 책으로 공부하기로 했다. ## 💛 웹 프로그래밍이란? ### ✨ 웹 사이트가 작동하는 과정 클라이언트가 서버에 필요한 정보를 웹 사이트를 통해서 요청을 하면 서버에서 요청을 받아 알맞은 정보를 전달한다. 사용자는 서버로부터 받은 정보를 웹 사이트를 통해서 확인할 수 있다. ![[cecb0e52-2252-4e2f-897f-09733bc3ffd3.png]] ### ✨ 웹 프로그래밍 웹 프로그래밍은 백엔드(Back-end)와 프론트엔드(Front-end) 개발로 나뉘어지는데 백엔드 개발은 서버에서 사용자의 요청을 처리하고, 데이터를 관리하는 것을 담당하고 프론트엔드 개발은 받아온 정보를 웹 브라우저에 어떻게 보여줄 것인지를 담당한다. ## 💛 자바스크립트로 무엇을 할 수 있을까 ### ✨ 웹 사이트를 동적으로 만들 수 있다. HTML과 CSS는 웹 사이트의 외관만을 담당한다. 따라서 웹 사이트에 동적인 효과(포인터가 올라갔을 때 메뉴가 펼쳐진다거나, 화면을 넘긴다던가 하는 것들)를 추가하기 위해서는 자바스크립트를 사용해야 한다. ### ✨ 웹 브라우저에서 실행되는 프로그램을 만들 수 있다. 웹을 동적으로 만드는 것 뿐만 아니라 웹에서 작동하는 프로그램도 만들 수 있다. ### ✨ 서버를 구성하고 서버용 프로그램을 만들 수 있다. 과거에는 서버 프로그램을 만들기 위해서 PHP, 자바 같은 언어들을 따로 공부했었어야 했지만 현재는 자바스크립트로도 서버 프로그램을 만들 수 있다. Node.js라는 자바스크립트 프레임워크를 사용하면 서버 프로그램을 개발할 수 있다. #### 📝 자바스크립트 프레임워크 자바스크립트 기반의 프레임워크(...) [애플리케이션 프레임워크 - 위키백과, 우리 모두의 백과사전](https://ko.wikipedia.org/wiki/%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC) ## 💛 자바스크립트의 특징은 무엇일까? ### ✨ 모든 웹 브라우저에서 작동한다. 자바스크립트는 웹 브라우저의 종류가 적었던 초창기부터 사용했던 언어이기 때문에 현재의 대부분의 웹 브라우저에서 작동한다. 다만 자바스크립트의 모든 문법이 현재의 브라우저에서 모두 사용할 수 있는 것은 아니기 때문에 주의해야 한다. #### 📝 자바스크립트의 버전 자바스크립트가 에크마스크립트(ECMAScript)가 된 이후부터 1년에 한번씩 기능이 업그레이드 된 버전을 발표하고 있다고 한다. (에크마스크립트와 자바스크립트의 관계에 대해서 자세히 설명해 주신 글: [링크](https://wormwlrm.github.io/2018/10/03/What-is-the-difference-between-javascript-and-ecmascript.html)) 현업에서는 주로 브라우저의 호환성을 위해서 ES5까지의 문법을 주로 사용하는데 현재의 최신 문법은 아마도... ES12라는 것 같다! ### ✨ 웹 브라우저에서 실행 결과를 즉시 확인할 수 있다. 자바스크립트로 작성한 코드는 별도의 프로그램을 설치하지 않아도 웹 브라우저에서 바로 실행시켜 볼 수 있다. ### ✨ 풀스택 웹 개발 뿐 아니라 다양한 용도의 프로그램을 만들 수 있다 자바스크립트로 프론트엔드와 백엔드를 모두 제어할 수 있고, 웹 개발 뿐 아니라 아두이노, 드론과 같은 IoT 관련 프로그램도 개발할 수 있다. ### ✨ 다양한 자바스크립트 공개 API를 사용할 수 있다. 요즘 다양한 목적의 API가 제공되고 있는데 많은 경우 그 API들은 자바스크립트로 만들어져 있다. 자바스크립트를 이용하면 API 또한 편하게 이용할 수 있다. ### ✨ 다양한 라이브러리와 프레임워크를 사용할 수 있다. - 자바스크립트 라이브러리: 자바스크립트로 미리 구현해 놓은 기능을 묶어 놓은 것(예: jQuery,,,) - 자바스크립트 프레임워크: 프레임워크에서 기본으로 제공하는 소스를 수정하거나 추가하는 방법으로 웹 프로그램을 만들 수 있게 하는 일종의 틀 (예: Angular, Vue,,,)