지형

1. 직사각형 모양의 그리고가 있고, 그리드 클릭 위치에 따라 타일의 생김새가 달라진다.
2. 대각선 모양의 타일도 만들 수 있다.
3. 한 레이어당 한 가지 종류의 타일만 사용할 수 있다.
4. TileMap Entity에서 TileMap Component에는 다양한 기능들이 있다.(색깔, foothold, layer 등)
5. 메뉴에서 발판 정보(Foothold) 를 확인하면 빨간색으로 발판의 정보들을 확인할 수 있다.
6. Foothold는 수정도 가능하다.

레이어

1. Map Layer 패널에서 레이어 정보를 확안할 수 있다.
2. 레이어에 Z축이 생겨 더 입체적인 맵을 만들 수 있다.

TransformComponent

월드 상에서 entity가 어디에 위치하는지 나타내는 컴포넌트이다.

• entity의 위치 정보를 가지고 있다.
• position: 좌표값(자식의 좌표값은 부모 기준의 상대 좌표이다: 상대 좌표)
• scale: 크기
• ZRotation: 회전값
• WorldPosition: world(최상위) 기준에서 해당 entity가 위치한 좌표값을 의미한다.(절대 좌표)
• WorldZRotation: 절대 회전값

SpriteRendererComponent

월드에 entity를 어떻게 그려낼 지 나타내는 컴포넌트이다.

• SpriteRUID: entity 값 자체를 의미한다. (RUID를 복사해서 새로운 entity에 복사해넣으면 같은 entity가 생성된다.)
• 움직이는 entity도 RUID로 복사할 수 있다.
• PlatRate: 애니메이션의 움직이는 속도
• StartFrameIndex: 시작하고 싶은 프레임의 인덱스
• EndFrameIndex: 끝내고 싶은 프레임의 인덱스
• FlipX: 좌우반전
• FlipY: 상하반전
• DrawMode: simple이 default이고 tiled를 선택하면 entity를 tiling 할 수 있다.(타일화)
• TileSize: tiled된 entity의 사이즈를 조정할 수 있다.
• Color: entity의 색깔을 바꿀 수 있다.

Entity

월드를 구성하고 있는 어떤 물체들을 의미한다. 몬스터나 지형과 같이 하나의 오브젝트를 전부 MOD에서는 Entity라고 부른다. (최상위에 있는 World도 enitity라고 할 수 있다.)

• entity는 눈으로 확인이 가능하다.
• scene maker에서 확인할 수 있다.
• 트리 형태로 구성되어 있다.(부모를 이동하거나 삭제하면 자식에게도 적용된다.)

Component

각각의 entity들은 여러개의 component로 구성되어 있다. entity를 기능 단위로 쪼개서 기능에 특화된 작동을 하는 것을 component라고 부른다. 예를 들면 portal entity는 portal component라는 기능을 가지고 있는데 이것은 한 장소에서 다른 장소로 이동할 수 있는 특성을 가지게 된다.

• script component와 native component로 나뉜다. script component: 스크립트 레벨에서 직접 어떤 일을 하는 컴포넌트인지 정의해준 경우이다. native component: 기본적으로 Mod에서 제공하는 여러 종류의 컴포넌트이다.

Property

component의 세부정보들을 의미한다. 예를 들면, portal component가 이동을 하는 기능을 가지고 있지만, 어디로 이동하는지는 직접 설정해주어야 한다.

Service and Logic

서비스와 로직은 월드 상에서 딱 한 개만 존재한다. 서비스는 대체로 기본적인 일들을 담당한 다. 유저를 관리하거나 로그를 기록하는 것과 같은 basic한 것들이 이에 해당한다.

• 서비스는 재가공이나 수정이 불가능하다.

로직은 게임을 도와주는 것이다.

• 재가공이 가능하고 크리에이터가 직접 로직을 만들 수도 있다.

Model

entity와 property, 그리고 api 기능들이 같이 합쳐져서 모듈화된 것을 모델이라고 볼 수 있다. 클래스처럼 원본 객체를 의미하고, 모델을 인스턴스처럼 찍어낼 수 있다.

