Baekjakka

이번에는 노드에 대해서 알아보도록 하겠습니다. ( 참고서 : Node.js 인 액션 )

먼저 노드란 무엇일까요? 노드는 2009년에 첫선을 보였는데요 노드의 공식 웹사이트(http://www.nodejs.org)에서는 노드를 "크롬의 자바스크립트 실행 환경에 기반을 둔 빠르고 확장성 있는 네트워크 애플리케이션을 만들기 위한 플랫폼"이라고 정의하고 있습니다. 노드는 이벤트 주도 방식과 논블럭킹 I/O 방식을 사용하는데, 이는 가볍고 효율적이며 분산 환경에서 실행되는 데이터 집약적인 실시간 애플리케이션에 매우 적합합니다.

☞ 노드는 자바스크립트 기반입니다

노드는 구글 크롬에 탑재된 V8 가상 머신을 서버 프로그래밍에 사용하는데요 V8은 바이트코드를 실행하거나 인터프리터를 사용하는 중간 과정을 없애고 네이티브 기계어로 컴파일하는 방식으로 노드에 상당한 성능 향상을 가져왔습니다. 또한, 노드가 서버상에서 자바스크립트를 실행하기 때문에 얻을 수 있는 이점이 있습니다.

• 개발자는 하나의 언어로 웹 애플리케이션을 개발할 수 있기 때문에 서버와 클라이언트를 넘나드는 비용을 줄일 수 있습니다.

• JSON은 보편적인 데이터 교환 포맷으로 자바스크립트에 바탕을 두고 있습니다.
• 자바스크립트는 NoSQL데이터베이스에서 사용되는 언어로 상호작용하기에 아주 적합합니다.
• 노드가 사용하는 V8 가상 머신은 ECMA스크립트 표준을 준수하고 있습니다. 다시 말해, 노드가 사용하고 있는 자바스크립트의 새로운 기능을 모든 브라우저가 지원할 때까지 기다릴 필요가 없습니다.

노드의 환경을 이해하기 위해 먼저 가장 친숙한 자바스크립트 환경인 '브라우저'에 대해서 알아보도록 하겠습니다.

☞ 비동기와 이벤트 : 브라우저

노드는 서버 측 자바스크립트에 이벤트 주도 방식과 비동기 플랫폼을 제공합니다. 이는 브라우저가 클라이언트에서 자바스크립트를 사용할 수 있게 한 것 처럼 서버에서 자바스크립트를 사용할 수 있게 합니다. 노드가 동작하는 방식을 이해하려면 브라우저의 동작 방식을 이해하는 것이 중요합니다. 브라우저와 노드 모두 이벤트 주도 방식을 사용하며 논블럭킹 방식으로 I/O를 처리합니다.

☞ 비동기와 이벤트 : 서버

대부분 서버 측 프로그래밍의 일반적인 I/O 모델에 친숙할 것이라고 생각이 드는데요 간단히 PHP로 작성한 예를 들어 보겠습니다.

위 코드에서는 I/O가 실행되고 모든 데이터가 도착할 때까지 프로세스가 멈춥니다. 대부분 어플리케이션에서 이런 방식은 잘 동작하고 따라하기 쉽습니다.

그러나 I/O 실행이 지연되면 어느 부분에서든 10ms에서 수분까지 소요될 수 있습니다. 지연은 예상치 못한 원인에서 비롯될 수 있습니다.

1. 디스크의 유지보수 작업 수행으로 읽기/쓰기가 정지될 때

2. 데이터베이스의 부하가 높아져 질의 수행이 느려질 때

3. 알 수 없는 이유로 sitexyz.com에서 자원을 가져오는 것이 갑자기 느려졌을 때

만약 프로그램이 I/O 대기 중일 때, 서버가 더 많은 요청을 처리해야 한다면 어떻게 될까요? 대체로 이런 상황에서 멀티스레드 접근법을 사용할 것입니다.

일반적인 구현 방법은 하나의 연결당 하나의 스레드를 사용하고 여러 연결을 위한 스레드 풀을 만드는 것인데요 스레드는 프로세서가 하나의 태스크를 처리하기 위한 계산 작업 공간이라고 볼 수 있습니다. 대부분의 경우 스레드는 프로세스 내부에 포함돼 있으며 자신의 작업 메모리를 유지합니다. 그리고 각 스레드는 하나 이상의 서버 연결을 처리합니다. 이는 적어도 오랫동안 이렇게 일해 온 개발자에게는 자연스러운 방법처럼 들리겠지만, 어플리케이션 내부에서 스레드를 관리하는 것은 굉장히 복잡할 수 있습니다. 또한, 많은 수의 서버 연결을 동시에 처리해야 하는 경우라면 스레딩은 운영체제의 자원에 부담을 주게 됩니다. 스레드는 추가적인 RAM을 사용할뿐만 아니라 CPU의 문맥 교환이 필요합니다.

이를 설명하기 위해 엔진엑스(NGINX)와 아파치(Apache)를 비교하여 성능을 측정해 볼 수 있습니다.

엔진엑스(NGINX)는 아파치와 같은 HTTP 서버지만 I/O 대기가 있는 멀티 스레드 접근법 대신 브라우저나 노드처럼 비동기 I/O와 이벤트 루프를 사용하고 이러한 방식을 선택함으로써 엔진엑스(NGINX)는 더 많은 요청과 클라이언트 연결을 처리할 수 있게 됐고, 요청에 더욱 빠르게 반응하는 솔루션으로 자리매김했습니다.

노드에서 I/O는 대부분 주 이벤트 루프 외부에서 수행되어 엔진엑스처럼 효율적이고 요청에 잘 반응 할 수있는 상태가 되게 합니다. 이런 방식에서 프로세스는 I/O 집약적이기 어려운데 수행이 멈춰진 상태에서도 I/O 지연 때문에 서버가 장애를 일으키거나 자원을 소비하지 않기 때문입니다. 이런 이유로 서버는 일반적으로 수행 성능을 가장 저해하는 부분에서 짐을 덜 수 있게 되었습니다.

이번에는 자바스크립트의 기초에 해당하는 변수에 대해서 알아보겠습니다.

변수에 대해 간단히 설명하자면 변수는 값을 저장하는 역할을 합니다. 

그리고 선언한 변수에 다른 값을 저장하게 되면 기존의 값은 사라지고 새로운 값이 남게 됩니다. 간단하죠? 어렵지 않습니다.

그럼 변수를 선언하는 방법에 대해서 알아보겠습니다.

변수는 사용자가 임의의 단어로 선언할 수 있는데요 변수명을 정할 때 주의할 사항이 있습니다.

변수명 정하기

1. 영어와 숫자 그리고 특수 문자를 혼합하여 지정할 수 있습니다.

2. 한글은 사용할 수 없습니다.

3. 숫자가 맨 앞에 올 수 없습니다.

4. 낙타등표기법(CamelCase)을 사용하면 좋습니다. ex) helloWorld, camelCase 

