---
description: JavaScript는 무엇인가?
---

# JavaScript

> JavaScript는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어입니다. 이 언어는 90년대부터 주로 웹 브라우저 상에서 UI 를 동적으로 보여주기 위하여 사용을 해왔습니다. 기존에는 브라우저에서만 사용해왔던 언어인데, 이제는 단순히 웹페이지에서만 국한되지 않고 Node.js 런타임을 통하여 서버 쪽에서도 사용을 할 수 있게 되었습니다.
>
>
>
> :scroll: 참고페이지 : [https://ko.javascript.info/intro](https://ko.javascript.info/intro) (궁금한 사람만 클릭!)





이론이나 배경을 공부하는 것은 지루하다.😪  JavaScript로 뭘 할 수 있는지 알아보자.



## 1. 웹페이지 만들기

&#x20;자바스크립트와 문서 객체 모델 (Document Object Model, DOM)을 통해 HTML 문서를 동적으로 변경할 수 있다. 자바스크립트 이전에는 웹 페이지가 HTML과 CSS로만 작성되었다. HTML과 CSS는 스타일을 지정할 수 있지만 하이퍼링크를 제외하고는 상호 작용할 수 없는 정적 페이지만 만들 수 있다. 자바스크립트로는 다음과 같은 기능 구현이 가능하다.



* 메뉴 바&#x20;

![](https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2FQA456Y93u8PRpQm76MjA%2Fnavigation%20bar.gif?alt=media\&token=54f56a98-02a2-429c-bbfb-c89d6ebeebf0)

* 이미지 확대 축소, 동적 갤러리 만들기

<img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2Ft25StRYNmMbozhzJVomf%2Fimg.gif?alt=media&#x26;token=569fed05-4f45-44ae-a540-7e781d15fc35" alt="" data-size="original">

* 마우스 위치에 따른 효과 추가&#x20;

![](https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2FEYyurRcOmbZs4vXNgvBA%2Fmouse.gif?alt=media\&token=f1938a68-34a7-4823-997a-946a65d0c7ac)

* 애니메이션&#x20;
* 드랍다운 및 햄버거 스타일 메뉴 만들기 등&#x20;

## 2. 웹 서버 , 백 엔드 구축&#x20;

Node.js의 등장으로 자바 스크립트로 서버 구축도 가능해졌다. 한 가지 언어로 서버 - 클라이언트 모두를 개발할 수 있게 된 것이다.

프런트엔드와 백엔드 모두에 대해 전체 스택에서 자바스크립트를 사용하는 것은 응집력 있는 애플리케이션을 생성하기 때문에 훌륭한 방법이다. 가능한 한 많은 코드가 모두 같은 언어로 되어 있으면 단일 팀으로 유지 관리, 관리, 업데이트 및 빌드 하기가 더 쉬워진다.

<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2Fbxlf77k12ek1TD1Eq4vZ%2FScreenshot_1.png?alt=media&#x26;token=b806d9e7-7a6b-442b-b505-d820e825267f" alt=""><figcaption><p>[Web Client - Web Server 구조]</p></figcaption></figure>



## 3. 3D 화면(애니메이션)을 구성할 수 있다.

three.js 라이브러리를 통해 3D 게임, 애니메이션 등을 제작할 수 있다.&#x20;

데이터 시각화도 가능하다.

[ https://threejs.org/  ](https://threejs.org/) - three.js를 통해 만들어진 작품들을 감상할 수 있다.&#x20;

<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2F2KQO7yI4dgOKe7LiO8Yr%2Fthree.gif?alt=media&#x26;token=2f75add7-4a9e-4cb0-a5f1-fb29c70a9326" alt=""><figcaption></figcaption></figure>

## 4. 웹   애플리케이션 , 모바일 애플리케이션 만들기

데스크탑 용 애플리케이션에서나 가능할 것 같았던 메일, 스프레드 시트,  이미지 에디터 등을 웹사이트에 접속하는 것 만으로 사용이 가능한 수준이 되었다.

React Native나 NativeScript,  Apache Cordova 등을 사용해 모바일 앱 만들기가 가능하다. 이런 프레임워크 사용 시 iOS , Android 용 앱을 한번에 만들 수 있다.&#x20;

<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2FNFodYOVnZW50zwIF6ZqK%2FScreenshot_2.png?alt=media&#x26;token=f250a643-7b85-470c-8ceb-fe89919ea559" alt=""><figcaption></figcaption></figure>



## 5. 데스크탑  앱 만들기&#x20;

Electron을 사용해 자바스크립트로 데스크톱 앱 만들기가 가능하다.

[https://www.electronjs.org/apps](https://www.electronjs.org/apps) - Electron을 이용해 만들어진 App을 볼 수 있다.

일반적으로 익숙한 Discord, WordPress, Twitch 등이 있고&#x20;

개발을 하면서 자주 보게 될 VSCode , Slack, Trello, Notion, MS Teams 등 많은 앱들이 Electron을 사용해 제작되었다.

<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2F2IRPzNmrLyipPxfhOHfZ%2FScreenshot_3.png?alt=media&#x26;token=b6bbd1a4-9e26-45d0-a06b-6d0ff8ffb8c2" alt=""><figcaption></figcaption></figure>

## 6. 게임 만들기&#x20;

자바스크립트는 브라우저 내 게임을 만드는 데 자주 사용된다. 개발자는 자바스크립트를 사용하여 2D 및 3D 퍼즐, 롤플레잉 게임, 레이싱 게임, 플랫폼 게임 등을 만들 수 있다.

&#x20;간단한 브라우저 게임을 만드는 것은 초보자로서 자바스크립트 기술을 연습하기 시작하는 좋은 방법이 될 수 있다. 게임 제작을 위한 프레임워크를 제공하는 수백 개의 자바스크립트 게임 엔진 이 있으며 대부분은 무료이며 오픈 소스이다. 인기 있는 게임 엔진으로 Backbone, DarlingJS 및 JawsJS 등이 있다.



<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2FCvbJylJCiqQvcaunMy0P%2Fmaxresdefault.jpg?alt=media&#x26;token=c8820a88-1e84-4cf9-89ba-e9bd934e1bc6" alt=""><figcaption><p>JS로 만들어 30억을 번 게임 </p></figcaption></figure>



개발자 과정을 공부하면서 단순히 코드를 따라서  치면 재미있을 수가 없다. 아래의 사이트에서 간단한 것들을 만들어보면서 JS와 친해져 보자!&#x20;



{% embed url="https://www.freecodecamp.org/korean/news/javascript-projects-for-beginners/#how-to-create-a-platformer-game" %}

{% hint style="info" %}
**GitBook tip:** you can embed public links, like a Typeform, to make data capture a breeze. Paste a URL below and try it out.
{% endhint %}