• 만들어진 entity를 나만의 model로 커스텀이 가능하다.

구성 요소

1) Scene 가운데에 배경이 있어서 해당 부분에 게임을 제작할 수 있고 저장하면 바로 플레이해볼 수 있다. 2) Model List 다양한 리스트의 객체들이 있어 배경에 갖다 놓을 수 있다. 3) Publish Publish하면 다른 사람들이 내가 만든 게임을 플레이해볼 수 있다.(공개일 시) 4) Property 객체들에 대한 세부적인 속성 설정이 가능하다. 5) Scene Maker scene에서 생성한 리스트들을 확인할 수 있고, 선택하면 scene에서 해당 영역이 focus된다. 6) WorkSpace 객체에 대한 원본 모델이 자동적으로 workspace에 추가된다. 7) Console 앞으로 객체들에 대한 스크립트를 작성하는데 사용할 수 있다.

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.

어플리케이션의 역할은 데이터를 '입력'받아서 처리하고, 그 결과를 '출력'하는 것이다. 컴퓨터에서는 연산을 하는 부품과 기억을 하는 부품이 나누어져 있는데, 연산은 CPU를 사용하고, 데이터 기억은 메모리를 사용한다. 프로그래밍 언어들은 개발자가 직접 메모리를 제어하는 것을 허용하지 않는데, 이는 오류를 막고 컴퓨터가 하는 일들을 추상화하기 위해서이다. 그래서 한 번 사용했던 값을 기억하거나 재사용하기 위해서 변수를 사용한다. 변수는 값을 가리키는 상징적인 이름으로, 프로그래밍 언어의 컴파일러 또는 인터프리터로 변수를 메모리 주소로 치환한다.

메모리 공간에 저장된 값을 식별하는 고유한 이름을 변수 이름이라고 하고 그 안에 저장된 값을 변수 값이라고 한다. 변수에 값을 저장하는 것을 할당, 값을 읽어들이는 것을 참조라고 한다.

🍎 식별자

식별자는 어떤 값을 구별하는 고유한 이름을 말한다. (메모리 주소에 붙인 이름)

값은 메모리 공간에 저장되어 있다. 해당 공간의 메모리 주소를 식별자에 저장해두는 방식이다. 식별자는 값이 저장되어 있는 메모리 주소와 매핑 관계를 맺으며, 이 매핑 정보도 메모리에 저장한다. 식별자 <- 메모리 주소 메모리 주소. <- 값 식별자는 값이 아닌 메모리 주소를 기억한다. 식별자는 변수, 함수, 클래스 이름 등에 사용될 수 있고, 네이밍 규칙을 통해 자바스크립트 엔진에 식별자를 선언한다.

🍎 변수 선언

변수 선언이란 변수를 생성하는 것을 의미한다.

변수를 선언하는 것, 변수를 생성하게 되면 메모리에는 다음과 같은 일이 일어난다. 값을 저장하기 위해 메모리 공간을 확보해두고 해당 메모리 주소와 변수 이름을 연결한 정보를 저장해서, 값을 저장할 수 있게 준비를 한다. 자바스크립트에서는 변수를 선언하고 값을 할당하지 않으면, 확보된 공간에 undefined라는 값이 할당되어 초기화된다.

• 선언 단계: 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다.
• 초기화 단계: 값을 저장하기 위해 메모리 공간을 확보하고 undefined를 할당한다. 선언할 때 값을 할당해주면, 해당 값을 저장한다.

변수를 선언하기 위해서는 var, let, const 키워드를 사용한다.

🍎 변수 선언의 실행 시점과 변수 호이스팅

자바스크립트에서 변수 선언은 런타임 이전에 실행되고, 실행될 때 변수 선언문을 코드의 상단으로 끌어올리는 것을 변수 호이스팅이하고 한다.

console.log(name);  // undefined

var name;  // 변수 선언