그럼 변수를 선언의 예를 들어 보겠습니다.

var는 변수의 선언을 의미하고 뒤에 a 는 변수의 이름을 의미합니다. 그리고 세미콜론(;)은 마침표와 같은 역할을 하고 a = 10; 은 변수 a 에 10이란 값을 저장한 것입니다. 만약 변수에 값이 담기지 않았을 때에는 undefined 라는 값이 초기값으로 할당되어 있습니다. 

변수에 숫자도 문자도 담는게 보이는데요 변수의 타입에 대해서 알아보겠습니다.

변수의 타입에는 기본타입과 참조타입이 있는데요.

기본 타입은 변수에 저장된 값을 실제로 변수가 가지고 있는 형태이고 참조 타입은 값을 포함하는 형태입니다.

참조 타입은 하나의 값을 여러 변수에 할당 할 수 있습니다. 즉, 같은 값을 가지고 있는 경우 한 곳에서 수정하면 다른 곳에도 영향을 줄 수 있습니다.

그럼 기본타입과 참조타입의 종류를 보겠습니다.

기본타입의 종류

참조타입의 종류

변수에 대해서 알아봤는데요. 기본타입에 대해서는 크게 어렵지 않을거라 생각됩니다. 

그리고 지금은 참조 타입에 대해서는 아직 다 이해하지 못해도 괜찮습니다.

참고서적 : JavaScript+jQuery입문+실전북

지금까지는 유니티에서 제공되는 컴포넌트만 사용해봤었는데요.

게임오브젝트에 어떤 컴포넌트가 추가되는지에 따라서 그 게임오브젝트의 역할이 달라졌습니다.

