분류 전체보기

[React] CSS를 적용하는 여러 방법

React는 다양한 라이브러리의 조합으로 생산성이 높아지는 자바스크립트 라이브러리이다. 따라서 스타일을 적용하는 방법에도 기존의 import를 사용하는 것 이외에 라이브러리를 사용하는 다양한 방법이 있다. Import 가장 기본이 되는 방법으로 Component에서 css파일을 바로 import // App.js import "styles.css"; const App = () => { return( ... ); } 가장 간단한 방법이기 때문에 적용하기는 쉽지만, 그만한 단점이 존재한다. 어플리케이션의 규모가 작은 경우에는 큰 영향이 없지만, 규모가 커질수록 컴포넌트가 많아진다. 그렇게 되면 css 파일을 관리하기도 어려워지며, 여러 컴포넌트에서 사용한 Class Name에도 중복이 발생할 수 있다. 그로..

[React] className

classnames? classnames는 CSS 클래스를 조건부로 설정할 때 매우 유용한 라이브러리이다. 또한, CSS Module을 사용할 때 이 라이브러리를 사용하면 여러 클래스를 적용할 때 매우 편리하다. 라이브러리이기 때문에 설치가 필요하다. $ yarn add classnames classnames 간략 사용법 import classNames from ‘classnames’; classNames(‘one’, ‘two’); // = ‘one two‘ classNames(‘one’, { two: true }); // = ‘one two‘ classNames(‘one’, { two: false }); // = ‘one‘ classNames(‘one’, [‘two’, ‘three’]); // = ‘o..

비헤이비어 트리 (Behavior Tree)

1. 비헤이비어 트리 소개 ​​비헤이비어 트리는 게임 AI같은 거를 빠르고 쉽게, 그리고 가독성도 좋고 재활용성도 좋게 만드는데 특화되어있다. FSM, HFSM이 상태가 많아지면 유지보수, 가독성 등을 잃게 되는 단점을 보완했다고 볼 수 있다. (FSM과 BT의 차이를 대략적으로 보여줌) 비헤이비어 트리는 HFSM과 마찬가지로 계층적인 특성을 띄고 있는데, (HFSM이랑 약간 유사한데, BT가 더 조직화 됐다고 보면됨.) 다만 HFSM처럼 각 상태에서 조건을 체크하고, 직접 상태를 이전시키는 것이 아닌, 각 노드는 True, False, (Running) 값을 조건에 따라서 결과값을 반환 하지만, 전이 자체는 다른 노드가 처리한다. FSM의 경우에는 A에서 B로 전이를 하려면, 해당 상태 내부에서 Set..

[Unity] 최적화 Batching, Draw Call, SetPass calls

Batching(배칭) 동일한 메테리얼을 공유하는 복수의 드로우콜을 하나로 묶어서 드로우콜하는 기법 Batching = Draw Call + SetPass calls Draw Call(드로우콜) CPU가 GPU에게 화면에 오브젝트를 그려달라고 요청하는 것 한프레임에서 오브젝트를 하나 그릴때 여러 정보들이 CPU에서 GPU로 전달 DATA > Storage(HDD,SDD,SD) > CPU Memory > GPU Memory 매 프레임 화면에 그려야 하기 때문에 값이 클수록 프레임에 부하가 걸린다. 적정개수 PC : 1000개 이상 가능 ~ 3000개 모바일 : 100개도 많다. 최신 디바이스는 200개까지가능 일반적으로 오브젝트 단위로 1개씩 증가, 쉐이더에 따라서 추가적으로 증가 SetPass calls..

[Unity] 생명 주기

Reset : 오브젝트를 생성 후 인스펙터 뷰에서 리셋을 눌러줄 때 실행된다. 객체의 속성을 초기 값으로 설정해 줄 때 사용한다. Awake : 스크립트가 실행될 때 한번만 호출된다. 모든 오브젝트가 초기화 된 후 호출되기 때문에 GameObject.Find 같은 명령문을 안전하게 사용할 수 있다. Awake 함수는 언제나 Start 함수 전에 호출되므로 초기화 순서를 정할 수 있게 한다. (Coroutine 사용 불가) OnEnable : 인스펙터뷰에서 체크를 통해서 게임 오브젝트를 활성화 할 때 사용된다. 활성화 할 때마다 호출 된다. Start : Update 함수가 호출되기 전에 한번만 호출된다. 다른 스크립트의 모든 Awake가 모두 실행된 이후에 실행된다. 스크립트가 활성화 되어 있어야한다. ..

[Unity] Mono 분석