위의 코드에서 name이라는 변수의 선언보다 출력을 먼저 하였으니, ReferenceError가 뜰 것 같지만, undefined가 출력된다. 소스코드가 순차적으로 한 줄씩 실행되는 시점을 런타임(runtime)이라고 하는데, 변언 선언은 런타임보다 먼저 실행되기 때문이다. 자바스크립트에서는 런타임 이전에 소스코드를 평가하는 과정을 거치는데 이 때 모든 선언문을 찾아내서 실행하고, 런타임에서는 선언문들을 제외한 나머지 소스코드들을 한 줄씩 순차적으로 실행한다. 위의 코드처럼 변수 선언문이 코드의 선두에 있는 것처럼 동작하는 것을 변수 호이스팅이라고 한다.

🍎 값의 할당

변수에 값을 할당한다는 것은 할당 연산자 = 을 사용해서 우변의 값을 좌변의 변수에 할당하는 것이다.

값의 할당에 주의해야할 것이 두가지가 있다.

1) 변수 선언과 값의 할당의 실행 시점은 다르다

var name;  // 변수 선언
name = 'minsu';  // 값의 할당

var name = 'minsu';  // 변수 선언과 값의 할당

자바스크립트 엔진은 변수 선언과 값의 할당을 따로 쓰든 붙여쓰든 똑같이 동작한다. 변수 선언은 런타임 이전에 실행되지만, 값의 할당은 소스코드가 순차적으로 실행되는 런타임에 실행된다. 변수 선언과 값의 할당을 한 문장으로 표현해도 런타임 이전에는 변수에는 변수에 undefined가 할당되어 초기화한 후, 런타임에 값을 undefined가 아닌 지정한 값을 할당하는 것이다.

2) 변수의 값을 할당할 때 현재 메모리에 있는 값을 지우는 것이 아니다

변수의 값을 할당할 때, 이전 값을 가지고 있던 메모리 공간을 지우고 세로운 값으로 덮어씌우는 것이 아니라, 새로운 메모리 공간을 확보하고 그곳에 새로운 값을 할당한 뒤, 새 메모리 주소를 다시 식별자에 매핑한다.

🍎 값의 재할당

변수는 저장된 값을 변경할 수 있고, 재할당 시 새로운 메모리 공간을 확보하게 된다.

• 변수: 저장된 값을 변경할 수 있다
• 상수: 저장된 값을 변경할 수 없다

변수의 값을 재할당하면 이전 값이 저장된 메모리 공간을 지우고 그 메모리 공간에 재할당하는 것이 아니라 새로운 메모리 공간을 확보하고 그 공간에 새로운 값을 저장한다. 그렇게 때문에 쓰이지 않는 메모리 공간이 생기게 되는데, 이러한 값들은 가비지 콜렉터에 의해 메모리에서 자동 해제된다. 하지만 언제 해제되는 지는 알 수 없다.

• unmanaged language: C언어와 같은 unmanaged 언어는 개발자가 직접 메모리를 할당하고 제어하는 등 메모리 제어 기능(malloc(), free())을 제공하기 때문에 최적의 성능을 확보할 수 있지만 치명적인 오류를 만들 수도 있다.

• managed language: 자바스크립트와 같은 managed 언어는 개발자가 직접 메모리를 제어할 수 없다.

  
  

🍎 식별자 네이밍 규칙

어떤 값을 구별하기 위해 사용하는 것이 식별자이기 때문에 다음과 같은 네이밍 규칙들을 준수해야한다.

기본적으로 꼭 지켜야하는 규칙은,

1. 식별자는 특수문자를 제외하고 문자, 숫자, 언더스코어(_), 그리고 달러 기호($)를 포함할 수 있다.
2. 단, 식별자는 숫자로 시작할 수는 없다.
3. 예약어를 식별자로 사용할 수 없다.(class, else, if...)

이외에도 다양한 네이밍 규칙들이 있다.

알파벳 외에 유니코드로 식별자를 만드는 것은 권장하지 않는다

let 이름;

자바스크립트 식별자는 대소문자를 구별한다

let score;
let SCORE;

좋은 변수 이름은 코드 가독성을 높인다

let a = 7
let daysOfWeek = 7;

변수는 주석이 필요없는 변수를 만드는 것이 좋다

