DalkomIT

Angular2 특징 및 소개

양디 — Tue, 25 Oct 2016 16:13:59 +0900

Angular2 가 나온지 벌써 꽤나 긴 시간이 지났습니다.

최초에 이 프레임워크에 관심이 있어 관련 포스팅을 했었는데, 이미 구 버전이 되어버린지라 새롭게 포스팅을 시작하려고 합니다.

이전 포스팅들은 다음 주소에서 확인할 수 있습니다.

http://dalkomit.com/category/Old/old-Angularjs2

공식 홈페이지의 주소는 다음과 같습니다.

https://angular.io/

Angularjs 2 는 무엇이며, 왜 사람들이 배우려고 하는 것인지에부터 차근차근 알아보려 합니다.

강좌 형식이지만, 정확히는 제 공부 내용을 정리하는 것입니다 ! 부족한 부분은 댓글로 달아주시면 찾아보도록 하겠습니다.

Angular 2 는 무엇인가?

위의 Angular2 메인 사진에 보면 알 수 있듯이, One framework라고 나와 있습니다.

프레임워크란 무엇인가에 대해 알아보자면, 랄프 존슨 교수는 이렇게 말했습니다.

"소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태로 클래스들을 제공하는 것"

Ralph Johnson

위의 정의에 맞게, Angular2는 웹 프론트엔드 개발을 위하여 제작된 모듈들로 구성되어 있으며, 이를 사용해서 보다 쉽게 재사용이 가능하며, 협업이 가능합니다.

프레임워크의 장점으로, 틀이 정해져 있기 때문에 사람들이 함께 일할 때에 강력한 편의성을 제공합니다.

Angular2는 MVC 패턴을 기반으로 한 프론트엔드 프레임워크입니다.

MVC 패턴은 다음과 같이 이루어져 있습니다.

사진 출처: https://basicsofwebdevelopment.files.wordpress.com/2015/01/mvc_role_diagram.png

위의 사진을 보면, Model, View, Controller 의 세 부분이 존재하고, User가 Controller와 View에 접근하는 것을 볼 수 있습니다.

관련 정보는 추후 포스팅할 계획입니다.

Angular2 에서는, MVC의 모든 부분들을 다루고 있습니다.

사용자가 화면에 보는 웹 브라우저상의 View와,

내부에 객체들 정보인 Controller와

이를 통해 서버와 통신하고, 데이터를 관리하는 Model의 기능을 모두 수행합니다.

구글이 만들었고, 굉장히 많은 관심을 받고 있는데, 이 관심은 다음과 같은 특징들에서 비롯합니다.

Angular2 특징

Angular2의 정식 홈페이지에서 제공하는 Angular2의 강점들은 다음과 같습니다.

정식 홈페이지에서 보기 (영어)

Cross Platform에 강합니다.

크로스 플랫폼이란, 다양한 디바이스 및 실행 환경을 제공한다는 것입니다.

첫째로, 웹 앱 환경을 제공합니다. Angular2는 Single Page Application(SPA)을 위한 프레임워크이기 때문에, 그 목적에 맞게 웹앱을 제공합니다. 높은 성능과, 설치가 필요없는 다양한 기능들을 가진 웹앱을 만들 수 있습니다.
둘째로, Native App을 만들기에 편합니다. Ionic2 , React Native 등의 다른 프레임워크와 결합하여 모바일 어플리케이션을 쉽게 제작할 수 있습니다.
셋째로, 모바일 뿐만 아니라 데스크탑 환경에도 강합니다. Angular2는 OS의 API에 접근하는 기능 또한 가지고 있습니다.

Angular2 으로 잘 설계되고 구현한 어플리케이션 하나로, MAC, Windows, Android 등 다양한 플랫폼에서 작동이 가능한 어플리케이션을 제작할 수 있습니다.

Angular2는 데이터를 양방향으로 바인딩합니다.

https://docs.angularjs.org/img/Two_Way_Data_Binding.png

어플리케이션에서 사용하는 데이터를 양방향으로 바인딩한다는 것은,

1방향 : 내부의 데이터가 바뀌는 것을 View에서 바로 확인할 수 있다는 것이며,

2방향: 각종 Form들을 통하여(Controller) 내부의 데이터를 바꿀 수 있다는 것입니다.

위의 움짤을 보시면, input을 통해 집어넣는 정보에 따라 위의 view가 바로 바뀌는 것을 볼 수 있습니다.

input의 변경 -> 내부 데이터 변경 -> view의 변경 으로 데이터가 움직이는 것입니다.

실제로 환경을 세팅하고, 다양한 기능을 직접 사용해보도록 하겠습니다.

Clean Code - 1. 의미 있는 이름 짓기

양디 — Tue, 25 Oct 2016 11:59:08 +0900

이름 짓기의 중요성

코딩을 하다 보면 이름 짓기에 꽤나 많은 시간을 들이게 된다. 변수명, 함수명, 클래스 이름 등등...

다양한 속성들이 존재하는데, 각각의 것들은 이름으로 그 기능을 알 수 있는 것이 좋다.

개발 작업은 특별한 경우를 제외하고는 1인이 아닌 다수의 개발자가 팀을 이뤄 프로젝트를 진행한다.

자신이 만든 코드를 자신만 보는 경우는 드물고, 코드 리뷰를 통하여 함께 코드를 개선시키고 프로젝트를 진행시켜 간다.

따라서, 자신이 시간이 아주 많고, 할 일이 너무 없어서 자신이 짠 코드들을 일일이 다 설명해 주고 싶다면 코드를 자신만 이해할 수 있는 방법으로 프로그래밍 해도 좋다.

하지만, 그렇지 않기에 코드 그 자체를 보고 다른 사람이 이해할 수 있도록 짜주는 것이 바람직하다.

그럼 다양한 이름들을, 어떻게 짓는 것이 좋을까 ? 하는 의문이 든다.

다양한 언어에는 다양한 리터럴이 있지만, 그 제한이 대부분 강하지 않다.

변수를 i로 선언해도 좋고, o로 선언해도 똑같이 작동한다.

따라서, 정형화되고 강제적인 규칙은 없으나, 객관적으로 이해하기 쉬운 방식을 고민해 볼 필요가 있다.

의도가 드러나는 이름

이름은 그 이름이 쓰이는 의도가 분명하게 드러나는 것이 좋다.

이렇게 말하면, 그건 당연한 것이 아닌가 ? 싶지만 실제로는 잘 지켜지지 않는 경우가 많다.

또한, 주석으로 변수, 함수, 클래스 를 설명해야 한다면, 이름이 잘 지어지지 않은 경우가 대부분일 것이다.

예를 들어, 이번 삼성 SW 역량 테스트에는 지네 게임이 나왔었다.

