[JavaScript] 생활코딩 자바스크립트 문법 한번에 훑기

자바스크립트는 웹브라우저 위에서 동작하는 언어이다. 따라서 웹프로그래밍을 하려고 하면 사실상 필수.

최근에는 node.js라는 서버측 자바스크립트가 각광받고 있다. 특히 DB의 경우, MongoDB와 같은 JavaScript친화적인 데이터베이스를 사용하면 클라이언트부터 서버, DB까지 전부 JavaScript 기반으로 구현 가능하다. 

JavaScript는 웹페이지를 동적으로 제어하기 위한 언어. 원래는 HTML이 한번 화면에 출력되면 변화를 줄 수 없는 정적인 페이지였기 때문에 이를 해결하기 위해 네스케이프에서 만들었다. 자바스크립트 표준안은 ECMAScript이다. 최근 HTML5가 성황하면서 지금까지 모바일 환경에서 구현했던 기능들이 웹에서도 가능하게 되었다.

▼ HTML5

W3C(World Wide Web Consortium : 웹표준 개발 및 장려하는 국제기구. CSS, DOM, HTML, XML 등의 표준을 제정함) 와 WHATWG에서 발표하는 HTML의 최신버전으로, 2014년에 표준화됨. 원래는 XHTML를 사용했다가 회귀한 셈. XHTML은 웹페이지 제작을 위해 사용되는 HTML4를 XML에 맞도록 재정의 한 것이다. XML의 응용버전이기 때문에 소문자 사용, 속성값 생략 불가 등 엄격한 문법을 가지고 있다. 원래 HTML4부터 CSS와 함께해서 웹페이지를 꾸밀 수 있게 되었는데 그것을 XHTML이 규격화하였고. 이를 간단하게 쓸 수 있게 문법의 엄격함을 줄인 것이 HTML5이다. 예를 들어 종료태그가 없는 것을 허용하고, 대소문자의 구분을 안하는 등이 있다. HTML5는DOCTYPE이 앞에 있어야하고, 다양한 정해진 태그들을 이용해서 화면을 디자인 할 수 있다. 

<변천사>

HTML → HTML2 → CSS 1 + JACASCRIPT → HTML 4 →CSS 2 →XHTML 1 →TABLELESS WEB DESIGN → AJAX → HTML 5

<HTML과 DOM의 차이>

DOM은 문서 객체 모델(The Document Object Model, DOM) 은 HTML, XML 문서의 프로그래밍 interface이다.

- 내가 작성한 HTML 코드 != DOM

- 페이지 view Source != DOM

- DevTools에서 보이는 코드 = DOM

즉, 내가 HTML로 화면을 찍어내기 위해 작성한 코드가 DOM이다. 그렇다면 DOM하고 HTML이 달라지는 경우는 언제일까? 바로 브라우저가 자동으로 내가 쓴 HTML 코드에 실수를 수정해준 경우, 그리고 내가 JavaScript를 이용해서 DOM을 조작하는 경우이다.(ex. .innerHTML를 이용해서 DOM에 내용을 추가하는 등) 즉, HTML이라는 규칙 속에서 JavaScript라는 언어를 브라우저가 읽고 어떤 작업을 가능하게 하며, DOM은 이 작업이 이루어지는 장소인 것. DOM은 브라우저에 의해 기록되는 모든 것이다.

-> 우리가 F12로 개발자 도구를 사용한 후 화면에 화살표로 그 코드를 찾는 것 자체가 DOM 위이다.

-> 그래서 자바스크립트를 개발할 때에는 그냥 크롬만 깔아도 쉽게 사용할 수 있다. 콘솔에 쓰면 그게 자바스크립트이다.

요즘은 다양한 모바일 프레임워크가 등장하며 모바일로 전부 제어가 가능하게 됨으로써 웹의 중요성이 커진다.(프레임워크 종류)

자바스크립트 연산자