// 일주일동안 일수를 담는 변수
let a = 7

let daysOfWeek = 7;  // Good!

자주 사용되는 네이밍 컨벤션

// camelCase
let mathScore;

// snake_case
let math_score;

// PascalCase
let MathScore;

** 이 글은 모던자바스크립트 Deep Dive(이웅모 저)를 정리한 글입니다.

📄 stack.ts

{
  interface Stack {
    readonly size: number;
    pop(): string;
    push(value: string): void;
  }

  type StackNode = {
    readonly value: string;
    readonly next?: StackNode;
  };

  class StackImpl implements Stack {
    private _size: number = 0;
    private head?: StackNode;

    get size() {
      return this._size;
    }

    push(value: string) {
      const node: StackNode = {
        value,
        next: this.head,
      };
      this.head = node;
      this._size++;
    }

    pop(): string {
      if (this.head == null) {
        throw new Error('Stack is empty!');
      }
      const node = this.head;
      this.head = node.next;
      this._size--;
      return node.value;
    }
  }

  const stack = new StackImpl();
  stack.push('apple');
  stack.push('banana');
  console.log(stack);
  console.log(stack.pop());
}

위의 스택 코드를 하나하나 뜯어서 살펴봅시다. 우선 클래스를 만들기 전에 interface와 type을 지정해주었습니다. interface는 코드 생성자와 사용자간의 계약서입니다.

interface Stack {
    readonly size: number;
    pop(): string;
    push(value: string): void;
  }

Stack이라는 interface를 통해, 코드 생성자는 무조건 해당 interface를 도입한 클래스 내에 size, pop(), push()를 만들어주어야 합니다. 그리고 약속한대로 코드 사용자는 interface에 지정해준 public/readonly 데이터나 메소드를 클래스 밖에서 사용할 수 있습니다.

• size: 스택의 크기로, 스택의 길이를 알 수 있습니다.
• pop(): 스택의 가장 마지막 노드를 제거하고 노드의 값(value)을 리턴합니다.
• push(): 스택의 가장 마지막에 새로운 노드를 추가합니다.

위에서 말한 노드를 만들기 위해서 StackNode의 타입을 지정해주겠습니다.

type StackNode = {
    readonly value: string;
    readonly next?: StackNode;
  };

StackNode라는 타입을 지정받은 경우, 위와 같은 데이터를 포함해야 합니다.

• value: 노드의 값을 의미합니다.
• next: 해당 노드의 다음 노드가 무엇인지를 가리킵니다.

다음으로는 클래스를 살펴봅시다.

  class StackImpl implements Stack {
    private _size: number = 0;
    private head?: StackNode;

    get size() {
      return this._size;
    }

    push(value: string) {
      const node: StackNode = {
        value,
        next: this.head,
      };
      this.head = node;
      this._size++;
    }

    pop(): string {
      if (this.head == null) {
        throw new Error('Stack is empty!');
      }
      const node = this.head;
      this.head = node.next;
      this._size--;
      return node.value;
    }
  }

클래스 내부에서 우선 _size를 0으로 초기화해줍니다. 그리고 외부에서 _size에 접근하지 못하도록 private으로 지정한 뒤, 게터함수(get())를 사용합니다. 게터함수를 사용하면, 외부에서 size 정보를 요청했을 때, _size를 리턴하여 private한 _size 정보를 가져올 수 있습니다. 이 때, readonly를 사용하면 클래스 내부에서조차 값을 변경할 수 없기 때문에 private과 get()을 사용합니다.

push() 에서는 value를 인자로 받아서 StackNode 타입의 node를 생성합니다. node 내부에는 인자로 받은 value를 value에 저장하고 next로 현재 헤드(this.head)를 가리킵니다. 첫 번째로 push하는 경우에는 헤드에 아무 것도 없기 때문에 null 인 this.head가 저장됩니다. 그 후 생성된 node를 this.head에 저장합니다. 이 과정은 다음 노드가 들어왔을 경우 this.head에 저장된 노드를 다음노드가 가리키기 위해 저장하는 것입니다.