지네가 움직일 수 있는 방향은 동,서,남,북의 4개 방향이다.

이를 코드로 짰을때, 다음과 같은 코드라면 다른 사람이 이해하기 쉬울까 ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
a.d = 3; // a는 지네, d는 방향
 
switch(a.d){
    case 1: 
        mve(); // 동쪽으로 이동한다.
        break;
    case 2:
        mvw(); // 서쪽으로 이동한다.
        break;
    case 3:        // 남쪽으로 이동한다.
        mvs();
        break;
    case 4:        // 북쪽으로 이동한다.
        mvn();
        break;
}
cs

위와 같은 코드는, 극단적인 표현이긴 하지만 실제로 이렇게 코딩하는 사람들도 있다.

의미 없는 변수의 이름과, 의미 없는 함수의 이름으로 인해 주석이 없다면 본인만 이해할 수 있는 코드가 된다.(나중엔 본인도 까먹는다.)

이를 다음과 같이 짜면 어떨까?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
centipede.direction = WEST;
 
switch(centipede.direction){
    case EAST: 
        moveEast(); 
        break;
    case WEST:
        moveWest(); 
        break;
    case SOUTH:        
        moveSouth();
        break;
    case NORTH:        
        moveNorth();
        break;
}
cs

어떤가? 주석이 없어도, 분명히 이해할 수 있는 코드가 되었다.

작성자 뿐만 아니라 다른 사람이 보더라도 쉽게 이해할 수 있는 코드가 된 것이다.

위와 같이, 이름은 의도를 분명하게 드러내야 한다.

맥락을 생각하라.

변수명, 클래스명, 함수명을 지을 때에는 단순하게 그 대상만을 고려해서는 안된다.

전체적인 맥락을 고려해서 짓는 것이 좋다.

예를 들어, 위의 지네의 경우에는 머리와, 몸통, 꼬리의 위치를 가리키는 변수가 있다고 하자.

이를 C 언어의 구조체를 사용해서 짰을 경우, 다음과 같은 코드는 어떤가 ?

1
2
3
4
5
typedef struct Centipede{
    int *centipedesHead;
    int *centipedesBody;
    int *centipedesTail;
}Centipede;
cs

물론, 나쁘지 않다. 하지만, 굳이 이렇게 짤 필요가 있었을까?

머리, 몸, 꼬리의 포인터는 이미 Centipede라는 구조체 내부에 선언되어 있다는 것이 명백하다.

따라서, 의도를 정확하게 해 준 것은 좋았지만, 불필요한 행동이었다는 점에서 개선될 여지가 존재한다.

1
2
3
4
5
typedef struct Centipede{
    int *head;
    int *body;
    int *tail;
}Centipede;
cs

이렇게만 짜줘도, 머리 몸통 꼬리가 지네에 속해있다는 것은 분명하게 보인다.

좋은 이름의 판단 기준들

이름은 구체적으로 명확하게 판단 기준이 존재하지 않는다.

이 이름은, 아, 10점 만점에 6점이야 ! 하는 기준이 없기 때문에, 기준 또한 주관적이며 모호하다.

따라서, 모든 사람들의 주관에 이해될 수 있을 법한 이름을 짓는 것이 좋다.

첫째, 이름은 기억하기 쉬워야 한다.

기억하기 쉬운 이름은 어떤 이름인가에 대해 생각해 보자면,

첫째로 발음하기 쉬우며,

둘째로 이미 알고 있는 단어이며,

셋째로 단어의 의미와 기능이 실제로 동일한 것이다.

첫째와 둘째를 결합해보자면, 예를 들어 한국인이 코딩을 한다고 생각해보자. 그리고, 그 코드를 미국인이 본다고 가정했을때, 다음과 같은 것은 어떤가?

1
char *hangeul;
cs

물론 한글은 이미 세계적으로도 과학적으로도 입증된 최고의 언어 중 하나이지만, 미국인이 한글을 모를 때 이 변수를 기억할 수 있을까?

첫째로 발음조차 할 수 없는 단어이다. 행게울? 행굴 ? 혼란스러워 하는 도중에 이미 기억에서 사라져 있을지도 모른다.

둘째로, 단어가 무슨 의미인지를 모른다.

따라서, 객관적으로 이해하기 쉬운 단어를 사용하는 것이 좋을 것이다.

둘째, 자신의 센스를 이름에 부여하지 않는 것이 좋다.

여기에서 센스는 다양한 센스를 뜻한다.

유머 센스 또한 적용된다.

예를 들어, 화면을 지우는 함수를 만들 때에

clearView() 함수는 누구나 명확하게 이해할 수 있다.

nuclearBomb() 함수를, 핵폭탄처럼 화면을 깨끗하게 지우는 뜻으로 쓸거야 ! 라고 지었다면..

이는 지나치게 주관적인 센스가 개입되었다. 좋지 않다.

셋째, 한 개념에 한 단어를 사용하자.

예를 들어, add라는 함수를 만들었다.

add(a, b)는 a와 b를 더하는 함수로 사용했다면,

list.add(a)는 사용하지 않는 것이 좋다. 이 함수는 list에 a 노드를 집어 넣어주는 것이기 때문이다.

실제로 덧셈을 할 경우에만 add 개념을 사용하고, 뒤의 경우에는 insert를 사용해주는 것이 바람직하다.

또, accountList 라는 변수가 있다면, 프로그래머는 이 변수를 보고 Linked List를 생각하게 될 것이다.

만약 단순하게 목록이나 다수의 account를 생각했다면, accounts 또는 accountGroup으로 짓는 것이 좋다.

list나 arr 등 프로그래머에게 다른 의미를 떠오르게 할만한 것은 조심해서 사용하는 것이 좋다.

따라서, 개념에 따라 일관성 있게 코딩하자 !

그 외에 변수는 소문자로 시작, 클래스는 대문자로 시작한다는 규칙이나

변수와 클래스는 명사, 메서드나 함수는 동사로 짓는다는 규칙 등이 있다.

또, 단순하게 일회성으로 사용하는 변수들은 사용하기 편하게 i , j, k 등으로 임시적으로 사용해도 이해할 수 있다.

그러나, 넓은 유효 범위를 지닌 객체들은 그에 마땅한 이름을 지어주자.

누구나 보기 쉽고 이해하기 쉬운 코드를 지향하자 !

자바스크립트 강좌 - 7. 스코프(Scope)와 클로저(Closure)

양디 — Mon, 24 Oct 2016 13:26:06 +0900

자바스크립트의 특별한 성질인, 클로저(Closure)가 드디어 나왔습니다. 클로저는 자바스크립트에서 많은 역할을 수행하며, 함수가 객체라는 성질과 객체의 유효 범위(스코프) 성질 덕분에 사용 가능합니다.

