Baekjakka

이번에는 단순한 이베트 주도 방식의 채팅 어플리케이션을 만들어 보면서 노드의 실용적인 측면을 살펴보도록 하겠습니다. 이번에 소개하는 상세한 내용 때문에 머리가 아프더라도 너무 걱정할 필요는 없습니다. 목적은 노드 개발에 대한 궁금증을 풀고 노드로 무엇을 할 수 있을지를 미리 본다고 생각하면 됩니다.

웹 어플리케이션을 개발해 본 경험이 있고 HTTP에 대한 기본적인 이해가 있으며 jQuery에 친숙하다는 전제하에 글을 쓰겠습니다.

먼저 진행 내용은 이렇습니다.

○ 어플리케이션의 동작 방식을 살펴본다.

○ 기술적인 요구사항을 살펴보고 어플리케이션 초기 설정을 진행합니다.

○ 어플리케이션에서 사용할 HTML, CSS, 클라이언트 측 자바스크립트를 서비스합니다.

○ Socket.IO를 이용해 채팅과 관련된 메시지를 처리합니다.

○ 어플리케이션 UI에 사용할 자바스크립트를 작성합니다.

▷어플리케이션 개요

만들 어플리케이션은 여러 사용자가 대화창에 메시지를 입력해 온라인에서 채팅할 수 있는 프로그램입니다. 한 사용자가 메시지를 입력하면 다른 모든 사용자에게 전송됩니다. 어플리케이션이 시작될 때 각 사용자에게 자동으로 닉네임이 주어지지만, 특정 명령어를 이용해서 닉네임을 변경할 수 있습니다. 닉네임을 변경하기 위한 채팅 명령어는 슬래시(/)로 시작합니다. 비슷한 방식으로 새로운 채팅방을 만들거나 기존 방에 참여할 때 채팅 명령어를 사용할 수 있습니다. 채팅방을 만들거나 참여하면 어플리케이션 상단의 가로 막대 영역에 새롭게 참여한 채팅방의 이름이 표시됩니다. 또한, 대화창 오른쪽에 있는 참여할 수 있는 모든 채팅방 목록에도 현재 채팅방의 정보가 표시 됩니다.

이 어플리케이션은 가장 단순한 기능만 있지만, 실시간 어플리케이션을 만드는데 필요한 주요 컴포넌트와 기반 기술을 소개하고 있습니다. 특히, 노드가 어떻게 정적 파일과 같은 일반적인 HTTP 데이터와 대화 내용과 같은 실시간성 데이터를 동시에 서비스 하는지 알 수 있습니다. 또한, 노드 어플리케이션의 구성 방식과 의존성 모듈 관리 방식도 보여줍니다.

▷어플리케이션 요구사항과 초기 설정

채팅 어플리케이션을 위해서는 다음과 같은 작업을 수행해야 합니다.

○ 정적 파일 서비스(HTML, CSS와 클라이언트 측 자바스크립트 등)

○ 서버에서 채팅과 관련된 메시지 처리

○ 사용자 브라우저에서 채팅과 관련된 메시지 처리

정적 파일을 서비스 하려면 노드에 포함된 HTTP 모듈을 사용해야 합니다. 또한, HTTP를 이용해 파일을 서비스 한다면 파일 내용뿐만 아니라 전송되는 파일의 종류도 포함하여 전송해야 합니다. 이 정보는 HTTP 헤더의 Contet-Type에 설정할 수 있으며 파일의 적절한 마임(MIME) 형식을 헤더에 추가해줍니다. 마임 형식은 mime이라는 서드파티 모듈을 사용해서 둘러 볼 수 있습니다.

mime : 전자 우편을 위한 인터넷 표준 포멧입니다. HTTP와 같은 통신 프로토콜에 사용되고 있습니다. 