pop() 에서는 우선 스택이 비어있는 상태인지 확인합니다. this.head가 null인 상태라면, 스택이 비었다는 에러를 내보냅니다. 스택에 노드가 있다면(비어있는 상태가 아니라면), 기존의 헤드를 새로운 노드에다가 저장한 뒤, 기존 헤드는 node의 next에 저장합니다. 가장 위에 있는 아이템을 무시하는 방법입니다.

실제로 인스턴스를 생성하여 콘솔에 출력해보면 잘 동작하는 것을 확인할 수 있습니다.

자바스크립트는 넷스케이프 커뮤니케이션즈에서 웹페이지의 보조적 지능을 수행하기 위해 만든, 브라우저에서 동작하는 경량 프로그래밍 언어이다.

자바스크립트가 탄생한 뒤 얼마 지나지 않아 자바스크립트의 파생 버전인 JScript가 출시되면서 여러 문제점이 생긴다.

🍎 자바스크립트의 표준화

JScript와 Javascript의 호환 문제로 인해 ECMAScript라는 표준 자바스크립트가 생겨났고, 현재 ECMAScript가 범용 프로그래밍 언어로써 갖춰야할 기능들은 2015 ECMAScript6부터이다.

마이크로소프트에서는 자바스크립트의 파생 버전인 JScript를 만들었는데, JScript와 자바스크립트는 표준화되지 못했다. 각자의 언어로만 동작하는 기능들이 점점 늘어나면서 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 등장했다. 크로스 브라우징 이슈, 호환 문제를 막기 위해 넷스케이프 커뮤니케이션즈는 ECMA인터내셔널에 자바스크립트의 표준화를 요청했다. 자바스크립트는 ECMAScript로 명명되고, ECMAScript 2015(ES6)에 범용 프로그래밍으로서 필요한 기능들을 대거 도입하였다. ES6에 새로 도입한 기능들은 다음과 같다:

• let/const
• 클래스
• 화살표 함수
• 템플릿 리터럴
• 디스트럭쳐링 할당
• 스프레드 문법
• rest 파라미터
• 심벌
• 프로미스
• map/set
• 이터러블
• for...of
• 제너레이터
• Proxy
• 모듈 import/export
  

🍎 자바스크립트 성장의 역사

초기 자바스크립트는 웹페이지의 보조적인 기능을 수행하는 용도로만 사용됐지만, 자바스크립트가 성장하면서 이제는 크로스 플랫폼을 위한 가장 중요한 언어로 대두되고 있다.

원래는 대부분의 로직이 웹 서버에서 실행되었고, 브라우저는 서버에서 전달받은 HTML과 CSS를 렌더링하는, 서버 사이드 렌더링(Sever Side Rendering) 방식이었다.

Ajax 🌟

자바스크립트를 이용해 서버와 브라우저가 비동기적으로 데이터를 교환하는 통신 기능이다.

이전에 웹페이지는 서버 사이드 렌더링 방식이었기 때문에, 화면이 전환될 때마다 새로운 HTML 코드를 전달받아 웹페이지를 새로 렌더링하였다. 이를 Multi Page Application(MPA)라고 한다. 하지만 MPA는 변경할 필요가 없는 부분까지 전부 다시 렌더링했기 때문에 성능도 떨어지고, 렌더링할 때마다 웹페이지가 깜빡이는 현상이 생겼다. Ajax는 이러한 문제점을 획기적으로 바꿨다. 웹페이지에서 변경할 필요가 없는 부분은 다시 렌더링하지 않고 필요한 부분만 렌더링하게 되었다. 이를 Single Page Application(SPA)라고 한다.

jQuery

jQuery가 등장하면서 DOM을 더욱 쉽게 제어하고 크로스 브라우징 이슈도 어느정도 해결할 수 있게 되었다.

V8 자바스크립트 엔진

더욱 좋은 웹 애플리케이션을 만들기 위해 구글에서 만든, 빠르게 동작하는 자바스크립트 엔진이다.