그렇다면, 유효 범위(Scope)가 무엇인지부터 알아봅시다.

객체의 유효 범위(Scope) ?

객체의 유효 범위란, 선언된 객체가 참조될 수 있는 범위를 의미합니다.

컴퓨터는 유한한 자원(저장 공간)을 지닌 물리적 매체이기 때문에, 모든 객체를 영원히 저장하는 것은 낭비입니다.

따라서 모든 프로그래밍 언어는 메모리를 효율적으로 사용하기 위하여 유효 범위를 가지고 있습니다.

일반적으로 C 프로그래밍으로부터 나온 언어들은 블록 스코프를 갖고 있습니다.

따라서, C의 경우에는 다음과 같은 상황이 있을 수 있습니다.

1
2
3
4
5
6
7
8
int a = 5;
 
{
    int a = 10;
    printf("%d\n", a); // 10을 출력합니다.
}
 
printf("%d\n", a); // 5를 출력합니다.
cs

C 기반 언어에서의 변수는 블록(중괄호 범위 내부 { } ) 유효범위를 갖기 때문에, 위의 3~6 내부 블럭에서의 a는 1번 코드의 a가 아니라 4번 코드의 a를 의미합니다.

반면에, 자바스크립트는 블럭 스코프를 갖고 있지 않습니다.

위와 같은 코드를 자바스크립트로 실행해봅시다.

1
2
3
4
5
6
7
8
var a = 5;
 
{
    var a = 10;
    console.log(a);
}
 
console.log(a);
cs

Repl.it에서 실행한 결과, 둘 다 10을 출력하는 것을 볼 수 있습니다.

이는 유효 범위가 블럭이 아니기 때문에 일어나는 일이며, C 기반 언어들에 익숙한 프로그래머가 자바스크립트 코딩을 할 때에 흔히 혼란스러워 하고 버그를 발생시키는 원인이 됩니다.

자바스크립트에서 유효 범위는 함수 유효범위를 가집니다. (중요!)

따라서, 위의 C 코드와 같은 값을 출력하기 위해서는 다음과 같은 코드를 작성하여야 합니다.

1
2
3
4
5
6
7
8
var a = 5;
 
var foo = function(){
    var a = 10;
    console.log(a);
}
foo();
console.log(a);
cs

foo라는 함수 내부에 선언된 a는, 함수를 벗어나면 유효 범위에서 벗어나기 때문에 효력을 상실합니다.

따라서 5번 코드는 10을 출력하고, 8번 코드는 5를 출력하게 됩니다.

(블럭 유효범위를 위하여 ECMAScript 6에서는 let 개념을 도입하였으나, 이는 추후 포스팅에서 참고하도록 하겠습니다.)

이러한 점 때문에, 클로저가 생겼고 유용하게 사용되고 있습니다.

클로저(Closure)란 무엇인가?

프로그래밍을 할 때에, 전역변수를 많이 사용하는 것은 좋지 않은 습관입니다.

컴파일 언어일 경우에는, 전역변수는 프로그램의 크기를 키우는데 역할을 하며, 효율적인 변수 활용에 방해가 될 수 있습니다.

자바스크립트 또한 전역변수의 사용을 지양하여야 하는데, 일반적인 함수 언어와 다르게 유효 범위가 함수 스코프이기 때문에 다른 방식으로 지양하고 있습니다.

클로저란, 변수를 지닌 함수를 의미합니다.

1
2
3
4
5
6
7
8
9
10
function closure() {
  var name = "yangd";
  function introduce() {
    console.log("Hi, I'm "+ name);
  }
  return introduce;
}
 
var myFunc = closure();
myFunc();
cs

위의 closure() 함수를 보면, 내부에 name이라는 문자열 객체를 지니고 있고, introduce라는 함수 객체를 지니고 있습니다.

이 함수 객체를 리턴해주는 것이 closure 객체의 역할입니다.

9번 코드의 myFunc = closure(); 코드를 통하여, myFunc는 introduce를 실행시킬 수 있는 함수 객체가 되는데, 이 introduce는 closure 함수 객체의 일부이기 때문에, 함수 내부의 name을 유지시키게 됩니다. (복잡합니다....)

따라서 위의 함수를 실행하면, Hi, I'm yangd 가 출력되게 됩니다.

이를 사용하여, 객체 지향 언어의 3대 속성 중에 하나인 캡슐화(Encapsulation)을 구현할 수 있습니다.

다음과 같은 코드를 활용해 봅시다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function blogger() {
  var name = "yangd";
  return {
      getName: function(){
          return name;
      },
      setName: function(newName){
          name = newName;
      },
      introduce: function(){
          console.log("Hi, I'm "+ name);
      }
  }
}
 
var a = blogger();
 
console.log("a is "+ a.getName());
a.setName('newYangd');
a.introduce();
cs

blogger는 클로저로 활용됩니다.

내부 객체로 name이라는 문자열 객체가 있고, 반환하는 것은 객체인데, getName, setName, introduce의 3개의 함수 객체를 속성으로 지닌 객체를 반환하게 됩니다.

위의 코드를 실행하면 우측과 같은 실행 결과가 나오게 됩니다.

a는 클로저를 활용한 객체가 되고, a 내부의 name에 접근하기 위해서는 getName, setName, introduce의 함수를 통해서만 접근할 수 있게 됩니다.

따라서, 다른 언어의 private 기능을 클로저를 통해 사용할 수 있게 됩니다.

그러나 이 방식에는 단점이 존재하는데, blogger라는 객체를 생성할 때 마다, getName, setName, introduce라는 함수 객체를 함께 생성하기 때문입니다.

따라서, 여러 blogger를 만들 경우에 각각의 blogger 객체들은 서로 다른 함수 객체들을 가지고 있습니다.

이는 메모리를 효율적으로 사용하지 못하는 방식이기 때문에, prototype을 사용하게 됩니다. (이는 다음 포스트에!)

한가지 더 해보자면, 다음과 같은 코드를 실행해봅시다.

1
2
3
for(var i = 0;i< 10;i++){
    setTimeout(function(){console.log(i)}, 0);
}
Colored by Color Scripter
cs

자바스크립트에는 setTimeout이라는 타이머 함수가 존재하는데, 위의 코드의 경우에는, 함수가 실행되면 0초 후에(즉시) i를 출력하라는 함수입니다.

i를 증가시키면서 console.log로 출력하기 때문에, 0,1,2,3,4,5,6,7,8,9가 출력될 것 같지만 결과는 10을 10번 출력하게 됩니다.

