Selection과 Range

 안녕하세요? 김성중입니다.

 Google Web Speech API를 테스트하던 중, STT를 통해 변환된 텍스트를 획득하기 위한 방법으로 Selection을 사용하였습니다. Selection(MSDN은 TextRange)은 웹 페이지에서 텍스트 행위를 하고자 할 때, 마우스를 이용해 드래그를 하거나 글자 위에서 더블 클릭을 하는 이벤트를 자바스크립트 영역에서 획득할 수 있게 해주는 Web API입니다.

 예제 코드를 실행해보고 콘솔에서 선택된 텍스트를 직접 확인해 보세요.

 Selection은 window.getSelection()이나 다른 메소드의 호출로 생성되는 객체입니다. 그리고 이러한 Selection 객체는 사용자가 선택한 'range'로 표현됩니다. 보통 한 개의 range만 갖고 있고, 다음과 같은 코드로 가져올 수 있습니다.

var selObj = window.getSelection();    // Selection 객체
var range = selObj.getRangeAt(0);      // Range 객체

 선택된 값은 Selection 객체의 toString()을 호출해서 가져올 수 있습니다.


 저는 Web Speech API를 통해 사용자가 입력한 음성을 텍스트로 변환(Speech-To-Text, STT)한 다음, 해당 텍스트를 획득하기 위해 Selection 객체를 사용하였습니다.

if (window.getSelection) {
    window.getSelection().removeAllRanges();
    var range = document.createRange();
    range.selectNode(document.getElementById('final_span'));
    window.getSelection().addRange(range);
}

 위 코드는 음성 인식이 종료되었을 때 호출되는 코드입니다. 윈도우에 텍스트가 존재할 경우, 전체 텍스트를 삭제하고, range 객체를 새로 생성하여 Selection에 지정해주는 코드입니다. 이러한 방법으로 웹에서 Selection객체와 Range 객체를 사용하면 사용자를 대신해서 특정 텍스트 영역을 선택, 삭제 할 수 있고, 사용자가 임의로 선택한 영역의 텍스트도 가져올 수 있습니다.

감사합니다.



참조
MDN, https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection
MSDN, http://msdn.microsoft.com/en-us/library/ie/ms536401(v=vs.85).aspx

백준 알고리즘 1915 가장 큰 정사각형

안녕하세요.

전상수 입니다.

오늘은 가장 큰 정사각형 문제를 풀겠습니다.

입력이 들어왔을 때 1로 만들어 지는 가장큰 정사각형의 넓이를 구하면 되는 문제입니다.

 위와 같은 입력이 들어왔다고 예를 들어보겠습니다. 여기서 가장큰 정사각형의 길이는 2가 되겠죠.

어떻게 알수 있을까요? j,i 기준에서 세방향을 봅니다. 

세방향에서 각각 가지고 있는 정사각형 길이가 같다면 (j,i)에 이전 정사각형 길이 +1을 한 식으로 입력해 줍니다. 

아니라면 세방향 값중 가장 작은 값에 +1을 시켜줍니다.

위의 방식대로 풀어보면 

1 1 1  이라는 입력이 들어오면 DP에 저장 되는 값은 1 1 1 이 됩니다.

1 1 1                                                             1 2 2

1 1 1                                                             1 2 3

점화식을 세워보면 

1일때

DP[j][i] = min(DP[j-1][i], DP[j][i-1], DP[j-1][i-1]) 이 됩니다.

코드는 위와 같습니다.

DP는 설명하기가 너무 어려운것 같네요.. 질문있으시면 댓글 달아주세요!

백준 알고리즘 2133 타일 채우기

안녕하세요.

전상수 입니다.

오늘 풀어볼 문제는 타일 채우기 입니다.

푸는 방식이 생각이 안나면 까다로운 문제인데 풀어보겠습니다.

위의 그림과 같이 n x 3 크기의 벽을 2 x 1, 1 x 2 타일로 채우는 경우의 수를 구하는 문제입니다.

벽에 타일을 놓았다고 할때 만들어질 수 있는 타일의 경우의 수는 9가지 입니다.

◻︎◻︎  ◼︎◻︎  ◼︎◼︎  ◻︎◻︎  ◼︎◼︎  ◼︎◻︎  ◻︎◻︎  ◼︎◻︎  ◻︎◻︎

◻︎◻︎  ◼︎◻︎  ◻︎◻︎  ◻︎◻︎  ◼︎◼︎  ◻︎◻︎  ◼︎◼︎  ◼︎◼︎  ◼︎◻︎