V8이 등장하면서 자바스크립트는 데스크톱 애플리케이션과 유사한 사용자 경험을 제공하는 웹 애플리케이션 프로그래밍 언어로 정착하였다. 또한 V8 엔진으로 자바스크립트가 발전하면서 웹 서버에서 수행하던 로직들이 클라이언트 사이드로 옮겨갔고(Client Side Rendering), 프로엔트엔드 영역이 빛을 보게 되었다.

Node.js

Node.js는 V8 엔진으로 빌드된 자바스크립트 런타임 환경이다.

Node.js는 이전에 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 한 자바스크립트 실행 환경이다. 서버 사이드 애플리케이션에 주로 활용되고, 이에 필요한 모듈, 파일 시스템, HTTP등 빌트인 API 등을 제공한다. Node.js는 비동기 I/O를 지원하고, 단일 스레드 이벤트 루프 기반으로 동작함으로써 요청 처리 성능이 좋다. 그러므로, 데이터를 실시간으로 처리하기 위해 I/O가 빈번하게 발생하는 Single Page Application(SPA)에는 적합하지만, CPU 사용률이 높은 애플리케이션에는 권장하지 않는다.

SPA 프레임워크 🌟

더욱 좋은 성능을 위해 복잡해진 개발 과정에 맞추어 다양한 패턴, 라이브러리가 등장했고, SPA를 구현하기 쉬운 확장성 좋은 프레임워크도 나오기 시작했다.

이전과 다르게 데스크톱 애플리케이션과 견주어봐도 손색없는 웹 애플리케이션이 요구되면서 개발 규모나 복잡도도 상승했다. 복잡해지 개발에 따라 많은 패턴과 라이브러리가 출시됐고, 변경에 유연하면서 확장성이 좋은 아키텍쳐인 프레임워크가 등장하였다. Component Based Developement 방법론을 기반으로 한 SPA가 대중화되면서 Angular, Vue, React, Svelte 등 다양한 SPA 프레임워크/라이브러리가 사랑받고 있다.

🍎 자바스크립트와 ECMAScript

ECMAScript는 자바스크립트의 표준 문법으로 핵심 문법을 규정하고 있고, 자바스크립트는 ECMAScript와 클라이언트사이드 Web API를 아우르는 개념이다.

ECMAScript는 자바스크립트의 표준 사양으로 각 브라우저 제조사는 ECMAScript 사양을 준수해서 브라우저에 내장되는 자바스크립트 엔진을 구현한다. ECMAScript에는 다음과 같은 문법을 규정한다:

• 값
• 타입
• 객체와 프로퍼티
• 함수
• 표준 빌트인 객체

자바스크립트는 기본 뼈대인 ECMAScript와 브라우저가 별도로 지원하는 클라이언트 사이드 Web API등을 아우르는 개념이다. 클라이언트 사이드 WEb API는 다음과 같은 것들을 포함한다:

• DOM
• BOM
• Canvas
• XMLHttpRequest
• fetch
• requestAnimationFrame
• SVG
• Web Storage
• Web Component
• Web Worker
  

🍎 자바스크립트의 특징 🌟

인터프리터 언어, 멀티 패러다임 프로그래밍언어, 프로토타입 기반 언어

자바스크립트는 다양한 특징들이 있지만 대표적이 특징으로는 아래와 같은 것들이 있다:

1) 인터프리터 언어 개발자가 별도의 컴파일 작업을 수행하지 않고 런타임에 한 줄씩 코드를 바이트코드로 변환하면서 실행한다. 최근의 자바스크립트 엔진은 컴파일러와 인터프리터의 장점을 결합하여 비교적 처리 속도가 느린 인터프리터 언어의 단점을 해결했다.

2) 멀티 패러다임 프로그래밍 언어 자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다.

3) 프로토타입 기반 언어 자바스크립트는 클래스 기반 객체지향 언어보다 효율적이면서 강력한 프로토타입 기반의 객체지향 언어이다.

🍎 ES6 브라우저 지원 현황

인터넷 익스플로러를 제외한 대부분의 모던 브라우저가 ES6를 지원하지만 100% 지원하지는 않기 떄문에 해당 브라우저가 ES6의 특정 기능을 지원하는지 확인해야 한다. 만약 지원하지 않는 최신 기능을 사용했거나 구형 브라우저를 고려해야한다면, 를 사용해 ES6 이상의 사양으로 구현한 소스코드를 다운그레이드해야 한다.