이는 Timeout이 for문이 다 돌아간 이후에 실행되기 때문인데, 이 때의 i는 마지막 for 반복이 끝난 10을 저장하고 있게 됩니다.

따라서 10을 10번 반복하는 함수가 될 뿐입니다.

이를 해결하기 위해서는, setTimeout이 부르는 함수를 클로저화 시켜서 실행시켜줘야 합니다. 다음 코드를 봅시다.

1
2
3
4
5
for(var i = 0;i< 10;i++){
    setTimeout(function(i){
        console.log(i);
    }(i), 0);
}
cs

이는 익명함수와 클로저를 합쳐서 사용한 코드인데, 이번에 setTimeout이 부르는 함수는 단순히 console.log(i)를 출력하는 함수가 아니라, i를 입력받아서 내부 객체에 저장하고 , 이를 출력하는 함수입니다. 따라서 각각의 함수의 i는 외부에서 부른 i가 아니라 함수 내부에 저장된 i가 되고, 이는 4번째 라인에서 (i)를 통하여 입력받게 됩니다.

따라서 이 함수는 0,1,2,3,4,5,6,7,8,9 의 원하는 출력값을 보여주게 됩니다.

함수 스코프를 잘 이해한다면, 클로저도 어려운 개념이 아닙니다 !

자바스크립트 강좌 - 6. 함수(Function)

양디 — Mon, 24 Oct 2016 12:16:41 +0900

자바스크립트 에서, 그리고 다른 프로그래밍 언어에서도 항상 중요한 함수에 관한 내용입니다. 자바스크립트 의 강점 중에 하나는, 함수가 객체로 활용된다는 것이고, 이 객체를 통하여 여러가지 속성들을 사용할 수 있다는 것입니다. 함수를 통하여 다양한 기능들을 모듈화 합니다.

함수란 무엇인가 ?

먼저, 함수란 특정한 기능을 수행하는 코드들의 집합이며, 자바스크립트에서는 객체로 취급됩니다.

따라서, 함수는 이전에 객체를 선언했던 모습과 유사하게 선언할 수 있습니다.

1
2
3
4
5
6
var adder = function(a, b){
    var sum = a + b;
    return sum;
}
 
console.log(adder(3,5));
cs

위의 코드에서 adder라는 객체는 함수 객체입니다.

위와 같은 방식으로 선언될 수 있는데, a와 b를 호출할 때에 받아서, 이 두 객체를 더한 sum을 돌려준다는 함수입니다.

따라서 6번 라인의 코드에 adder(3,5)를 실행하면, 3이 a가 되고, 5가 b가 되어 두개를 더한 8을 돌려주게 되고,

console.log함수는 돌려받은 8을 화면에 출력하게 됩니다.

함수에서 사용된 sum이라는 객체는, 함수가 종료되면 사라지게 되는데, 이는 객체 스코프(Scope)에 의해서 사라집니다.

이 부분에 관하여는 클로져(Closure)에 관한 내용에서 다루도록 하겠습니다.

익명함수는 무엇인가?

자바스크립트 에는 익명함수 기능을 제공합니다.

기존에 함수는 선언을 한 후에, 함수를 호출하여 함수를 사용하였던 것에 반해, 익명함수는 함수를 선언과 동시에 사용하는 것을 의미합니다.

이름이 없기 때문에 다시 부를 수 없습니다.

1
2
3
4
5
6
7
8
var adder = function(a, b){
    var sum = a + b();
    return sum;
}
 
console.log(adder(3, function(){
    return 5;
}));
cs

위의 코드에서 6번 라인의 function(){ return 5;}가 익명함수입니다.

adder 함수가 전달받는 객체로 함수 b를 받았기 때문에, 2번 라인의 코드에서 b를 바로 더하는 것이 아니라 b()로 작성하여 b의 결과값을 더해줍니다.

6번 라인에서의 익명함수는 그냥 5를 돌려주는 함수의 기능만을 하기 때문에, 3과 5를 더한 8의 값이 나오게 됩니다.

메서드란 무엇인가?

객체지향 언어에서, 객체가 가지는 함수를 메서드(Method)라고 합니다.

자바스크립트의 경우에는, 객체의 속성으로 함수 객체를 가질 수 있는데, 이 때 이를 메서드라고 합니다.

1
2
3
4
5
6
7
8
var yangd = {
    type: 'blogger',
    introduce : function(){
        console.log("Hello, I'm "+this.type);
    }
}
 
yangd.introduce()
cs

위의 식에서, yangd라는 객체는 그 속성으로 type이라는 문자열 객체와 introduce라는 함수 객체를 가지고 있습니다.

특히 3번 코드의 함수 객체 속성이 바로 Method 이며, 특별한 점으로는 4번 라인에서 this라는 키워드를 사용했는데, 이는 이 객체를 가리키게 됩니다.

따라서 this.type 은 yangd 객체의 type을 가리키게 됩니다.

위의 코드의 실행 결과는 Hello, I'm blogger 가 되게 됩니다.

매개변수와 인자값

매개변수란 함수에서 넘기는 변수들을 의미하고, 인자값은 넘어온 값들을 의미합니다.

자바스크립트의 함수는 매개변수에 비교적 자유롭습니다. 이 말인즉슨 다음과 같습니다.

1
2
3
4
5
var adder = function(a, b){
    return a+b;
}
 
console.log(adder(3, 5, 7, 9))
cs

adder라는 함수는 매개변수가 a, b의 두개를 가진 함수입니다.

그러나 5번 라인의 코드에서, 인자를 3,5,7,9를 넘겼습니다.

이렇다고 해서 런타임 에러가 일어나는 것이 아니라, 앞의 두 숫자를 a, b로 인식하여 8을 출력하게 됩니다.

함수에서 인자값에 접근하기 위해서 꼭 매개 변수를 사용하여야 하는 것은 아닙니다.

자바스크립트에는 함수가 실행될 때에, arguments라는 내부 객체에 접근할 수 있게 됩니다.

1
2
3
4
5
6
7
8
9
var addAll = function(){
    var sum = 0;
    for(var i in arguments){
        sum = sum + arguments[i];
    }
    return sum;
}
 
console.log(addAll(3, 5, 7, 9))
cs

위와 같은 방식으로, 매개 변수는 없으나, arguments 배열을 사용하여 3,5,7,9에 접근할 수 있게 됩니다.

함수는 매우 중요한 개념입니다 !

하나의 함수에는 하나의 기능을 정확하고, 간결하고, 에러로부터 자유롭게 작동될 수 있도록 짜주는 것이 좋습니다.

보기 좋은 코드(클린 코드)에 대해서는 따로 추후에 포스팅 하겠지만, 함수를 잘 만들어주는 것이 중요합니다.

그럼 이만 ..