Math.pow(3,2);       // 9,   3의 2승 
Math.round(10.6);    // 11,  10.6을 반올림
Math.ceil(10.2);     // 11,  10.2를 올림
Math.floor(10.6);    // 10,  10.6을 내림
Math.sqrt(9);        // 3,   3의 제곱근
Math.random();       // 0부터 1.0 사이의 랜덤한 숫자

문자열

	alert(typeof "1") //typeof는 값의 데이터형을 알려준다.
    alert('egoing\'s javascript') //'나 " 앞에 \를 붙이면 문자로 해석함
    alert("안녕하세요.\n생활코딩의 세계에 오신 것을 환영합니다"); //\n는 줄바꿈
    alert("coding everybody".length) //.length는 문자의 길이

변수 선언 : var

변수의 이름은 $, _, 혹은 특수 문자를 제외한 모든 문자로 시작할 수 있다.

JavaScript에서는 세미콜론을 생략할 수 있는데, 이 경우 줄바꿈을 명령의 끝으로 간주하게 된다.

같다?

alert(1=='1');              //true
alert(1==='1');             //false

정확하게 같을때만 ===를 쓴다. T/F로 결과가 나온다.

자바스크립트에서 false는 false , null , 0 , "" , undefined 총 5가지이다. 숫자 1만 있어도 true로 인식한다. (단, true ===1은 false다)

함수

function 함수명( [인자...[,인자]] ){
   코드
   return 반환값
}

함수의 핵심은 입력과 출력이다. 입력된 값을 연산해서 출력하는 것이 함수의 기본적인 역할이다. 다음은 함수에서 입력과 출력의 역할을 하는 구문들에 대한 설명이다.

함수 내에서 사용한 return은 return 뒤에 따라오는 값을 함수의 결과로 반환한다. 동시에 함수를 종료시킨다.

function get_member(){
    return 'egoing';
    return 'k8805';
    return 'sorialgi';
}
alert(get_member());

k8805와 sorialgi는 출력하지 않았다. 왜 그럴까? 그것은 return 'egoing'을 실행한 후에 함수가 종료되었기 때문이다. return 'k8805' 이하는 어떠한 경우도 실행되지 않는다.

인자 : 인자(argument)는 함수로 유입되는 입력 값을 의미하는데, 어떤 값을 인자로 전달하느냐에 따라서 함수가 반환하는 값이나 메소드의 동작방법을 다르게 할 수 있다.

function get_arguments(arg1, arg2){
    return arg1 + arg2
}
alert(get_arguments(10, 20));

모듈

프로그램은 작고 단순한 것에서 크고 복잡한 것으로 진화한다. 그 과정에서 코드의 재활용성을 높이고, 유지보수를 쉽게 할 수 있는 다양한 기법들이 사용된다. 그 중의 하나가 코드를 여러개의 파일로 분리하는 것이다. 이를 통해서 얻을 수 있는 효과는 아래와 같다.

• 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다.
• 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.
• 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다.
• 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
• 한번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽을 절약 할 수 있다. (브라우저에서만 해당)

모듈이란

순수한 자바스크립트에서는 모듈(module)이라는 개념이 분명하게 존재하지는 않는다. 하지만 자바스크립트가 구동되는 호스트 환경에 따라서 서로 다른 모듈화 방법이 제공되고 있다. 이 수업에서는 자바스크립트의 대표적인 호스트 환경인 웹브라우저에서 로직을 모듈화하는 방법에 대해서 알아볼 것이다.

▼호스트 환경이란?