◻︎◻︎  ◻︎◻︎  ◻︎◻︎  ◼︎◻︎  ◻︎◻︎  ◻︎◻︎  ◼︎◻︎  ◻︎◻︎  ◼︎◻︎   

여기서 4,6,7,8 의 경우가 이상하다고 생각하실 겁니다.  어떤식으로 저런 타일이 나왔냐면

4의 경우 ◼︎◻︎ 타일인데 왼쪽 한줄 완성된걸 지워버렸습니다. 6번도 마찬가지고, 7,8 번의 경우 4,6번에서 

              ◼︎◻︎

              ◼︎◼︎

파생되는 타일입니다.

1번 타일에서 갈 수 있는 타일은 1,2번이고, 

2번에서 갈 수 있는 타일은 4번,

3번에서 갈 수 있는 타일은 5,6 번 입니다. 

그러면서 3칸이 완성된 부분은 제거해 나갔습니다. 

완성된 코드를 보면 남은 타일의 줄(len)과 타일 패턴(state)으로 dp배열을 만들어서 사용했습니다.

그리고 남은 타일이 없을때 갯수를 증가 시켜주는 식으로 코드를 구현하였습니다.

감사합니다.

백준 알고리즘 11053 가장 긴 증가하는 부분 수열

안녕하세요. 전상수 입니다.

오늘도 DP문제 중에서 쉬운 문제에 속하는 문제를 풀어보겠습니다.

문제를 보면 수열 A가 있을때 가장긴 증가하는 수열의 길이를 구하는 문제입니다.

예를 들어 10, 20, 30, 40, 5, 6, 7, 8, 9, 10 이라는 수열이 있을 때 5,6,7,8,9,10 이 가장긴 증가하는 수열이 됩니다. 그래서 답은 6이 됩니다. 왜그런지 따로 설명은 필요없겠죠?

그럼 문제를 풀어보겠습니다.

예를 들어 풀어보면 10, 20, 10, 30, 20, 50 수열의 경우 50의 가장긴 증가하는 수열의 길이는

10, 20, 10, 30, 20( 50보다 작은 값 중에서 ) 중 가장 긴 증가하는 수열에서 + 1 을 한값과 같습니다.

수열을 arr 로 저장하고, 해당하는 인덱스에 가장긴 증가하는 수열의 길이를 DP로 저장하겠습니다.

이걸 식으로 나타내면 DP[n] = max(DP[n - 1] , DP[n - 2], DP[n - 3] , ..... , DP[1]) + 1 입니다.( arr[n-1] < arr[n] ,  arr[n-2] < arr[n], ... ,arr[1] < arr[n] 와 같이 수열의 값이 arr[n] 보다 작을때 입니다.)

코드는 아래와 같습니다.

주의 할 점을 보면
1. 수열의 마지막 수가 가장 긴 길이를 갖지 않는다.
2. 10, 20, 10, 30, 20, 50 에서 3번째 10처럼 이전 인덱스에 더 작은 값이 없는 경우 DP[인덱스]는 1을 가진다.

입니다.

감사합니다.

백준 알고리즘 11057 오르막수

안녕하세요. 전상수 입니다.

DP 알고리즘중 쉬운 문제에 속하는 문제를 풀어보겠습니다.

왼쪽에서 오른쪽으로 오름차순으로 올라가는 수를 오르막수라고 합니다.

12345 이런식으로 되는 수를 얘기하는데 이 문제는 특이하게도 같은 수가 연속해도 오르막수라고 합니다.

2234 의 경우 2->2(같은수라 오르막) 2-> 3(수가 증가하여 오르막) 3 -> 4(수가 증가하여 오르막)

왼쪽에서 오른쪽으로 증가하면서 지나가서 오르막 수 입니다.

3676의 경우 367까지는 오르막 이지만 7 -> 6 으로 내려가면서 오르막 수가 되지 않습니다.

DP배열을 만들때는 현재 상태를 저장해야 하는데 현재 상태를 저장하는데 필요한 변수를 보면 아래와 같습니다.

1. 현재 상태의 인덱스 (11119 에서 현재 상태의 숫자가 9라면 5가 되겠죠)
2. 현재 상태의 숫자 (11119 에서는 1 또는 9가 되겠죠)

1번을 i, 2번을 v로 하겠습니다.

현재 상태를 dp[i][v]라고 할때 이전에 올수 있는 수는 dp[i - 1][v와 같거나 작은수] 가 됩니다.

이걸 식으로 나타내면 dp[i][v] = dp[i - 1][v] + dp[i - 1][v - 1] .... + dp[i - 1][0] 이 될수 있습니다.