게임은 왜 재미있는가? 4가지 흥미 요소

양디 — Mon, 17 Oct 2016 23:13:16 +0900

<이미지 출처 : http://www.ytn.co.kr/_ln/0103_201502220204085138 >

놀이가 없었던 시절이 있었을까?

지나치게 게임에 과몰입하여 건강을 챙기지 못하여 사망한 사건, 혹은 자신의 캐릭터를 돌보느라 아이를 돌보지 못하여 아이가 죽은 사건 등. 게임으로 인하여 안 좋은 사건들이 일어나는 것을 뉴스를 통하여 종종 볼 수 있다. 게임은, 나쁜 것일까?

먼저 앞서서, 게임은 하나의 놀이이다. 놀이에 대해 생각해보자.

생각을 해보자면, 놀이가 없었던 시절이 있었을까?

컴퓨터와 스마트폰이 보급되지 않았던 시절에는, 전통 놀이들이 우리 선조들의 즐거움을 채워주었다. 윷놀이, 투호, 사방치기, 비석치기.

전통놀이까지 가지 않더라도, 어렸을 적에 했던 딱지치기, 구슬치기는 누가 하라고 시키지 않았는데도 누구나 좋아하는 것이었다.

운동은 어떤가? 축구를 보면, 공을 찬다고 밥이 나오지 않는다.(지금에서야 프로 선수 개념이 있기 때문에 돈을 받고 운동을 한다지만, 과거 돼지 오줌보를 차던 시절에 돼지 오줌보를 찬다고 누가 밥을 줬겠는가?) 농구며, 투우며 수많은 스포츠들은 사실 필요에 의해서 하는 것이 없다고 볼 수 있다.

왜 우리는 노는가 ?

이러한 질문에, 요한 하우징거 는 호모 루덴스(놀이하는 인간)이라는 개념을 도입한다.

호모 사피엔스가 '생각'을 가지고 동물과 사람을 구분한다면, 호모 루덴스는 '놀이'의 개념으로 사람을 특징짓는다.

사람은 필요에서 비롯되지 않은 행위에서 재미를 느끼고, 그 행동을 반복하기를 원하곤 한다.

그럼 그 '놀이' 에서 어떤 요소들이 재미를 느끼게 해줄까?

하우징거와 로제 카이와는 이에 4가지 요소를 소개한다.

아곤(Agon, 경쟁)

아곤은 놀이의 주체와 객체간의 경쟁을 의미하고, 승리를 통한 성취감을 의미한다.

축구에서 골대에 골을 더 많이 넣은 선수가 이기고, 권투에서 상대방을 쓰러뜨린 선수가 이기는 것을 의미한다.

게임을 포함한 대부분의 놀이에는 아곤의 요소가 분명하게 개입되어 있다.

게임의 경우에는, 자신의 캐릭터의 랭킹(순위)가 다른 사람보다 높을 때에 우월감을 느끼고,

상대방과 경쟁하여 이기는 것으로 큰 성취감을 느끼게 된다.

미미크리(Mimicry, 역할)

미미크리는 역할 놀이를 의미한다. 이는 롤플레잉 게임과 큰 관련이 있다.

학생 시절에, 무서운 선생님 혹은 재미있는 선생님, 지루한 선생님을 잘 따라하는(성대모사) 친구가 꼭 한둘은 있기 마련이고,

그 친구가 대상을 따라하는 것을 보면 자신도 모르게 웃음을 터뜨리게 된다.

이러한 역할이 재미 요소가 된다. 소꿉놀이, 연극, 영화에서 자신이 아닌 다른 대상의 역할을 수행하는 배우를 보며,

관객마저 그 역할에 심취하여 감정을 함께 느끼곤 하는 것도 이에 해당한다.

게임에서는 원딜, 정글, 탱커 등의 역할 분배가 이에 해당하고,

더 나아가 길드, 클랜 등의 단체에서 길드장, 부길드장 등의 직위가 이에 해당하게 된다.

이러한 직위와 역할을 수행하며 놀이의 속으로 들어가게 되고, 즐거움을 느끼게 된다.

알레아(Alea, 행운)

알레아는 행운의 요소에 해당한다. 흔히 문제가 되는 도박 중독이 이것에 지나치게 빠지기 때문이다.

포커를 생각해 보자면, 자신에게 어떤 카드가 올 지 모르며, 오는 카드의 패는 오직 행운(공정한 상황에서)에 달려있다.

행운에 의해 좋은 결과와 나쁜 결과가 주어지기 때문에,

자기 자신의 노력을 뛰어 넘는 소득(불로소득)에 대한 기대가 생기게 되고,

따라서 행운의 요소에 지나치게 몰입하는 경우가 생긴다.

행운에 대한 기대와 불행에 대한 회피심리가 적당히 분배되어야 하는데, 행운에 지나치게 기대는 경우 도박 중독에 빠지게 된다.

온라인 게임의 행운 상자 등이 이에 해당한다.

일링크스(Ilinx, 현기증, 몰아)

일링크스는 현기증, 몰아의 상태를 의미하는데, 가장 큰 흥미 요소이며, 가장 큰 동기 부여 요소가 되곤 한다.

특별한 목표(달성하기 어려운)를 세우고, 그 목표를 성취했을 때에 느껴지는 현기증(쾌감)이 이에 해당한다.

리그 오브 레x드의 게임의 경우에, 원딜이 자기 자신의 역할을 굉장히 잘 수행하여(미미크리) 펜타킬을 하는 경우가 이에 해당한다.

게임에서 랭킹이 다른 사람에 비해 높은 것(아곤)을 뛰어넘어, 1위에 달성하는 경우가 이에 해당한다.

굉장히 낮은 확률을 뚫고 얻은 최고급 아이템(알레아)가 이에 해당한다.

따라서, 다른 세 가지 요소들이 게임의 요소에 해당했다면, 일링크스는 그 요소들로 얻는 실제 즐거움을 의미한다.

이 외에도 그래픽의 발전으로 미적 요소 등이 게임에 즐거움을 주는 요소들이 된다.

위의 요소들은 모두 적당한 수준에서는 즐거움을 주지만, 과한 경우에는 항상 독이 된다.

경쟁심리(아곤)이 지나쳐서 실제로 사람을 찾아가서 살인을 일으키는 경우

행운에 대한 기대(알레아)가 지나쳐서 도박에 빠져서 재산을 탕진하는 경우

역할 놀이(미미크리)에 지나쳐서 본래 자기 자신의 역할을 수행하지 못하는 경우

가 이에 해당한다.

상업적으로 사람들을 끌어들이기 위하여 지나치게 게임의 일부 요소를 강화하거나, 혹은 자제하지 못하고 게임에 너무 몰입한 경우 이러한 안좋은 상황들이 일어나게 되는 것이다.