(자세한 내용은 위키피디아 참고 : https://ko.wikipedia.org/wiki/MIME)

채팅과 관련되 메시지를 처리하기 위해 ajax를 이용해 서버로부터 데이터를 가져올 수 있습니다. 하지만 어플리케이션이 가능한 빨리 반응하게 하려면 기존의 ajax 방식을 사용해 메시지를 전송하는 방법을 피해야 합니다. ajax가 전송 체계로 사용하는 HTTP는 실시간 통신을 위해 설계된 것이 아닙니다. HTTP를 이용해 메시지를 전송하면 매번 새로운 TCP/IP 연결을 사용해야 합니다. 연결을 시작하고 종료하는데 시간이 소요되며 모든 요청마다 HTTP 헤더 정보를 보내야 하므로 전송해야 할 데이터 양도 많아지게 됩니다. 그러므로 HTTP보다는 실시간 통신을 지원하기 위해 설계된 양방향 경량 통신 프로토콜인 웹소켓을 이용하는 편이 더 좋습니다.

하지만 웹소켓을 사용하지 못하는 브라우저가 있을 때 다양한 대체 기능을 제공하는 인기 라이브러리인 Socket.IO를 활용해서 어플리케이션을 만들도록 하겠습니다. Socket.IO는 추가 코드나 설정 없이 대체 기능을 투명하게 처리합니다.

▷HTTP와 웹소켓 서비스

본격적으로 시작하기 전에 HTTP와 웹소켓을 동시에 처리하는 방법을 조금 알아보겠습니다. 이는 노드가 실시간 어플리케이션에 적절한 선택이 될 수 있는 이유이기도 합니다. 어플리케이션에서 채팅 메시지를 주고받을 때 ajax를 사용하지 않기로 했지만, 사용자의 브라우저에 그릴 화면을 보여줄 때 필요한 HTML, CSS, 클라이언트 측의 자바스크립트를 전송하려면 여전히 HTTP를 사용해야 합니다. 노드는 하나의 TCP/IP 포트를 이용해 HTTP와 웹소켓을 동시에 쉽게 서비스합니다. 노드 내부에는 HTTP 서비스를 제공하는 모듈이 있는데 익스프레스와 같이 노드의 내장 기능을 이용해 웹 서비스를 조금 더 쉽게 할 수 있도록 도와주는 서드파티 모듈이 많이 있습니다.

▷어플리케이션의 파일 구조 생성

어플리케이션을 제작하기에 앞서 프로젝트 디렉토리를 생성합니다. 주요 어플리케이션 파일이 디렉토리에 바로 저장됩니다.

lib : 서버 측 로직을 구현한 파일을 저장

public : 클라이언트 측과 관련된 파일을 저장

 ├ javascripts

 └ stylesheets

구조를 이렇게 만들었지만 노드는 특정 디렉터리 구조만을 고집하지 않습니다.

사용자가 생각하는 어떤방식으로도 어플리케이션 파일을 관리할수 있습니다.

디렉터리를 모두 생성했으면 어플리케이션의 의존성 모듈을 명시하는 방법을 자세히 알아보겠습니다.

▷의존성 모듈 명시

어플리케이션 의존성 모듈이란 어플리케이션에 필요한 기능을 사용하기 위해 설치해야 하는 모듈을 말합니다. 예를들어, MySQL 데이터베이스에 데이터를 저장하는 어플리케이션을 만들었다고 가정해보겠습니다. 노드 내부에는 MySQL에 접근할 수 있는 내장 모듈이 없으므로 이를 위한 서드파티 모듈을 따로 설치해야 하는데 이를 의존성 모듈로 볼 수 있습니다. 물론 의존성 모듈을 형식에 맞게 명시하지 않더라도 노드 어플리케이션을 만들 수 있지만, 의존성 모듈을 명시하는 것은 좋은 습관입니다. 의존성 모듈을 명시함으로써 다른 사용자가 어플리케이션을 사용하거나 여러 곳에서 프로그램을 실행해야 할 때 좀더 수월하게 사용 환경을 설정할 수 있습니다.

어플리케이션 의존성 모듈은 package.json 파일에 명시합니다. 이 파일은 항상 어플리케이션의 최상위 디렉터리에 있어야 합니다.

package.json 파일은 CommonJS 패키지 기술어 표준을 따르는 JSON 표현식을 사용하며 어플리케이션에 대한 설명을 담고 있습니다.

package.json

이 파일의 내용이 혼란스럽더라도 걱정할 필요는 없습니다. 그냥 단순히 어플리케이션의 정보를 담고 있는 파일이라고 생각하시면 됩니다.

name : 어플리케이션의 이름입니다.

version : 어플리케이션의 버전정보를 말해주는데 첫 버전이니 0.0.1로 설정했습니다.

description : 영어만 봐도 알 수 있듯이 어플리케이션의 대한 설명입니다.

dependencies : 의존성 모듈을 나타내는데요. 이 곳에 적힌 모듈을 확인해서 필요한 모듈을 설치할 수 있습니다. 반대로 필요한 모듈을 설치 받았을 때에 자동으로 이곳에 작성되기도 합니다.

그럼 이제 cmd창을 열어 우리가 만든 최상위 폴더로 이동해줍니다. cmd창에서 폴더를 이동하는 명령어는 cd 명령어 입니다.

최상위 폴더로 갔다면 npm install 이라는 명령어를 실행해봅니다.

디렉토리 구조를 만들고 의존성 모듈을 설치했으니 이제 어플리케이션 로직에 살을 붙일 준비가 되었습니다.

▷HTML, CSS, 클라이언트 측 자바스크립트 서비스

앞서 말했듯이 3가지 기능이 필요합니다.

○ 정적 파일 서비스(HTML, CSS와 클라이언트 측 자바스크립트 등)

○ 서버에서 채팅과 관련된 메시지 처리

○ 사용자 브라우저에서 채팅과 관련된 메시지 처리

먼저 정적파일을 서비스하기 위한 로직을 만들어 보겠습니다. 그리고 정적 HTML과 CSS파일을 추가하겠습니다.

정적 파일 서버를 생성하려면 노드에 내장된 몇가지 기능과 함께 파일의 MIME 타입을 판단할 수 있는 서드파티 mime모듈을 이용합니다.

가장 먼저 할 일은 프로젝트 최상위 폴더에 server.js 파일을 생성합니다.

이 파일은 노드의 HTTP 관련 기능과 파일시스템 연동, 파일 경로와 관련된 기능, 그리고 MIME 타입 판단 기능을 사용할 수 있게끔 합니다.

cache 변수는 캐시 파일 데이터를 다루는데 사용합니다.

server.js

▷DIRTy 애플리케이션 

DIRT는 노드를 적용하기에 적절한 형태의 어플리케이션인 데이터 집약적 실시간 애플리케이션(data-intensive real-time)의 앞글자를 딴 단어입니다.

노드는 I/O 부분에서 매우 가벼워졌기 때문에 한 파이프에서 다른 파이프로 데이터를 전송하는 프록싱(proxying)이나 셔플링(shuffling)에 적합합니다.

이는 서버가 많은 요청을 처리하는 중에도 여러 개의 연결을 유지할 수 있으며 메모리 공간을 적게 사용하도록 관리되기 때문입니다. 이처럼 노드는 브라우저와 같이 요청에 빠르게 반응하도록 설계됐습니다.

▷DIRTy의 기본요소

노드는 이벤트 주도와 비동기 방식을 기반으로 만들어졌습니다. 자바스크립트는 일반적인 서버 측 언어와 달리 표준  I/O 라이브러리를 가지고 있지 않다.

자바스크립트의 기반 환경이 이를 제공합니다. 가장 일반적이며 가장 많은 개발자가 사용하는 스크립트 환경은 이벤트주도와 비동기 방식을 사용하는 부라우저입니다. 노드는 다양한 종류의 네트워크 및 파일 I/O에 사용되는 핵심 모듈도 포함하고 있는습니다. 여기에는 HTTP, TLS, HTTPS, 파일시스템(POSIX), 데이터그램(UDP), NET(TCP)에 대한 모듈이 포함되어 있습니다. 핵심 모듈은 I/O 기반의 애플리케이션을 위한 기본적인 구성 요소만을 포함하여 일부러 작고 단순하며 하위레벨로 만들어졌습니다. 이를 기반으로 만들어진 서드파티 모듈은 일반적인 문제에 대한 훌륭한 추상화를 제공합니다.

▷플랫폼 vs 프레임워크

노드는 자바스크립트 어플리케이션을 위한 플랫폼이며 혼동해서는 안됩니다. 노드에 관한 일반적인 오해는 노드가 훨씬 낮은 계층임에도 불구하고 레일즈(Rails)나 장고(Django) 같은 스크립트의 프레임워크라고 생각하는 것입니다. 

이제는 노드를 이용해서 기본적인 서버를 하나 만들어 보도록 하겠습니다.

언제나 그렇듯 처음 시작할 때는 Hello world가 빠져선 안되겠죠? 그래서 Hello World HTTP 서버를 만들어 보도록 하겠습니다.

▷Hello World HTTP서버 ( node 설치 방법 )

노드는 일반적으로 서버를 구성하는데 많이 이용됩니다. 노드를 이용해 다양한 종류의 서버를 만드는 것이 매우 간단하기 때문입니다.

이는 아파치 HTTP 서버에서 PHP 어플리케이션을 올리는 것처럼 어플리케이션을 위해서 서버를 따로 두어야 했던 환경에 익숙한 사람에게는 이상하게 들릴 수도 있습니다. 노드에서는 서버와 어플리케이션이 같은 의미입니다.

그럼 모든 요청에 단순하게 'Hello World' 라고 응답하는 HTTP 서버 예제를 만들어 보겠습니다.

helloworld.js

요청이 들어오면 콜백 함수인 function(req, res)이 호출되어 "Hello World"라는 문장을 응답으로 보낸다. 이러한 이벤트 처리 방식은 브라우저에서 onclick 이벤트를 처리하는 방법과 유사합니다. 클릭은 어떤 부분에서든 발생할 수 있으며 이벤트가 발생했을 때 이를 처리하기 위한 함수를 만들어야 합니다.

이 예제에서 노드는 언제 요청이 들어오든 간에 응답하는 함수를 제공하고 있습니다. 이번에는 좀 더 명확하게 표시해 작성한 예입니다.

helloworld.js

▷스트리밍 데이터

노드는 스트림과 스트리밍 데이터 처리에도 많이 사용됩니다. 스트림은 배열과 같은 개념으로 생각할 수 있습니다. 다만 데이터가 여러 공간에 걸쳐 분산된 것이 아니라 시간의 흐름에 따라 분산된 것입니다. 쪼개진 데이터 조각이 하나씩 도착하므로 개발자는 데이터 전체가 준비될 때까지 기다렸다가 처리하는 대신 데이터가 도착하는 즉시 처리할 수 있어야 합니다. resource.json 스트림을 어떻게 처리하는지 살펴보도록 하겠습니다.

data 이벤트는 새로운 데이터 조각이 만들어질 때마다 발생합니다. 그리고 모든 데이터 조각을 다 읽었을 때 end 이벤트가 발생합니다. 데이터 조각은 크기가 정해져 있지 않으며 데이터의 종류에 따라 다릅니다. 읽기 스트림에 대한 하위레벨의 접근은 메모리 버퍼에 모든 데이터가 쌓일 때까지 기다리는 것보다 훨씬 효율적으로 데이터를 처리할 수 있습니다. 노드는 데이터 조각들을 쓸 수 있는 쓰기 스트림도 제공합니다. 그 중 하나가 바로 HTTP 서버에서 요청이 들어올 때 사용하는 응답(res)객체입니다. 

읽기와 쓰기 스트림은 하나로 연결되어 데이터 파이프를 구성할 수 있는데, 마치 셸 스크립트에서 |(파이프) 연산자를 사용하는 것과 비슷한 방식입니다.

이런 방식은 데이터 전체를 완전히 읽을 때까지 기다렷다가 쓰는 대신, 데이터를 읽어 들이는 즉시 쓸 수 있는 효율적인 방법을 제공합니다.

이전의 HTTP서버를 활용해서 클라이언트에 이미지를 스트리밍으로 전송하는 방법을 살펴보겠습니다.

이 짤막한 예제에서 파일(fs.createReadStream)로 부터 데이터를 읽는 즉시 클라이언트(res)에게 내보냅니다.(pipe)

이벤트 루프는 데이터가 스트림 되는 도중에도 다른 이벤트를 처리할 수 있습니다.

노드는 이러한 DIRTy의 기본적인 요소를 여러 유닉스와 윈도우를 포함한 다수의 플랫폼에 제공합니다.

특히 기반을 이루고 있는 비동기 I/O 라이브러리는 부모 운영체제와 상관없이 동일한 방식을 제공하므로 기기에 상관없이 프로그램을 이식하기 쉽고 필요할 겨우 다양한 장비에서 실행 할 수 있습니다.

▷요약
다른 기술과 마찬가지로 노드 역시 모든 것에 대한 해결책은 아닙니다. 노드는 그저 특정 문제를 해결하는데 도움을 주고 새로운 가능성을 열어 줍니다. 노드에 관해 한 가지 흥미로운 점은 시스템의 모든 분야 사람들에게 관심을 받는 다는 것입니다. 대부분 자바스크립트로 개발하는 클라이언트 측 프로그래머이고 그 외에 서버측 프로그래머와 시스템 레벨 프로그래머도 있습니다. 여러분이 어디에 속해있든 해당 분야에서 노드가 적합한 곳이 어딜지 이해하기 바랍니다. 다시 3줄로 정리해 보겠습니다.

 1. 자바스크립트 기반으로 만들어졌다.

 2. 이벤트와 비동기를 사용합니다.

 3. 데이터 집약적 실시간 어플리케이션을 위해 설계됐습니다.

출처 : node.js 인 액션

이번에는 노드에 대해서 알아보도록 하겠습니다. ( 참고서 : 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옆의 숫자가 증가하면서 출력되는걸 확인해 볼 수 있습니다.

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

끝!

유니티 게임 오브젝트 두번째 강의인데요.

저번 강의를 간단히 복습해보겠습니다.

게임 오브젝트 (Game Object)는 게임을 실행하면 나타나는 각각의 구성요소들을 가리킵니다.

그리고 오브젝트를 조작하는 법에 대해서 배웠었습니다.

오늘은 게임오브젝트를 조작하는 다른방법을 알아보겠습니다.

게임오브젝트 큐브를 하나 만들고 헤이에라키뷰에서 큐브를 선택합니다.

그러면 옆에 인스펙터 창에 큐브에 대한 정보들이 나타나게되는데요

인스펙터창을보면 Transform 이 있는데요 Transform은 큐브의 현재 위치를 나타내주는 XYZ값입니다.

XYZ의 값을 직접 수정해서 큐브의 위치를 옮길수도 있고 큐브를 선택하고 큐브의 화살표를 이용해 이동시켜도 XYZ의 값이 수정 됩니다. 그리고 Transform의 글자 X,Y,Z를 누르고 마우스를 좌우로 움직이면 XYZ의 값을 좀더 세밀하게 조작할 수 있습니다. 간단하죠?

이번에는 카메라와 라이트에 대해서 알아보겠습니다.

프로젝트를 처음만들면 Main Camera 와 Directional Light가 하이에라키에 기본적으로 포함되어 있는데요

아무래도 가장 필수적으로 필요한 요소기 때문이겠쬬?

유니티에서 게임을 만든다는건 씬에서 여러 게임 오브젝트를 구성해서 촬영세트장을 잘 만들고 거기에 플레이어라는 배우를 출연시켜서 카메라로 찍은다음에 게임으로 보는과정이라고 할 수 있습니다.

지금 씬에는 큐브 하나밖에 없지만 멋진 세트장이 만들어져 있다고 생각하고 카메라를 움직여 보겠습니다.

하이에라키에서 카메라를 더블클릭하고 줌아웃을 해보겠습니다.

줌아웃을 하다보면 피라미드를 옆으로 엎어놓은 모양을 볼 수 있습니다.
카메라는 피라미드안에 들어오는 영역을 찍어서 게임뷰에서 보여줍니다.
씬에서 오른쪽 아래를 보면 게임뷰에서 보일모습을 미리 보일 수도 있지만 게임뷰로 따로 볼 수도 있습니다.

지금 큐브가 카메라의 영역안에 있기 때문에 카메라에서는 큐브를 촬영한 모습을 게임뷰에 보여주고 있습니다.

카메라도 다른 게임오브젝트와 마찬가지로 위치를 움직일 수 있습니다.

다음은 라이트 인데요

모든 물체는 빛이 있어야 볼 수 있죠? 그래서 유니티에서는 다양한 조명방식을 제공하는데

이번에는 기본적으로 추가되어있는 디렉셔널 라이트에대해서 알아보겠습니다

디렉셔널라이트는 말 그대로 한쪽방향으로 빛을 쏘는건데요

유니티에서는 라이트의 빛을 반사하는 게임오브젝트를 카메라가 찍은화면을 가지고 게임뷰에서 보여줌으로써 우리는 게임화면을 만들어내게됩니다.

자 카메라 라이트 게임오브젝트의 관계를 이해하셨나요?

게임오브젝트에 대한 강의는 여기까지입니다.

유니티의 두번째강의는 유니티에서 게임오브젝트라고 불리는 것들에 대해서 알아보겠습니다.

게임 오브젝트(Game Object) : 게임을 실행하면 여러가지 구성요소들이 있는데요 플레이어가 있고 장애물도 있고 나무도 있습니다. 이런 하나하나를 유니티에서는 게임 오브젝트라고 부릅니다.

그럼 새로운 프로젝트를 만들고 시작하겠습니다. 새로운 프로젝트를 만들었다면 아래이미지와 같은 화면이 나옵니다.

<이미지>

하이에라키를 보면 두가지가 기본적으로 추가되어있습니다.

우선은 이 두가지는 두고 새로운 게임 오브젝트를 만들어 보겠습니다.

상단의 메뉴에서 GameObject -> 3D Object -> Cube 를 선택해줍니다.

그럼 화면에 큐브가 하나 생기는데요 새로운 오브젝트를 생성한 것입니다. 간단하죠?

그리고 하이에라키 뷰를 보면 큐브가 새로 생겼을 것입니다.

하이에라키 뷰는 게임 오브젝트의 목록이므로 새로운 게임 오브젝트가 생기면 목록에 표시해줍니다.

신 뷰 (#Scene) 에서는 큐브라는 게임 오브젝트의 실제 모양과 상태를 보여주고 있습니다.

각 화살표를 누르고 움직이면 화살표의 방향대로 큐브가 움직일 것입니다.

< 그림 2- 1> 신 뷰(#Scene) 에서 보이는 큐브의 모양

그리고 아래의 이미지<그림2-2>를 보면 왼쪽상단에 빨갛게 표시한 곳이 있습니다.

이 곳의 5개의 아이콘을 이용해서 게임 오브젝트의 위치, 회전, 모양 등을 변경할 수 있습니다.

그리고 각각의 아이콘들은 왼쪽에서 부터 단축키를 이용해서 qwer순으로 선택을 할 수 있습니다.

첫번째 아이콘 (Q)  :  손바닥 아이콘은 신(Scene)의 화면을 누르고 움직이면 화면이 원하는 방향으로 움직여집니다.

두번째 아이콘 (W)  :  두번째 아이콘을 누른상태에서 씬화면에서 드래그를 통해 게임오브젝트를 선택하거나 하이에라키 뷰에서 게임오브젝트를 선택하면 게임오브젝트에 빨강 파랑 초록색의 화살표가 나타나게 되는데요 이 화살표를 이용해서 게임오브젝트의 위치를 바꿀 수 있습니다.

세번째 아이콘 (E)  :  게임오브젝트를 선택하면 빨강 파랑 초록의 원이 그려지는데요. 원을 누르고 움직이면 원하는 방향으로 게임 오브젝트를 회전시킬 수 있습니다.

네번째 아이콘 (R) : 게임오브젝트를 선택하면 빨강 파랑 초록의 무언가가 생깁니다. 그 무언가를 누르고 드래그하면 오브젝트가 늘었다줄었다 합니다.

그리고 추가적으로 신뷰에서 알아두면 좋은 조작방법 두가지를 더 알려드리겠습니다.

1. 알트(Alt) 키를 누르고 화면을 움직이면 보는 방향이 바뀌게 됩니다.

2. 휠을 움직이면 줌아웃 줌인이 가능합니다.

그리고 각각의 아이콘들은 단축키가 있으니 누르기 귀찮다면 단축키를 외워사용하시면 더 편하게 이용할 수 있어요.

<그림 2-2> 신(#Scene) 뷰에서 사용하는 아이콘들 (왼쪽상단)

간단히 게임오브젝트가 무엇인지와 신뷰에서 게임오브젝트를 조작하는 방법을 알아봤는데요

게임오브젝트에 대한 내용이 조금 더 있습니다. 어렵지 않으니 천천히 따라해보세요.

끝!