이런식을 제귀적으로 풀면 될 것 같습니다.

코드를 보면 아래와 같습니다.

서버란 무엇인가? - 물리 서버 / 논리 서버

안녕하세요. 유결입니다.

이번 포스트에서는 서버란 무엇인가에 대해 이야기하고자 합니다.
흔히 말하는 서버(Server) 여러분은 한마디로 딱 정의해서 말할 수 있나요?
서버의 사전적 의미로는 아래와 같습니다. [네이버 사전 인용]

1. In computing, a server is part of a computer network which does a particular task, for example storing or processing information, for all or part of the network.

2. In tennis and badminton, the server is the player whose turn it is to hit the ball or shuttlecock to start play.

3. A server is something such as a fork or spoon that is used for serving food. salad servers.

서버는 특정 역할을 하는 컴퓨터 네트워크의 한 부분이기도 하며, 테니스나 베드민턴에서 서브를 시작할 차례인 사람을 서버라고도 하고, 음식점에서 서빙하는 사람을 서버라고도 합니다.

여기서 제가 이야기하고자 하는 서버는"특정 역할을 하는 컴퓨터 네트워크의 한 부분" 입니다.


- Physical/Logical Server


서버는 크게 물리적인 서버와 논리적인 서버로 나눌 수 있습니다.
위 그림에서 보듯, 사용자의 입력 및 HTML 생성을 담당하는 소프트웨어적인 'Web Server'와 요청에 따라 데이터를 제공하는 데이터베이스 기능을 제공하는 'DB Server'는 '논리적인 서버'라고 합니다. Web Server와 DB Server를 동작 시키는 물리적인 컴퓨터 자체는 '물리적인 서버'라고 합니다.

이 밖에도 Hypervisor 위에 올라가는 VM(Virtual Machine)도 서버 역할을 하며, 서버 역할을 하는 VM을 서버라고도 부르기도 합니다.

논리적인 서버는 IT전공자나 관심이 있는 분이면 대부분은 어느정도 알고 계실 것이라 생각합니다. 그렇다면, 물리적인 서버는 도대체 어떻게 생겼을까요?

- Physical Server Type

물리 서버는 크게 Tower, Rack, Blade 타입으로 분류 할 수 있습니다. Tower 타입은 대부분 익숙한 모양이죠? Rack 타입은 *Data Center에서 일반적으로 사용되며, Blade 타입은 분산처리, 클러스터링, 고속 연결 등을 고려하여 만들어진 서버입니다.
일반적으로 각각의 타입에 따라 용도가 다르고 가격도 천차만별 입니다.

- Data Center

*Data Center - 데이터를 모아두는 시설로 서버를 적게는 수백 대, 많게는 수만 대 동시에 운영하며 온라인 사업에 필수적인 설비를 제공하며, 고객과 기업 정보를 보관하고 서비스를 가능하게하는 시설입니다. 전기 사용량이 많은 데다 계속 가동해야 하기 때문에 ‘전기 먹는 하마’라고도 불립니다.



물리 서버의 구조와 동작은 일반 PC와 크게 다르지는 않습니다.
이 포스트에서는 Rack 타입 서버에 대해 좀 더 알아보고자 합니다.

- Rack Type Server (HP ProLiant DL360 Gen9)

Rack 타입 서버에도 수많은 종류가 있지만, 그 중 HP ProLiant DL360 Gen9 모델에 대해 알아보겠습니다.

Front View

1. Access Panel 

   뚜껑 내지 덮개라고 보시면 됩니다. 이름이 access panel로 지어진 것은 Rack에 마운팅하는 부분이기 때문(?)이라고 생각합니다.

2. Serial Label Pull Tab

3. HPE Universal Media Bay or NVMe

   직접 모니터, 키보드, 마우스 등을 연결해서 서버를 관리하게 되는 부분입니다.

4. Power On/Standby button and system power LED button

5. Health LED

6. NIC Status LED

   (4.~6.) 전원 버튼과 서버의 전원, NIC 상태 등이 정상인지 확인하는 LED 입니다.
   (ex. 정상이면 초록색, 이상이 있으면 노란색)

7. USB 3.0 Connector

8. Unit Identification Button & LED

   UID라고 하며 단순히 켜고 끄는 LED이자 버튼입니다. (서버의 전면부/후면부에 모두 있어, 전면부에서 켜고 후면부에서 끌 수 있음)

서버를 관리할 때, Rack에 수많은 서버가 마운팅 되어있기 때문에, 전면부에서 관리하다가 후면부로 가면 어떤 서버인지 헷갈림을 방지 할 수 있습니다.

   