모든 게임이 나쁜 것이 아니라, 지나친 요소들이 게임의 나쁜 부분을 부각시키는 것이다.

따라서, 게임을 만들 때에는 위의 요소들을 적당히 분배하여야 하며, 과한 몰입으로 유저에게 피해를 주기보다는

즐거움을 극대화하고, 호모 루덴스 로의 자기 자신의 존재를 더욱 확립하는(역할에 빠지는 것이 아니라 자기 자신의 삶에 가치를 더하는) 게임을 만들 수 있도록 주의해야 할 것이다.

다시 한번 웹게임에 도전해보고자, 기획 단계부터 시작하기 위하여 요소들을 검색해보았고, 정리해 보았다.

자바스크립트 강좌 - 5. 조건문, 반복문

양디 — Mon, 17 Oct 2016 22:33:12 +0900

자바스크립트 조건문

조건문이란 어떤 코드를 실행하기에 앞서, 조건에 부합하는지 확인하는 코드이다.

if 조건문의 키워드는 2가지 종류로 나뉘는데, if 와 else 로 나뉜다.

if 문이 성립한다면, else문은 무시하게 되고, if문이 성립하지 않은 경우에는 else문을 검사하게 된다.

사용하는 방식은 다음과 같다.

1
2
3
4
5
6
7
8
9
10
var a = 5;
var b = 3;
 
if(a > b){
    console.log('a가 b보다 큽니다!');
}else if(a < b){
    console.log('b가 a보다 큽니다!');
}else{
    console.log('a와 b는 같습니다!');
}
cs

위의 식의 4, 6, 8번이 조건문에 해당한다.

4번 if문의 안쪽에 있는 a > b의 조건이 만약에 성립한다면(true)라면, 해당하는 중괄호의 코드를 실행하고, 나머지 else 문들은 그냥 넘어간다.

지금은 a가 5이고, b가 3이기 때문에 4번의 a > b 조건이 true 이다. 따라서 5번 코드를 실행하고, 6~10번 코드는 넘어가게 된다.

만약에 a가 3이고 b가 5라면, 4번의 조건은 false이기 때문에, 6번 조건을 확인하는데, a < b가 성립하므로 7번 코드를 실행하고 나머지는 넘어가게 된다.

a > b도 아니고, b < a 도 아닌 경우는 같은 경우이기 때문에 같다고 출력한다.

if 조건문은 아주, 아주아주 자주 쓰이기 때문에 반드시 몸에 익히는 것이 좋다.

두번째로, Switch 조건문이 있다.

switch 조건문은 한번에 여러가지 조건을 확인할 때에 유용하다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var a = 3;
 
switch(a){
    case 1:
        console.log('1입니다.');    
    case 2:
        console.log('2입니다.');
        break;
    case 3:
        console.log('3입니다.');
        break;
    default:
        console.log('다른 숫자입니다.');
        break;
}
cs

위의 코드는 switch 문 안에 있는 a의 값을 사용하여 여러 코드를 실행한다.

주의해야할 것은, 각각의 case에 break;를 붙여주는 것인데, 이는 switch문을 탈출한다는 의미이다.

a가 1인 경우에는, '1입니다'를 출력한 이후에, break;가 없기 때문에 '2입니다'도 출력하게 되버린다.

따라서, 조건문을 구분하기 위하여 break;를 붙이자.

자바스크립트 반복문

반복문은 조건이 성립한다면 해당 코드를 계속해서 실행하는 것이다.

반복문은 시작, 조건, 가감 의 세가지 부분으로 나뉜다.

자바스크립트 반복문에는 3가지 종류가 있다. 다음의 코드들은 모두 동일한 코드이다.

1
2
3
4
5
6
var a = 0; // 시작 부분에 해당한다. 조건절에 들어갈 변수를 초기화해준다.
 
while(a < 5){// a < 5 가 종료조건이 된다.
    console.log(a);
    a = a + 1; // a가 1씩 증가한다. 가감 부분에 해당한다.
}
Colored by Color Scripter
cs

1
2
3
4
5
var a = 0; // 시작 부분에 해당한다. 조건절에 들어갈 변수를 초기화해준다.
do{
    console.log(a);
    a = a + 1; // a가 1씩 증가한다. 가감 부분에 해당한다.
}while(a<5) // a < 5 가 종료조건이 된다.
cs

1
2
3
for(var a=0; a < 5; a++){
    console.log(a);
}
cs

for 문의 경우에는, 시작 조건 가감의 세 부분이 함께 모여 있고, 세미 콜론으로 구분되어 있다.

while 문과 do-while문의 경우에는, 비슷하지만 다른 점은 while은 반복문을 시작하기 전에 조건을 확인하고 시작하는 것이고,

do-while문은 우선 반복을 1회 수행하고 이후에 조건을 확인하는 것이다.

그리고 특별하게, for-in 반복문이 존재한다.

1
2
3
4
5
6
7
var obj = {name:"yangd", age:25, hobby:"web"};
 
for(var i in obj){
    console.log(i);
    console.log(obj[i]);
}
 
Colored by Color Scripter
cs

위와 같은 코드에서, 3번의 var i in obj 이 가장 중요한데, obj 객체에 들어 있는 속성들을 i에 넣어가면서 실행하겠다는 의미이다.

따라서, console.log(i)의 경우에는 'name', 'age', 'hobby'가 출력되고,

obj[i] 구문에는 "yangd", 25, "web"이 출력되게 된다.

일반적으로 사용하는 프로그램들은 반복문과 조건문으로 이루어져 있다고 해도 과언이 아니다.

따라서, 숨쉬듯이 나올 수 있도록 몸에 체득하자 !

점점 일반적인 부분들이 지나가고, 이제 자바스크립트들의 강점들이 곧 나올 것 같다....... !

자바스크립트 강좌 - 4. 연산자(Operators)

양디 — Mon, 17 Oct 2016 21:48:19 +0900

자바스크립트 연산자(Operators)

연산자에 대한 설명은 다음 링크로 대체....

귀찮아서가 아니라 너무 설명이 잘 되어 있다 !

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators

자바스크립트 강좌 - 3. 객체(Object)

양디 — Mon, 17 Oct 2016 21:01:48 +0900

자바스크립트는 이전 포스팅에서 다뤘듯이, 객체 지향 언어이다. 그렇다면 객체는 무엇인가 ?

"자바스크립트에서 객체는, 변형 가능한 속성들의 집합이라고 할 수 있습니다."
- 더글라스 크락포드의 자바스크립트 핵심 가이드

프로그래밍을 처음 하는 사람이라면, 이것이 무슨 말인지 잘 와닿지 않을 수도 있다.

