Javascript의 장, 단점
Javascript를 사용하고 있었지만 다른 사람이 Javascript이 뭐야? 하고 물어보면 쉽게 대답하지 못한다는 것을 깨닫고
이번 기회에 한번 제대로 알아보려고 글을 작성해봅니다.
< Javascript는 무엇인가? >
미국의 넷스케이프에서 만들어진 언어로 객체 기반의 스크립트 프로그래밍언어 (객체지향 언어) 입니다.
웹 페이지를 만드는 html의 script이 하는 역활을 따로 빼서 할 수 있게 만든 것입니다.
이름의 자바가 들어가 처음 들어보면 자바와 비슷한 언어라 느껴질 수 있지만 자바와는 다른 언어 입니다.
그러면 객체 지향 언어는 무엇인가요?
객체 지향은 프로그램을 객체 단위로 나누어서 이 객체들이 서로 상호작용하는 것을 말합니다.
객체에 종류에는 js에 내장 객체 , 브라우저 내장 객체 , 사용자 정의 객체가 존재한다.
객체의 속성을 상속받는 방식으로는 class와 prototype으로 나누어 지는데 js같은 경우는 prototype을 기반으로한 객체 지향 언어입니다. 처음에는 오직 prototype을 이용해서 상속을 하였다고 합니다.
[ ec6에서 class가 추가 되어 class를 사용하여 상속을 할 수 있게 되었다. 하지만 그런다고 js가 class기반의 객체 지향이 된 것은 아닙니다.]
< Javascrpt의 특징 >
1. 스크립트 언어
HTML에서 삽입되어 사용되며 웹페이지를 다이나믹하게 만들 수 있습니다.
밑의 코드는 id가 cleanButt이라는 버튼을 눌렀을 때 chats라는 id를 가진 태그의 밑의 적힌 내용을 지우는 예제입니다.
이러하게 사용자가 행동을 하면 그 행동에 맞게 웹 페이지를 변경 시키는 것을 다이나믹한 웹 페이지라고 합니다.
//html
<html>
<head>
<title>button</title>
</head>
<body>
<p><button id="cleanButt"> CLEAR!</button></p>
<div id="chats">
실험 중..
</div>
<script rc="scripts/app.js"></script>
</body>
</html>
//scripts/app.js
var cleanButt = document.querySelector("#cleanButt");
var viewChats;
cleanButt.addEventListener("click", app.clearMessages);
const app = {
clearMessages: function () {
viewChats = document.querySelector("#chats");
viewChats.innerHTML = "";
//여기는 chats들을 지워주는 함수
}
}2. 동적 언어
this나 변수, 스코프 등이 코드가 실행 되면서 변할 수 있습니다. this 같은 경우에는 this가 가르키게 되는 곳이 코드를 진행하다가 변경이될 수 있고 변수의 타입 같은 경우에도 타입이 number였는데 string으로 변할 수 있습니다. 밑의 예제와 같이 number와 string을 + 하면서 타입이 string으로 변경되는 것과 같은 모습을 보면 알 수 있습니다. 그 외에도 스코프도 코드 진행을 하며 변경이 될 수 있습니다.
let num = 3;
let str = "hi";
console.log( "number + string " , num+str); // "number + string : " 3hi
console.log( "type number + string " , typeof (num+str)); // "type number + string : " string
let num2 = 1;
console.log( "number + number2 " , num+num2); // "number + number2 : " 4
console.log( "type number + string " , typeof (num+num2)); // "type number + number2 : " number
3. 객체 기반 언어 [prototype]
맨 처음에도 나왔던 말이지만 자바스크립트는 객체 기반의 언어 입니다. 객체기반의 언어는 java나 c++도 있지만 그 와는 다른 prototype을 사용한 상속을 하는 객체 기반 언어입니다. 밑에는 prototype을 이용한 상속 예제 입니다.
let test = function () {
this.one = 1;
this.two = 2;
}
let newTest = new test();
test.prototype.two =3;
test.prototype.four = 4;
console.log(newTest.one);// 1
console.log(newTest.two);// 2
// test에 존재했던 동일한 이름의 two에 의해 가려져 있다.
console.log(newTest.four);// 4
//처음에는 newTest.four를 찾다가 없으면
//다음에는 newTest.prototype.four를 찾아 나오게 한다.
console.log(newTest.five);//undefined< Javascript가 쓰이는 곳 >
[Front-End]
JQuery : 존 레닉이란 분이 만든 가벼운 자바스크립트 라이브러리 입니다. HTML, CSS, Animation을 손쉽게 다룰 수 있다는 특징이 있습니다.
꾸준한 인기를 누리고 있습니다.
React : facebook에서 만든 보여지는 부분(View)만을 위한 js UI 컴포넌트 라이브러리 입니다. 대표적으로 데이터 흐름이 단방향이란 특징과 JSX문법을 사용한다는 특징이 있습니다.
Vue : evan you에 의해서 만들어진 자바스크립트 프레임워크입니다. Angular의 단점을 보완하고 React와 비슷한점이 많다는 특징을 가지고 있습니다.
[Back-End]
nodejs : 2009년 Ryan Dahl에 의해 만들어진 구글 크롬의 V8엔진을 기반으로 만든 서버 사이드 플랫폼 입니다. 여러가지 라이브러리(express, socket.io)를 지원해주고 가장 대중적으로 쓰입니다.
초반에는 자바스크립트로는 서버를 구현 할 수 없었습니다. 그래서 전에는 java, PHP 등을 이용하여 서버의 코드를 작성하였지만 이제는 node.js를 이용하여 자바스크립트로 서버를 구현 할 수 있습니다.
<Javascript의 장 단점>
장점
html안에서 바로 script 태그안에서 코드를 작성 할 수 있기 때문에 개발 속도가 빠릅니다. 또한 컴파일 과정이 필요 없기 때문에 즉시 실행이 가능하고 디버깅도 간편 합니다.
초보자들도 배우는 것도 빠르고 쉽게 배울 수 있습니다.
마지막으로 많이 사용하는 언어 중 하나 입니다. 많이 사용하고 있다는 것은 이 쪽 생태계과 활발하다는 것을 의미하기도 합니다.
(2019년에 RedMonk에서 많이 쓰이는 언어 1위는 javascript 라고 지정 되었습니다.)
RedMonk : https://redmonk.com/sogrady/2019/07/18/language-rankings-6-19/
The RedMonk Programming Language Rankings: June 2019
This iteration of the RedMonk Programming Language Rankings is brought to you by YLD. YLD is behind many of the products and services you use every day. We create cutting edge technology and design capabilities that last beyond us. We’re experts in open so
redmonk.com
단점
웹 상에서 바로 코드를 볼 수 있기 때문에 보안적으로 문제가 생길 수 있습니다. 내부 상에 제공하는 기능이 제한 적이고 개발도구도 적은 편에 속합니다.
공식 사이트 : https://developer.mozilla.org/ko/docs/Web/JavaScript/About