유니티에서 컴포넌트를 직접 구현하고 싶을때에는 스크립트라는 것을 이용하는데요.

스크립트는 C#, ,javascript 등의 프로그램언어로 원하는 기능을 구현하게 됩니다. 혹시나 프로그래밍을 모르시더라도 걱정하지 마세요.

C#은 따로 강의가 제공되니 C#강의와 왔다갔다 하시면 됩니다.

그럼 본격적으로 스크립트를 만드는 방법에 대해서 알아보겠습니다.

우선 프로젝트 뷰에서 우클릭을 누르고 Create -> C# Script를 눌러줍니다.

그리고 스크립트 파일의 이름은 Ball 이라고 정해주겠습니다.

C# Script 파일을 더블클릭하면 Visual Studio 가 실행되는데요. Visual Studio는 프로그램을 작성하기위한 외부 프로그램입니다.

이제 스크립트를 확인해 보겠습니다.

우선 Ball 이라는 클래스가 보입니다. 클래스는 코드를 모아놓는 기본단위라고 기억하면 됩니다.

옆의 MonoBehaviour 는 유니티에서 클래스를 만들면 기본적으로 적어주어야 하는 코드라고 알고 있으면 됩니다.

그리고 void Start() 안에 코드를 작성하면 게임이 시작될 때 한번 실행되고

    void Update() 안에 코드를 작성하면 매 프레임마다 실행됩니다.

프레임은 영화에서 사용하던 용어인데요. 여러장의 사진을 빨리 넘겨서 보여주면 영화나 만화가 되죠? 그 여러장의 사진 한장한장을 프레임이라고 하는데요 유니티에서 공이 굴러가는것도 사실 매 프레임마다 공의 위치를 옮겨서 화면에 그려줘서 구현이 되는겁니다.

void Update() 에 코드를 넣으면 그 코드가 매 프레임마다 실행되면서 다양한 게임의 로직을 구현할 수 있습니다.

우선은 Start() 와 Update() 가 어떻게 동작하는지 알아보기 위해서 로그를 한번 찍어보겠습니다.

먼저 Start() 안에 Debug.Log("Start"); 를 입력해줍니다.

이렇게 입력을 해주고 저장을 해줍니다. 저장은 컨트롤S를 누르시거나 저장아이콘을 누르시면 됩니다.

위 코드는 Start라는 문자열을 콘솔에 찍어라 라고 하는겁니다.

 <<<< 저장하기

그리고 유니티로 돌아와서 게임을 실행해서 확인해 보겠습니다.

로그를 보기위해서 콘솔창을 열어줘야하는데요 콘솔창은 유니티의 메뉴에 window를 누르면 맨 아래에 console이 있습니다.

혹시나 못찾으시는 분들은 컨트롤+쉬프트+c 를 눌러주면 콘솔창을 볼 수 있습니다.

콘솔창이 나타났다면 게임을 실행해볼까요?

<5.콘솔창>

실행했더니 아무것도 나오지 않았네요. 사실 스크립트를 게임 오브젝트에 적용을 해줘야 스크립트가 실행이 됩니다.

그래서 Ball 스크립트를 눌러 끌고가서 게임오브젝트 Ball에 놓아줍니다. 그럼 Ball에 스크립트가 적용된게 보입니다.

스크립트는 원하는 게임오브젝트에 추가해주면 됩니다. 그리고 추가한 스크립트는 언제든지 삭제가 가능합니다.

그리고 실행을 하면 콘솔창에 Start가 게임시작할때 한번 찍히는게 보일겁니다.

<6.볼슼적용>

이번에는 Update() 에도 로그를 찍게 만들어 보겠습니다. 그런데 Update()는 매 프레임마다 실행된다고 했었죠? 

그래서 count라는 변수를 하나 선언해서 몇번이나 실행되는지 확인해 보겠습니다.

<7.Update>

콘솔 뷰를 보면 Clear가 있는데 Clear를 누르면 콘솔창이 깨끗하게 정리됩니다.

그리고 Clear on Play를 누르면 실행할 때 마다 콘솔창을 깨끗하게 만든후 실행하게 됩니다.

그럼 실행해 보겠습니다.

<8.Update>

콘솔을 보시면 맨처음에 스타트가 호출되고 Update옆의 숫자가 증가하면서 출력되는걸 확인해 볼 수 있습니다.

스크립트를 만드는 방법이었습니다.

끝!