작은 예시를 들어보자면, '양디' 사람(객체)가 있다고 하자. 이 객체는 여러 가지 속성들로 이루어져 있는 집합이다. 예를 들어, 나이라는 속성과, 취미라는 속성, 홈페이지라는 속성이 있다고 하자.

이 속성은 변형이 가능하다. 나이는 시간이 지나면 늘어나게 마련이고, 취미와 홈페이지 또한 얼마든지 바뀔 수 있는 것이다. 이것이 객체인 것이고, 속성들을 저장하고 그 속성들을 통하여 프로그램을 사용하는 것이다.

객체는 '이름' 과 '값' 의 쌍으로 이루어져 있다.

객체는 사용하겠다고 선언을 한 이후부터 사용을 할 수 있게 되는데, 'var' 키워드와 = 기호를 통하여 선언한다.

다음과 같은 코드가 있다고 생각을 해보자.

1
2
var yangd = "사람";
console.log(yangd);
cs

1번 라인을 보면 알 수 있듯이, var 키워드가 사용되었고, yangd 라는 객체의 이름과 "사람"이라는 객체의 값이 = 기호를 통해서 선언되고 있다.

yangd 라는 이름의 객체에 "사람" 이라는 값을 넣어라(=) 라는 의미의 코드가 되겠다.

(= 은 일상 생활에서는 같다 라는 의미지만, 프로그래밍 언어에서는 왼쪽 것에 오른쪽 것을 집어넣어라 라는 뜻이다.)

2번 라인의 console.log()는 함수(다음 포스팅에 나온다.)인데, 해당하는 이름을 가진 객체의 값을 화면에 출력해주는 역할을 한다.

따라서, 위의 코드를 실행하면 다음과 같은 결과가 나온다.

즉 yangd 라는 이름의 객체에는 "사람"이라는 값이 들어가 있는 것이다.

객체의 값에 들어갈 수 있는 것은 여러가지 종류가 있는데, 이를 자료형(Data Type)이라고 한다.

자바스크립트 자료형

1
2
3
4
5
6
7
8
9
10
var number = 15;
var number = 15.0; 
var string = "hi";
var string = 'hi';
var boolean = true;
var array = [1, 2, 3, 4];
var object = { property : 1};
var func = function(){ console.log(this);}
var a = null; //null
var b = undefined; //undefined
cs

자바스크립트 자료형 은 위와 같은 종류가 있다.

먼저 숫자가 있는데, 숫자는 정수와 실수(흔히 말하는 소수)를 구분하지 않는다. 1번 라인과 2번 라인은 같은 숫자를 의미한다.

