GT's Funny Coding

Bootstrap의 carousel은 순수 슬라이드만 지원한다.css와 js를 이용하여 커스텀하게 변경하려면 생각보다 폼이 많이들고, 충돌되는 부분이 많기에 다른 라이브러리를 알아봤다. 아래와 같은 사항을 염두하여 리서칭 했다.1. 기존 코드와 충돌이 없을 것 (bootstrap 등)2. 커스텀이 가능할 것3. MIT 라이센스일 것4. 의존성이 없을 것 (jquery 등) 니즈와 딱 맞는 라이브러리를 발견했다.(https://github.com/benkimo6i/vanilla-js-carousel) 해당 Repository를 Fork하여 입맛에 맞게 커스텀했다.(https://github.com/vip00112/vanilla-js-carousel) 변경한 내용은 아래와 같다.1. 기존 코드와 충돌하지 않..

.NET을 하다보면 자주 듣는 용어들이 있다. CLR, CIL, JIT, AOT, Assembly, Runtime, Native Code, Binary 등등.. 다른 내용을 찾아보다 우연히 정리가 아주 잘 된 아티클을 보았다. 따로 내 블로그에 정리하지 않고, 해당 아티클의 링크를 기록 해둔다. https://rito15.github.io/posts/cs-dotnet-compile/

Mac, iOS, Android, Linux, Windows 등등.. 우리는 수 많은 OS가 존재하는 세상에서 살고 있다. 당연하게도, 내가 만든 Appliccation이 최대한 다양한 환경에서 돌아갈 수 있었으면 좋겠다. Flutter, Xamarin, MAUI, Electron, ReactNative 등등.. 멀티 플랫폼을 지원하게 하기위한 기술들이 쏟아져 나오고 있다. 지금은 바야흐로 대 멀티 플랫폼의 시대. 수 많은 선택지 중 Blazor + Electron.NET을 이용해보기로 하였다. (이미 Blazor를 이용한 웹앱을 만들어 본 경험이 있기 때문) [ 사전 준비 ] 1. Blazor 웹앱을 만드는 방법은 공식문서에 다양한 튜토리얼이 있으므로, 그 과정은 생략함. 2. Blazor WebAss..

React 프로젝트에 Custom Build된 CKEditor를 적용하는 방법을 정리해둔다. 1. React 프로젝트에 CKEditor 5 패키지 설치 npm install @ckeditor/ckeditor5-react 2. CKEditor 5 공식사이트에서 Online Builder 후 다운로드 - https://ckeditor.com/ckeditor-5/online-builder/ - 다운로드 된 zip파일 압축 해제 - React 프로젝트 root 바로 아래로 파일 복사 3. React 프로젝트에 Online Builder로 커스터마이징한 패키지 등록 npm install file:./ckeditor5 4. CKEditor Component 추가 import BuildedEditor from 'ck..

React는 공식적으로는 라이브러리가 맞다. 하지만 실제 웹앱을 만들어 서비스를 올리기 위해서는 상태관리, 라우팅 등 여러 모듈을 붙여야 한다. 그렇기 때문에 사실상 React를 프레임워크라고 부른다. React에 입문하며 꼭 필요한 셋팅법만 정리해둔다. (내가 나중에 볼 용도임) 1. 프로젝트 생성 - Node.js 설치 : https://nodejs.org/ko/download/ - VisualStudio Code 설치 : https://code.visualstudio.com/Download - React 프로젝트 생성 : npx가 맞음. npm 아님. npx create-react-app 프로젝트명 2. 상태관리 - jotai (https://jotai.org/) npm install jotai 3..

워크래프트 3 유즈맵을 해봤던 유저라면, 한 번쯤 써봤을 치르닉스. 딜듀, 키맵핑, 밴리, 시야조절 등등 여러가지 유용한 기능이 있는 툴이다. 매우 좋은 툴인것은 분명하지만, 쓸 때마다 느끼는 게 하나 있다. 기능이 많은데, 많아도 너무 많다. 결국 쓰는 기능은 제한적이지만 너무 복잡하다. 항상 필요한 기능만 추려서 따로 툴을 만들어서 써야겠다는 생각을 해왔다. 하지만 결국 이런류의 툴도 워크래프트 3의 클라이언트 메모리까지 들여다봐야 하기 때문에, 어중간한 시간으로는 엄두도 못 낼 작업이었다. 그러던 중 알게 된 소식. 치르닉스를 오픈소스로 전환하여 운영한다는 것이다. (https://github.com/BlacklightsC/OpenCirnix) .NET 기반으로 제작되었다는 걸 알고 있었기에, 소식..

Flutter 기반의 Flame 게임엔진이 1.0.0 버전으로 release 되었다. (https://flame-engine.org/) 안 해볼수 없지. 무엇을 만들어볼까 고민해보다.. 어릴적에 재밋게 했던 닷지 게임을 만들어 보기로 했다. 멀티플랫폼을 지향하는 flutter 이지만, 이번 프로젝트는 오직 웹에서만 사용할 생각이다. 이유는 크게 두 가지 인데, 모바일 화면보다는 약간 넓고 고정된 크기의 스크린이 필요함 Github Page를 이용한 publish가 가능함!!!! (결정적) 시작하기에 앞서 결과물은 아래 링크에서 확인할 수 있다. 게임플레이 : https://vip00112.github.io/infinity_alive/ 소스코드 : https://github.com/vip00112/infi..

Google의 서비스를 이용하기 위해 OAuth를 연동하는 법은 많이 나와 있지만.. Blazor Server에 적용하는 법은 자료가 많이 없다. 정답을 찾기보다는 OAuth 매커니즘 자체를 이해하고, Google의 라이브러리가 지원하는지를 확인하는 게 빠르다. OAuth는 표준기술이기 때문에 큰 맥락의 매커니즘은 동일하다. 하지만 이 글에서는 Google OAuth2를 기준으로 설명한다. 먼저, 간략한 프로세스는 아래와 같다. 특정 앱에 대한 접근 권한과 식별을 위해 ClientID와 ClientSecret 취득 OAuth 서버에 ClientID와 ClientSecret으로 Code 취득 Code와 ClientSecret으로 실제 인증과 권한 획득에 사용할 AccessToken과 RefreshToken..

Blazor는 SPA에서의 url로 인한 라우팅을 지원한다. 이는 NavigationManager의 NavigateTo 함수를 사용하면 된다. 예를 들어, index 페이지에서 login 페이지로 라우팅을 해야 하는 상황을 가정해보자. index.razor 파일에 아래와 같은 코드가 작성될 것이다. [Inject] private NavigationManager NavigationManager { get; set; } NavigationManager.NavigateTo("/login"); 그리고 디버깅을 해보면, 아래와 같은 프로세스를 예상한다. https://localhost:포트/index 이동 NavigateTo 함수 호출 Blazor의 라우터가 경로를 해석하여 페이지 전환 https://localh..

ckeditorUploadAdapter.js 파일 추가 class UploadAdapter { constructor(loader, t) { this.loader = loader; this.t = t; } upload() { return new Promise((resolve, reject) => { const reader = this.reader = new FileReader(); reader.onload = function () { resolve({ default: reader.result }); }; reader.onerror = function (error) { reject(error); }; reader.onabort = function () { reject(); }; this.loader.file..