호스트 환경이란 자바스크립트가 구동되는 환경을 의미한다. 자바스크립트는 브라우저를 위한 언어로 시작했지만, 더 이상 브라우저만을 위한 언어가 아니다. 예를들어 node.js는 서버 측에서 실행되는 자바스크립트다. 이 언어는 자바스크립트의 문법을 따르지만 이 언어가 구동되는 환경은 브라우저가 아니라 서버측 환경이다. 또 구글의 제품 위에서 돌아가는 Google Apps Script 역시 자바스크립트이지만 google apps script가 동작하는 환경은 구글 스프레드쉬트와 같은 구글의 제품 위이다. 여러분은 자바스크립트의 문법을 이용해서 PHP와 같은 서버 시스템을 제어(node.js)하거나 구글의 제품(Google Apps Script)을 제어 할 수 있다. 지금 당장은 어렵겠지만, 언어와 그 언어가 구동되는 환경에 대해서 구분해서 사고 할 수 있어야 한다. 이를 위해서는 다양한 언어를 접해봐야 한다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <script>
        function welcome(){
            return 'Hello world'
        }
        alert(welcome());
    </script>
</body>
</html>

모듈이 없다면 만약 welcome 함수를 자주 사용한다고 했을 때, 이런식으로 매번 선언하는 것은 낭비다. 이럴때는 이 함수를 모듈화를 하면 좋다.

<!-- main.html 변경 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <script src="greeting.js"></script>
</head>
<body>
    <script>
        alert(welcome());
    </script>
</body>
</html>

JavaScript와 HTML은 완전히 다른 문법을 가진 언어다. 그런데 HTML 문서 안에는 JavaScript와 HTML이 동시에 표현된다. 따라서 브라우저에게 어디서부터 어디까지가 JavaScript이고, HTML인지를 구분해서 알려줘야 한다. 이 역할을 하는 HTML 태그가 script 태그다. script 태그 안쪽에 위치하는 컨텐츠는 브라우저에 의해서 JavaScript로 인식된다.

그런데 위의 모듈화 한 코드는 컨텐츠 대신에 src 속성이 있다. 브라우저는 src 속성에 있는 파일을 다운로드해서 실행시킨다. greeting.js에는 함수 welcome가 정의되어 있기 때문에 main.html 안에 이 함수가 정의 되어 있지 않음에도 실행할 수 있는 것이다.

라이브러리는 모듈과 비슷한 개념이나, 모듈이 프로그램을 구성하는 작은 부품으로서의 로직을 의미한다면 라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합을 의미한다.  jQuery가 이에 해당한다.

자바스크립트의 핵심 도구는 함수다. 함수에 대한 이해가 있어야 객체를 이해할 수 있다.

함수에서 유효범위는 전역변수인지, 지역변수인지에 따라 다르다.

함수 밖에서 변수를 선언하면 그 변수는 전역변수가 된다. 전역변수는 에플리케이션 전역에서 접근이 가능한 변수다. 다시 말해서 어떤 함수 안에서도 그 변수에 접근 할 수 있다. 지역변수의 유효범위는 함수 안이고, 전역변수의 유효범위는 에플리케이션 전역인데, 같은 이름의 지역변수와 전역변수가 동시에 정의되어 있다면 지역변수가 우선한다. 자바스크립트의 지역변수는 함수에서만 유효하다.

var vscope = 'global';
function fscope(){
    vscope = 'local';
    alert('함수안'+vscope);
}
fscope();
alert('함수밖'+vscope);

함수밖에서도 vscope의 값이 local인 이유는 무엇일까? 그것은 함수 fscope의 지역변수를 선언할 때 var를 사용하지 않았기 때문이다. var를 사용하지 않은 지역변수는 전역변수가 된다. 따라서 3행은 전역변수의 값을 local로 변경하게 된 것이다. var을 쓰는 것과 쓰지 않는 것의 차이를 이해해야 한다.