9. SAS/SATA/SSD/NVMe Drive Bays

   여러 Disk를 장착하는 Bays 입니다.

Rear View













1. PCIe 3.0 Slots 1-3
   PCI(Peripheral Component Interconnect) 주변기기 포트

2. HPE Flexible Slot Power Supply Bay 2
3. Power Supply 2 Status LED
4. Power Supply 2 C13 Connection
5. HPE Flexible Slot Power Supply Bay 1
6. Power Supply 1 Status LED
7. Power Supply 1 C13 Connection
   (2.~7.) Power Supply가 2개 장착되며 상태 LED와 C13 전원 2개가 연결됩니다.

8. Video Connector

9. Embedded 4x1GbE Network Adapter
   내장 Network Adapter입니다.

10. Dedicated iLO 4 connector
   iLO(Intergrated Lights-Out)는 HP에서 만든 독자적 임베디드 서버 관리 기술로서, Network Adapter와 독립된 네트워크를 갖고 HTTPS로 웹을 통해 서버를 원격 제어 가능하게 합니다. 로컬 화면과 동일하게 원격가능. 즉, OS없이 부팅과정에서도 원격 가능

11. Serial Port Connector (Optional)

12. USB 3.0 Connectors (2)

13. Unit Identification LED

14. FlexibleLOM bay (Optional)
   추가 Network Adapter 장착 가능

1. 5 Standard Fans Ship for 1P and 7 Standard Fans Ship for 2P

   최대 7개의 펜 장착 가능

2. HPE Smart Storage Battery (Optional)

   Smart Storage Battery는 서버가 갑작스럽게 전원이 끊겼을 때 Write Cache(휘발성)에 임시 저장된 데이터를 보호하기위해 전력을 공급하는 역할을 합니다.

3. 2 Processors with HPE Smart Socket Guide

   2개의 Processor 장착 가능

4. MicroSD card slot

5. Dual Internal USB 3.0 connector

6. HPE Flexible Smart Array or Smart HBA (Optional)

   HBA(Host Bus Adapter)를 장착하는 부분

7. 2 HPE Flexible Slot Power supplies

8. Secondary PCIe 3.0 riser for PCIe slot 3 (requires CPU 2)

9. Embedded 4x1Gbe NIC

내장 Network Adapter

10. Primary PCIe 3.0 riser for PCIe slots 1 & 2

11. FlexibleLOM Bay (Optional)

  추가 Network Adapter 장착 부분

12. Embedded SATA Controller ports

   내장 SATA 컨트롤러 포트

13. 24 DDR4 DIMM slots (12 per processor)

   Processor당 12개의 메모리 장착 가능 (총 24개)

이상, 서버란 무엇인가에 대해 이야기해봤습니다. 서버는 어떤 것이라고 명확하게 정의하기는 어려운 것 같습니다. IT에 종사하는 분야마다 의미하는 바가 다르기도 하고.. 예를들면, 네트워크/서버 엔지니어와 서버/클라이언트(SW) 개발자가 말하는 서버는 조금은 다른 의미를 갖을 수 있다고 생각합니다.

다음에는 시간이되면 서버의 동작 원리에 대해 포스팅해보려 합니다.
여기까지 읽어주셔서 감사합니다.^^

Unity Particle System 이용하기

안녕하세요. 이관호입니다.

이번 포스트에서는 게임의 뷰를 담당하는 파티클을 사용하는 방법에 대해서 알아보도록 하겠습니다.

가장 먼저 파티클이 무엇이냐 ... 를 생각하시는 분이 있을텐데요.

파티클은 불꽃, 먼지, 폭발 등의 이펙트라고 생각하시면 쉬울거 같애요!

많은 렌더링과 수학적 함수가 들어가서 소규모의 인원으로 진행하는 프로젝트에서는 하나하나 만들려고 하면 인력과 시간 소모가 굉장히 많이 일어날 것입니다.

그래서! 유니티에서는 파티클 시스템이라는 것을 제공해주고, 왠만한 이펙트 효과는 모두 해결할 수 있도록 제공해주고 있습니다.

또한, 이미 만들어진 파티클을 가져와서 사용하여도 큰 문제는 없으니 게임 개발 후에 화려한 효과를 덧붙이기 원하는 분들에게는 최고의 시스템이라고 할 수 있겠죠??

본 포스트에서는 간단하게 사용하는 방법 정도만 적을 것입니다. 자신에게 맞는 심화된 효과를 원하시는 분은 독스를 참고하여서 효과를 만드시거나, 이미 만들어진 효과를 가져다 사용하시는 것을 추천드립니다. (뭐 난 코딩과 수학의 천재여서 직접 만들겠다 하시면 말리지는 않겠습니다 ..)