Mono .NET Framework가 매우 유용한 개발환경이지만, 환경에 상관없이 Windows 프로그램을 구동시키자는 취지로 개발되었기 때문에 Windows 환경에만 제한되어 있었다. 이에 오픈 소스 개발자 그룹은 Linux/Mac 등의 Windows 환경 외에서도 .NET Framework를 사용하기 위해 Mono 프로젝트를 시작하였다. .NET Framework는 오픈 소스 프레임워크가 아니었기 때문에 ECMA International(국제 표준 기구)에 등록된 .NET Framework의 CLI를 분석하여 구현했다고 한다. 현재 Microsoft는 .NET Framework를 오픈 소스로 공개했을 뿐만 아니라, Mono의 메인테이너인 Xamarin을 인수하고, .NET Core라는 Windows,..

[Unity] 애니메이션 타입 legacy로 변경하기

1) 외부에서 import한 모델의 경우 import settings의 rig탭에서 애니메이션 타입을 선택할 수 있다. 2) 유니티에서 애니메이션을 생성한 경우에는 다른 방법으로 애니메이션 타입을 변경 해야한다. 아래 예에서 오브젝트의 애니메이션을 생성하였다. 3) controller와 anim파일이 생성되었고 4) 오브젝트에 animator 컴포넌트가 추가된 것을 확인할 수 있다. 5) 이 게임 오브젝트의 애니메이션 타입을 legacy로 변경하려면 먼저 인스펙터에서 아래이미지 우측상단에 표시한 아이콘을 클릭하고 debug를 선택한다. 6) 애니메이션(text.anim)를 선택하고 legacy에 체크하면된다(이 항목은 debug모드에서만 확인가능하다) 유니티에서 애니메이션 타입 legacy로 변경하기 (..

[C++] 싱글톤 패턴, Singleton Pattern

오직 한 개의 클래스 인스턴스만을 갖도록 보장하고, 이에 대한 전역적인 접근점을 제공합니다. (GoF의 디자인 패턴 181쪽) 오직 한 개의 인스턴스만을 갖도록 보장 인스턴스가 여러 개면 제대로 작동하지 않는 상황이 종종 있다. 외부 시스템과 상호작용하면서 전역 상태를 관리하는 클래스 같은 게 그렇다. ex) 파일 시스템 API 파일 시스템 클래스로 들어온 호출이 이전 작업 전체에 대해서 접근할 수 있어야 한다. 아무 데서나 파일 시스템 클래스 인스턴스를 만들 수 있다면 다른 인스턴스에서 어떤 작업을 진행중인지를 알 수 없다. 이를 싱글턴으로 만들면 클래스가 인스턴스를 하나만 가지도록 컴파일 단계에서 강제할 수 있다. 전역적인 접근점을 제공 로깅, 콘텐츠 로딩, 게임 저장 등 여러 내부 시스템에서 파일 ..

오목 AI 제작 - MIN_MAX 전략을 통한 필승 수 구현

탐색을 적용시킨 오목 AI를 구현해보고 싶어서 3일동안 AI 제작을 진행하게 됐습니다. 먼저 19*19 바둑판 맵을 다 탐색을 하여 돌의 연결상태를 확인한 후 각 돌의 연결 상황마다 가중치를 부여했습니다. 그 후 Search 함수를 통해 탐색 과정에서 AI끼리 각자 가지치기 방식으로 최적의 수를 두어나갑니다. 탐색 중 상대방이 이기는 경우가 발생 하면 return 하여 가지가 갈라지는 분기점으로 돌아가 재 탐색을 시작합니다. 그렇게 탐색하는 도중 자신의 AI가 이기는 상황이 발생하면 맨 처음 좌표값을 저장한 후 그 이후부터는 모든 상황에 대해 return하여 탐색을 종료시켜 제작하였습니다. 최대 깊이 탐색은 현재 시점으로부터 30수까지 설정해 놓았습니다. 그 이유는 웬만하면 승부가 나는 시점까지 도달하고..

DirectX 12 멀티 스레드 렌더링 (Multi-Thread Rendering)

현재 프로젝트에서 사용 중인 스레드의 개수는 4개이다. 싱글 스레드 렌더링과 멀티스레드 렌더링의 성능을 비교해보겠다. 우선 사용하고 있는 메쉬 모델 데이터의 정보이다. 애니메이션 정보가 없는 스태틱 메쉬의 경우 vertex 정점 11,400개 / index 3,800개이다. 애니메이션 스키닝을 해야 하는 다이나믹 메쉬의 경우 vertex 정점 51,294개 / index 17,096개이다. 모든 오브젝트에 대해서 인스턴싱은 적용 X. 모든 오브젝트는 vertex 셰이더와 pixel 셰이더를 통해 렌더링 한다. 1. StaticMesh x1000 한 번 장면을 그릴 때마다 그리는 vertex의 개수는 11,400 * 1,000 = 11,400,000개. 그림자 깊이까지 총 2번을 그리므로 11,400,00..