전역변수는 사용하지 않는 것이 좋다. 여러가지 이유로 그 값이 변경될 수 있기 때문이다. 함수 안에서 전역변수를 사용하고 있는데, 누군가에 의해서 전역변수의 값이 달라졌다면 어떻게 될까? 함수의 동작도 달라지게 된다. 이것은 버그의 원인이 된다. 또한 함수를 다른 에플리케이션에 이식하는데도 어려움을 초래한다. 함수의 핵심은 로직의 재활용이라는 점을 상기하자. 변수를 선언할 때는 꼭 var을 붙이는 것을 습관화해야 한다. 전역변수를 사용해야 하는 경우라면 그것을 사용하는 이유를 명확히 알고 있을 때 사용하도록 하자.

값으로서의 함수

자바스크립트는 함수 자체가 객체가 될 수 있다. 즉, 자체가 값이다. 따라서 변수에 함수를 할당할 수 있다.

a = {
    b:function(){
    }
};

함수는 값이기 때문에 다른 함수의 인자로 전달 될수도 있다.

function cal(func, num){
    return func(num)
}
function increase(num){
    return num+1
}
function decrease(num){
    return num-1
}
alert(cal(increase, 1));
alert(cal(decrease, 1));

10행을 실행하면 함수 increase와 값 1이 함수 cal의 인자로 전달된다. 함수 cal은 첫번째 인자로 전달된 increase를 실행하는데 이 때 두번째 인자의 값이 1을 인자로 전달한다. 함수 increase은 계산된 결과를 리턴하고 cal은 다시 그 값을 리턴한다.

비동기처리

자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다.

비동기 처리의 가장 흔한 사례는 제이쿼리의 ajax입니다. 제이쿼리로 실제 웹 서비스를 개발할 때 ajax 통신을 빼놓을 수가 없습니다. 보통 화면에 표시할 이미지나 데이터를 서버에서 불러와 표시해야 하는데 이때 ajax 통신으로 해당 데이터를 서버로부터 가져올 수 있기 때문입니다.(참고 블로그)

이러한 비동기 처리 방식의 문제점을 해결하기 위함이 바로 callback 함수이다.(콜백지옥이란?)

클로저 / arguments

 

객체지향 프로그래밍

연관된 메소드와 그 메소드가 사용하는 변수들을 분류하고 그룹핑하는 것.

부품화(객체지향)의 목표는 단순한 그룹핑으로 끝나는 것이 아니라 그것이 어떻게 만들어졌는지 모르는 사람들도 그 부품을 사용하는 방법만 알면 사용할 수 있어야 한다. 모니터가 어떻게 동작하는지는 몰라도 본체에 연결만 할 줄 알면 사용할 수 있는 것처럼 말이다. 모니터는 내부는 단단한 껍질에 숨기고 연결부분만 노출이 되어있다. 이러한 컨셉을 정보의 은닉화 또는 캡슐화라고 부른다. 즉, 사용방법이 중요한 것. 또한 이러한 부품들은 서로 교환이 되어야 한다. 즉 한 컴퓨터에 여러 모니터가 호환되는 것인데, 이것은 연결 케이블인 HDMI가 규격 표준화 되어있기 때문이다. 컴퓨터와 모니터를 만드는 업체들은 위와 같은 케이블의 규격을 공유한다. 모니터 입장에서는 컴퓨터가, 컴퓨터 입장에서는 모니터가 어떤 식으로 만들어졌는지는 신경쓰지 않는다. 각각의 부품은 미리 정해진 약속에 따라서 신호를 입, 출력하고, 연결점의 모양을 표준에 맞게 만들면 된다. 이러한 연결점을 인터페이스(interface)라고 한다.

객체에는 서로 연관된 변수와 함수가 있다. 여기서 변수를 프로퍼티, 함수를 메소드라고 부른다. 생성자는 객체를 만드는 역할을 하는 함수이다. 함수를 호출할 때 new를 붙이면 새로운 객체를 만든 후에 이를 리턴한다. 즉, 새로운 역할을 부여받고 부품화된 함수를 객체화 할 때에는 new라는 생성자가 필요하며, 함수가 곧 객체가 된다. 이를 새로운 변수에 담아주는 방식이 생성자이다.