자 그럼 시작합니다!

1. 파티클을 만들어보자!

가장 먼저 파티클을 만들어 보겠습니다. 굉장히 간단해요!

메뉴 - GameObject - Particle System 을 선택하게 되면

위와 같은 가장 기본적인 파티클 시스템이 생성되게 됩니다.

하얀 먼지들이 위로 올라가는 것을 보실 수가 있어요!

그리고 오른쪽에 보시면 여러 메뉴가 있는 것을 보실 수 있습니다.

위로 올라가는 하얀 먼지를 저 메뉴의 값 설정을 통해 바꾸는 것으로 왠만한 효과는 만들 수 있습니다.

예를 들어

간단하게 Shape 의 속성을 살짝 바꿔보게 되면

위로만 올라가던 하얀 먼지들이 사방으로 뻗혀 나가는 것을 보실 수 있습니다!

좀더 이것저것 건들여 보게 되면 위와같이 흙먼지가 튀기는 모습을 볼 수도 있네요!

파티클 시스템의 각 속성이 무엇을 의미하는지는

http://docs.unity3d.com/kr/current/Manual/PartSysMainModule.html

위 유니티 독스를 참고하면서 개발을 하시면 될 것 같습니다!

2. 만들어진 파티클을 가져와 보자!

위에서 파티클 시스템을 이용하여 간단한 효과들을 만들 수 있다는 것을 살펴보았습니다.

근데도 이마저도 귀찮다 하는 분들이 분명히 계시리라 생각합니다 ... ㅠㅠ

우리의 훌륭한 유니티는 그런 분들을 위하여서도 기본 패키지를 제공해 줍니다!!

Asset - Import Package - ParticleSystem 을 클릭하시고 잠시만 기다리시게 되면

위와 같은 작은 창이 하나 생깁니다.

저는 싹다 가져오기 위해 모두 체크된 상태에서 Import를 눌러 봤습니다.

자! Import를 누르시고 잠시 기다리시면 위와 같이 프로젝트 폴터 2개가 생성되신 것을 볼 수 있습니다.

그중 Standard Assets - ParticleSystems - Prefabs로 들어가시면 완성된 파티클을 몇 가지 보실수 있습니다!

원하는 파티클을 드래그하시게 되면

반짝반짝 예쁜 구슬을 보실 수 있어요!!

그리고 이 구슬은 Particle System을 사용했는지 인스펙터창을 보시면 Particle System을 보실 수 있는데, 여기서 살짝 조작을 해주시면 구슬에서 빨간 먼지가 튀어 오르는 것을 보실 수 있습니다!

Flair라는 파티클을 넣어 보았는데 불꽃이 예쁘게 튀기네요. 불꽃놀이 등에 이 효과를 사용하면 좋을거 같네요!

근데 난 이 정도로도 만족하지 못한다... 난 지갑전사여서 돈으로 해결하겠다..!! 하시는 분들도 ... 있으실 겁니다 ...

그런 분들을 위해 전 세계의 유니티 개발자들이 만든 훌륭한 파티클 ... 에셋 스토어가 있죠

에셋 스토어에서 particle 을 검색하시면 다양한 파티클이 나오는데 무료는 얼마 없더라구요 .. 전 무료여도 효과가 굉장히 좋다고 느꼈는데 이로도 만족하지 못하시는 분들은 유료 효과를 구매하셔서 사용하시면 보다 나은 파티클을 감상하실 수 있습니다!!

 3. 파티클을 사용해보자!

이때까지는 파티클을 불러와서 속성 조정 등만을 해보았습니다.

그런데 파티클이라함은 무언가 폭발하거나, 캐릭터가 움직이거나 할 때 나오는 것인데 ... 그럴때는 어떻게 사용하냐는 생각을 하실 수 있습니다.

여기서는 방법이 여러가지가 있고, 그중 한개만 간단히 소개해 드리겠습니다.

우선 유니티 스크립트 개발을 어느 정도 해보신 분이라고 가정하겠습니다.

C#을 기준으로 스크립트에

public GameObject explosion;

를 만들게 되면 해당 스크립트가 부착된 오브젝트에 하나의 게임 오브젝트를 삽입할 수 있습니다.

감이 오시나요? 그렇습니다. 만들어둔 파티클을 게임 오브젝트로 부착해주시면 됩니다.

그리고 콜리전, 무브 등의 각종 상태에 대해 해당 파티클을 on/off나 Instantiate/Destroy를 이용해서 구현해주시면 됩니다.