string이라는 것은 문자열을 의미하는데, 하나 이상의 문자로 이루어진 데이터이다. 3번과 4번의 차이는 큰따옴표(") 이냐 작은 따옴표(') 이냐인데, 같은 의미이다.

5번 라인의 boolean은 참과 거짓을 의미하는 true, false 를 의미한다.

6번 라인은 배열을 뜻하는데, 여러가지 값만을 포함하는 객체이다. 배열은 대괄호 [ ] 안에 표현된다.

7번 라인은 객체인데, (객체의 값이 객체이다..) 객체 안에 또다시 이름과 값의 쌍을 지닌 객체가 들어가 있는 것이고, { } 안에 표현된다.

8번 라인은 저번 포스트에 썼듯이, 함수 또한 객체로 취급된다.

null은 아무 것도 가리키지 않는 상태를 의미하며, undefined는 선언되지 않은 상태를 의미한다.

자료형을 확인하기 위해선 typeof 라는 키워드를 사용해서 실행하면 되는데, 다음과 같이 실행해 볼 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
var und;
 
console.log(typeof(und));
console.log(typeof(15));
console.log(typeof(15.0));
console.log(typeof('hi'));
console.log(typeof("hi"));
console.log(typeof(true));
console.log(typeof([1,2,3]));
console.log(typeof({prop:1}));
console.log(typeof(function(){console.log('hi')}));
console.log(typeof(null));
console.log(1*'ff');
Colored by Color Scripter
cs

실행 결과는 다음과 같다.

배열, 객체, null은 객체로 취급하는 것을 확인해 볼 수 있다.

NaN 은 Not a Number 의 약자로, 숫자와 숫자가 아닌 것을 연산하려고 했을때 나오는 값이다.

다시 한번, 객체

다시 한번 객체로 돌아와서, 객체는 이름과 값의 쌍으로 이루어진 변형 가능한 속성들의 집합이라고 하였다.

따라서, 제일 처음 말했던 yangd라는 객체의 속성을 입력하기 위해서는 다음과 같은 방식으로 선언이 가능하다.

1
2
3
4
5
6
7
8
var yangd = {};
yangd.age = 25;
yangd.hobby = "web";
yangd.homepage = "http://dalkomit.com"
 
console.log(yangd);
console.log(yangd.age);
console.log(yangd['age']);
cs

1번 라인에서 yangd 라는 빈 객체를 선언해주고, 2~4번 라인에서 yangd의 객체에 이름과 값을 입력해주고 있다.

위를 직접 실행해보면 객체의 이름과 값들이 나오는 것을 볼 수 있다.

7번과 8번 라인처럼 객체의 특정 값에 접근할 수 있기도 하다. 기억해두자 ! 점( . )을 사용할 수도 있고, 배열 구조 [ ] 을 사용할 수도 있다.

두 값 모두 25로 객체의 age 값을 출력해준다.

이러한 객체들을 사용하여 앞으로 수많은 코드를 활용하게 될 것이므로, 잘 기억해 두자 !

자바스크립트 강좌 - 2. What is JavaScript?

양디 — Sat, 15 Oct 2016 16:43:51 +0900

자바스크립트의 특징

JavaScript란 어떤 특징과, 어떠한 장단점을 가지고 있는지 한번 생각해보자.

이번 장에서는 JavaScript가 웹 상에서 어떻게 사용되고 있는지에 대한 Web 구성 요소일 때의 JavaScript와,

하나의 프로그래밍 언어로써의 JavaScript에 대해 나눠서 알아보고자 한다.

JavaScript 와 Java ?

프로그래밍에 관심이 있는 사람이라면, Java라는 언어에 대해서 들어봤을 것이다.

대표적인 객체 지향 프로그래밍 언어로, 가장 많이 쓰이는 언어 중에 하나이다.

그럼 JavaScript에는 왜 Java가 들어갔을까? 혹시 Java로부터 나온 언어인 것일까 ? 하는 의문점이 든다.

결론부터 말하자면, '아니다'.

~~인도와 인도네시아가 다르듯이~~ , Java는 자바 가상 머신(JVM) 상에서 구현되는 언어이고, 브라우저 내부의 인터프리터를 통해 구현되는 JavaScript는 실행 방식부터 다른 언어이다.

단지 JavaScript가 개발되어 세계에 이름을 알리려고 했을 때에, (그 당시의 이름은 LiveScript였다고 한다.) 세계적으로 Java가 굉장히 큰 호응을 얻고 있었고, 그 호응에 탑승하고자 이름에 Java를 넣었을 뿐이라고 한다.

재밌는 이야기이다.

하여튼, JavaScript는 Java로부터 나온 언어가 아니라, 별개의 언어이며 충분히 다양한 강점들을 가지고 있는 언어이다.

JavaScript는, 인터프리터 언어이다.

먼저 컴파일러와, 인터프리터의 차이를 알아보자.

프로그래밍 언어는 각자의 언어에 맞게 실행되는 환경이 필요하다. 이 때에, 프로그래밍 언어를 기계가 이해할 수 있는 언어로 바뀌어 실행 파일로 바꾸는 과정을 컴파일이라고 한다.

C 프로그래밍을 하게 된다면, 컴파일러를 통하여 C 언어를 실행 파일로 컴파일하고, 그 실행 파일을 실행하는 방식이 사용되게 된다.

반면에 컴파일이 필요 없이, 바로 언어를 한 줄씩 읽어서 실행하는 방식이 있는데, 이를 인터프리터 방식이라고 한다.

웹 브라우저에서 JavaScript 실행이 가능한 것은, 브라우저 내부에 인터프리터가 내장되어 있기 때문이라고 할 수 있다.

컴파일 언어와 비교하자면 컴파일 과정이 필요 없기 때문에 실행에 이르는 시간이 단축되지만,

언어가 그대로 노출된다는 단점 또한 존재한다.

JavaScript는 객체 지향 언어이다.

객체 지향이라는 단어를 처음 보는 사람들을 위해 설명하자면, 프로그래밍 언어는 크게 절차 지향과 객체 지향으로 나뉜다.

기계가 이해하기 위한 언어는 절차 지향의 성격이 강하다. 기계는 언어를 순서대로 인식할 뿐이다.

그러나 이러한 방식은 현실적인 부분들을 표현하는 것에 불편함이 있었고, 그래서 객체 지향 언어가 탄생하게 된다.

예를 들어, '양디' 라는 사람을 생각해보자.

이 '양디'는 다양한 특징을 가지고 있고, 다양한 행동을 할 수 있는 '객체'이다.

단순히 '양디'의 행동과 특징을 순서대로 나열하는 것에 그치는 것이 아니라, 이 '객체'가 지닌 특징과 행동을 결합하여 '객체'를 설명하고, 이 '객체'를 중심으로 프로그램이 실행되는 것이다.

즉, 가장 중요한 것은 객체의 특징(Property) 와 행동(Method) 들이 서로 유기적으로 결합하여 실행된다는 것이다.

객체 지향 프로그래밍에는 캡슐화, 상속성, 다형성의 특징을 지니는데, 이는 나중에 따로 포스팅하도록 하자.

어찌 되었든, JavaScript는 객체 지향 언어이며, 모든 함수, 변수 등의 구성 요소들은 Object 로써 작동한다.

JavaScript의 함수는 일급 객체(First Class Object)이다.

일급 객체라는 것은, 다음과 같은 조건을 포함한다.(ECMAScript Specification 참조)

변수에 저장할 수 있어야 한다.
함수의 파라미터로 전달할 수 있어야 한다.
반환값으로 사용할 수 있어야 한다.
자료구조에 저장할 수 있어야 한다.

이와 같은 특징을 지닌 것은 아주 강력한 강점을 의미한다.

이런 특징으로 과거의 자바스크립트 개발자는 다형성, 상속성, 캡슐화 기능이 가능한 객체들을 개발하였다.

(이제는 공식적으로 지원을 해준다.)

함수와 변수 들에 대해 모르는 사람이 있을 수 있으므로, 나중에 다시 설명하기로 하자.

JavaScript의 장점

위와 같은 특징들이 JavaScript의 장점이 될 수 있다.

첫째로, 인터프리터 언어로 컴파일 과정이 없이 빠르게 실행이 될 수 있다.

둘째로, 일급 객체 언어로 개발자가 능력이 된다면 함수를 통하여 무한대에 가까운 가능성의 언어를 개발할 수 있다.

셋째로, 웹 브라우저 상에 스크립트 엔진이 내장되어 있으므로, 시스템 환경 등 플랫폼에 구애 받지 않고 개발한 후에 브라우저 상에서 사용이 가능하다.

JavaScript의 단점

첫째로, 컴파일 되지 않은 언어가 그대로 사용자에게 주어지므로, 소스 노출의 위험이 크다.

둘째로, 브라우저 상에서 소스를 변경하여 사용자가 임의로 기능을 실행할 수 있다는 위험이 있다.

이러한 단점은, 과거에 웹 게임을 만들 때에 고민을 했었는데, 클라이언트 부분에서 연산을 수행하는 다른 게임들과 비교하여서

객체들이 사용자에게 고스란히 공개되는 단점으로, 연산을 사용자가 임의로 수정하여 게임에 악영향을 끼칠 수 있다는 점이었다.

따라서, 서버 측과 클라이언트 측의 적절한 소스 분배가 필요해진다.

이런 단점에도 불구하고, JavaScript는 아주 강력하고, 편리하고, 유용한 개발 언어이다.

자바스크립트 강좌 - 1. How to JavaScript?

양디 — Sat, 15 Oct 2016 15:25:54 +0900

JavaScript 환경 구축

JavaScript 를 실행하기 위한 환경을 우선 구축해보자.

방법은 여러 가지 있지만, 여기서 소개할 방법은 3가지 방법이다.

첫번째, Web Browser를 사용한다. (Chrome)

JavaScript 는 애초에 웹 페이지 개발을 위하여 만들어진 프로그래밍 언어이기 때문에,

대부분의 웹 브라우저는 JavaScript를 지원한다.

따라서, 웹 페이지를 제작하고 이를 웹 브라우저 상에서 여는 것으로 JavaScript를 코딩하고 실행해볼 수 있다.

다음과 같은 과정을 통하여 코딩을 하고, 실제로 확인을 해보자.

먼저 메모장, 워드 등의 TXT 편집이 가능한 에디터를 통하여 다음과 같은 소스를 입력한다.

(마땅한 에디터가 없다면, 무료인 Atom 에디터를 추천한다. 다음 링크를 통해 설치해보자.)

Atom 설치

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <script type="text/javascript">
      console.log('Hello World!');
    </script>
  </body>
</html>
cs