생성자 함수는 일반함수와 구분하기 위해서 첫글자를 대문자로 표시한다.

전역객체

전역변수와 지역변수가 있던 것처럼, new로 선언된 함수, 즉 객체에도 종류가 있다. 가장 위에 있는 객체를 "전역객체"라고 부르며, 모든 객체는 이 전역객체의 프로퍼티이다. 하지만 이것조차도 ECMAScript 표준화의 가장 상단에 있는 객체로서의 이름이고, 자바스크립트는 웹브라우저 안에서 움직이기 때문에 이 모든 것의 객체인 Window 객체 안에 있다. Window 객체는 모든 객체가 소속된 객체이고, 전역객체이면서, 창이나 프레임을 의미한다. 따라서 객체를 선언할 때 식별자를 쓰지 않으면 window 객체의 프로퍼티로 간주된다.

this는 쉽게 말해 window이다. 하지만 객체의 메서드 안에 들어가면 this는 객체를 가르킨다. 즉, 가리키는 대상이 달라지는데 함수와 객체가 구분이 모호한 자바스크립트에서 this는 이 둘을 연결해주는 연결점 역할을 한다.

상속

상속은 부모의 기능을 계승하고 발전시킬 수 있다. prototype은 말 그대로 객체의 원형이다. 함수는 객체다. 그러므로 생성자로 사용될 함수도 객체다. 객체는 프로퍼티를 가질 수 있는데, 생성자로 사용될 함수의 특수 프로퍼티의 이름을 prototype이라고 부른다. prototype는 다른 객체로부터 메소드나 프로퍼티를 상속(복제)받아오는 개념이다. 쉽게 말하면 자바스크립트에는 class가 없기 때문에 prototype을 기반으로 상속의 기능을 만든 것이다. 따라서 new와 함수를 통해서 클래스와 같은 객체를 만들 수 있는 것이다. 우리는 가장 상단에 있는 window 객체처럼 빈 object 어딘가에 방금 생성한 객체를 넣어놓고 서로 다른 부모객체와 자식객체가 그것을 공유해서 갖다쓴다고 생각하면 된다. 이러면 결론적으로 class의 상속과 동일한 역할을 하는 것이니까.

[Javascript ] 프로토타입 이해하기

Object 객체는 객체의 가장 기본적인 형태를 가지고 있는 객체이다. 다시 말해서 아무것도 상속받지 않는 순수한 객체다. 자바스크립트에서는 값을 저장하는 기본적인 단위로 Object를 사용한다.  Object 객체는 확장하지 않는 것이 바람직하다. 왜냐하면 모든 객체에 영향을 주기 때문이다. 

데이터타입

원시 데이터타입: 숫자/문자열/불리언(true/false)/null/undefined
객체(참조) 데이터타입: 나머지
'str.lenght'와 같이, 원시 데이터를 객체 데이터로 활용할 경우 잠시동안 자바스크립트가 객체로 만들고 사용이 끝나면 제거해 다시 원시 데이터만 남는다. 이때 사용하는 객체가 '레퍼객체'이다.

var str = 'coding';
str.prop = 'everybody';
console.log(str.prop);      // undefined ->이미 내부적으로 String 객체가 만들어져 있기 때문에 prop는 안들어감

"참조(reference)"라는 개념이 중요하다. 원본을 복사한 것이 아닌 심볼릭 링크에 저장된 원본의 주소를 참조해서 원본의 위치를 알아내고 그 내용을 참조한다는 개념이다. 이러한 방식은 메모리 용량을 절약할 수 있고, 원본 파일을 사용하는 모든 복제본이 동일한 내용을 유지할 수 있다. 우리가 사용하는 라이브러리도 일종의 "참조"인 것.

모든 객체는 참조데이터이다. 그 데이터의 값을 객체가 가지고 있는 것이 아닌, 그 주소값만을 담고 있고 그것을 꺼낼 때 참조하는 것.