프로그래밍이란 0과 1밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업이다.

컴퓨터에 주어진 문제에 대한 실행을 요구하기 위해서는, 문제 해결 능력이 요구된다. 문제를 해결하기 위해서는 문제를 명확하게 이해해야하고, 그렇기 위해서는:

• 복잡함을 단순하게 분해한다. (decomposition)
• 자료를 정리하고 구분한다. (modeling)
• 순서에 맞게 행위를 배열한다.

문제를 이해한 후 문제 해결 방안을 고려할 때 컴퓨터의 입장에서 문제를 바라볼 수 있어야 하며, 그것을 Computational Thinking (컴퓨팅적 사고)라고 한다. 컴퓨터와 사람은 사고하고 인지하는 방식이 다르기 때문에 컴퓨팅적 사고를 하기 위해서는:

• 논리적, 수학적 사고가 필요하다.
• 해결 과제를 작은 단위로 분해라고 패턴화해서 추출해야한다.
• 프로그래민 내에서 사용될 모든 개념은 평가 가능하도록 정의해야한다. (수치화!)
  

🍎 프로그래밍 언어

프로그래밍 언어란 컴퓨터와 대화하기 위해 사용되는 수단으로, 사람과 컴퓨터(컴파일러 혹은 인터프리터) 모두가 이해할 수 있는 약속된 형태의 인공어다.

문제를 해결했으면, 해결 방안을 컴퓨터에게 알려주어야 하는데 원래는 기계어로 명령을 전달했어야 했다. 하지만 사람이 기계어를 사용하는 것은 너무 어렵기 때문에 사람이 이해할 수 있는 프로그래밍 언어를 사용하여 컴파일러나 인터프리터라는 변역기를 통해 기계어로 변환한다. 프로그래밍 언어는 구문(syntax)과 의미(semantics)의 조합으로 표현한다.

아래는 기계어로 'Hello World'를 입력한 것이다.

7F 45 4C 46 01 01 01 00 00 00 00 00 00 00 00 00 02 00 03 00 01 00 00 00 35 40 B3 04 2C 00 00 00 00 00 00 00 00 00 00 00 34 00 20 00 01 00 00 00 00 00 00 00 00 40 B3 04 B2 0C EB 1C 62 00 00 00 62 00 00 00 05 00 00 00 00 10 00 00 48 65 6C 6C 6F 20 77 6F 72 6C 64 0A B9 4C 40 B3 04 93 CD 80 EB FB

자바스크립트와 같은 프로그래밍 언어를 사용하면 더 쉽게 표현할 수 있다.

console.log('Hello World');

🍎 구문과 의미

프로그래밍 언어에서 구문은 약속된 표현 방법(문법)이고, 의미는 그 속에 담긴 맥락이다.

프로그래밍 언어를 사용하기 위해서는 프로그래밍 언어의 문법을 배워야한다. 하지만 문법만 안다고 해서 완성되는 것이 아니라, 구문 속에 정확한 의미를 담아야한다.

const number = 'string';
console.log(number * number); // NaN

위와 같은 코드는 문법적으로는 전혀 오류가 없지만, 의미가 맞지 않다. 프로그래밍 언어의 문법에 부합하는 것은 물론이고, 문제(요구 사항)이 정확하게 수행되어야만 의미를 가진다. 프로그래밍의 문법에는 다음과 같은 것들이 있다:

• 변수: 값을 저장하거나 참조
• 연산자: 값을 연산하거나 평가
• 조건문과 반복문: 코드의 실행 순서 제어
• 함수: 재사용이 가능한 구문의 집합
• 객체, 배열: 자료의 구조화

🌟 프로그래밍은 요구사항의 집합을 분석해서 적절한 자료구조와 함수의 집합을 변환한 후, 그 흐름을 제어하는 것이다.

** 이 글은 모던자바스크립트 Deep Dive(이웅모 저)를 정리한 글입니다.