React 18과 Relay를 사용하여 Suspense 기반의 Streaming SSR을 지원하며,
페이지별로 GraphQL 쿼리를 지정해 Render-as-you-fetch를 지원하도록 구성하였습니다.

회사에서 프로덕션 제품 제작에 사용할 적절한 SSR 프레임워크를 찾다가,
Relay와 사용하기에 최적의 프레임워크를 찾지 못해서 직접 만들게 되었으며,
회사에서 개발한 신규 제품에도 실제로 적용하여 사용 중입니다.

Cloudflare Workers 등 엣지 런타임 환경에서도 잘 동작하며,
추후 Selective Hydration 등의 고급 SSR 테크닉들도 적용할 예정입니다.

과거에는 다양한 경로에서 협업/사용 관련 문의나 오픈소스 기여 역시 받고 있었으나,
해당 프레임워크를 사용하는 프로젝트를 더 이상 진행하지 않게 됨에 따라 현재는 아카이브 처리한 상태입니다.

서비스 워커를 제외한 모든 코드 ReScript로 작성, Cloudflare Workers 기반 인프라를 활용한 리소스 관리 시스템 구현,
Workbox 기반 서비스 워커를 사용한 오프라인 실행을 위한 캐싱 적용 등의 특징이 있습니다.

현재는 매우 불완전한 Relay 호환 GraphQL API 서버만 존재하며,
계정 및 JWT 기반 인증 시스템, DM 등의 기능이 구현되었습니다.

Rust의 Procedual Macro 시스템을 활용한 각종 매크로를 직접 작성함으로써,
적은 코드 양으로 Global Object Identification 구현 등의 문제를 해결하였습니다.

주후 Server-Driven UI와 GraphQL Subscription을 이용한 게임 시스템을 구현할 예정입니다.

모든 코드 ReScript로 작성, Firebase Functions와 Firestore를 활용한 투표 시스템 구현,
Firestore를 활용한 데이터 실시간 업데이트 적용 등의 특징이 있으며,
그라디언트 간의 부드러운 트랜지션 구현 등의 문제를 해결하였습니다.

Full Sail University에서 진행한 졸업 프로젝트입니다.

Vue.js와 html2canvas를 활용하여 자막 이미지의 동적 렌더링을 구현하였으며,
TypeScript의 타입 시스템을 활용한 각종 타입 유틸리티들을 통해
템플릿 컴포넌트 시스템과 Pinia Store, Electron IPC 시스템의 Type Safety 문제를 해결하였습니다.

Full Sail University의 포트폴리오 수업에서 진행한 프로젝트로.
teVirtualMIDI라는 가상 MIDI 디바이스 생성용 드라이버를 사용하여
펜 태블릿에서 입력받은 XY 좌표와 압력 수치를 MIDI 신호로 변환하여 내보내는 방식으로 동작하며,
펜 태블릿을 DAW에 연결 시 마치 악기처럼 사용할 수 있도록 해 줍니다.

WinTab API 연동을 통하여 태블릿 정보를 직접 읽어오는 것을 시도하였으나,
C/C++ API 연동 관련 지식이 부족하여 실패했던 것이 가장 아쉬운 프로젝트입니다.

Dart와 Flutter, Android 개발을 배우며 만들었으며, 각종 위젯들을 조합하여 UI를 만드는 법을 익히는 데에 많은 도움이 되었습니다.

Firebase Functions를 활용한 매칭 API 작업부터, 각 카풀 구성원의 현재 위치를 표시하기 위한 Google Maps 연동과,
카풀 비용 지불을 위한 Stripe 결제 연동까지 구현했습니다.

Stripe 연동과 관련된 법적인 문제(외국인)로 실제 운영은 진행하지 못했습니다.

TypeScript를 활용하여 Type Safe한 바인딩을 제작하였고,
CMake.js를 활용하여 TagLib 의존성 추가를 포함한 빌드 시스템을 구성하였으며,
최종적으로 NPM에 배포까지 성공적으로 진행하였습니다.

Promise 기반 API 등 많은 기능을 추가할 예정이었으나, 개인적인 흥미가 떨어져 현재 방치 상태입니다.

루리웹에 리그 오브 레전드 게시판이 신설되었을 때, 기존에 사용하던 커뮤니티 (롤 인벤)에서 사용하던
각종 유틸리티(아이템 DB, 공략 시스템 등)들이 매우 부족한 상태였고, 이를 해결하기 위해 개발하게 되었습니다.

Riot Games의 리그 오브 레전드 관련 API 연동을 진행하였으며, Firebase를 활용하여 공략 업로드를 위한 시스템을 구현하였습니다.

SolidJS의 JSX 트랜스폼은 JSX를 DOM 요소 생성과 상태 변화 구독으로 변환하는 작업을 수행하는데,
해당 트랜스폼이 Babel만을 지원하고 있어 이를 swc용으로 포팅하는 작업이 커뮤니티에서 시작되었으나,
진행 상황이 지지부진한 상태였습니다.

먼저 JSX 내에서 컴포넌트를 사용하는 경우에 대한 로직을 대거 추가하여,
일반 DOM 요소 외에도 컴포넌트를 JSX 내에서 사용할 수 있도록 개선했으며, (#1)

이후 상수 값 처리에 대한 최적화나 프레임워크 빌트인 컴포넌트 (For, Show 등) 처리 등의
추가기능을 구현하여 플러그인의 완성도를 높였습니다.

해당 프로젝트의 업데이트가 2020년 이후 멈춰 있었고, 이에 @defer나 @stream 등 최신 스펙을 지원하지 않아,
관련 테스트를 위해 프로젝트 전체를 최신화하였습니다.

기존에 사용하던 Apollo Server를 GraphQL Yoga 2.0로 교체하였고,
모킹 데이터 레이어를 Promise를 지원하는 형태로 수정하여
@defer 및 @stream을 지원하는 리졸버들을 구성하였습니다. (#15)

이후 메인테이너의 요청에 따라 Relay가 사용하는 비공식 @defer/stream 스타일을 지원할 수 있도록 하는
envelop-plugin-relay-defer를 개발하고, 해당 플러그인을 적용하는 PR까지 마쳤습니다. (#16)

UnoCSS는 여러 가지 프리셋을 통해서 다양한 기능들을 제공하는데,
이 중 Attributify 프리셋은 Atomic CSS 클래스를 마치 일반 프로퍼티인 것처럼 지정할 수 있도록 해 주며,
나아가 Valueless Attributify라는, 속성 이름을 태그에 그대로 적으면 스타일이 적용되는 방식의 기능 역시 제공합니다.

하지만 해당 기능이 SolidJS에서는 작동하지 않는다는 이슈가 보고되었고 (#878),
UnoCSS가 생성하는 CSS가 SolidJS와 호환될 수 있도록 약간의 수정을 가하는 옵션을
추가하는 방식으로 해당 이슈를 해결하였습니다. (#899)

Yarn PnP는 node_modules 디렉토리를 사용하는 고전적 모듈 시스템을 대체하는데,
ReScript의 의존성 시스템은 node_modules 기반 모듈 시스템에서만 작동하고,
따라서 일반적인 상황에선 Yarn PnP와 ReScript를 같이 사용할 수 없습니다.

이를 ReScript에서 참조하는 의존성들에 대해서만 node_modules 기반 모듈 시스템을 사용하여
문제를 회피하도록 하는 것이 이 플러그인의 역할입니다.

Monorepo 환경에서 워크스페이스 멤버의 의존성을 불러오지 못하는 문제와,
한 멤버가 다른 멤버에 의존하는 경우에 정상적으로 동작하지 않는 문제가 존재하여,
해당 부분을 개선하였습니다. (#5)

async-graphql은 일반적으로 다른 백엔드 프레임워크들과 함께 동작하며,
유명한 백엔드 프레임워크들에 대해 Integration 패키지를 제공하는데,
이 중 Rocket 프레임워크에 대한 Integration 패키지에서 최신 RC Release를 지원하지 않아,
해당 부분에 대한 지원을 추가하였습니다. (#545)

juniper는 일반적으로 다른 백엔드 프레임워크들과 함께 동작하며,
유명한 백엔드 프레임워크들에 대해 Integration 패키지를 제공하는데,
이 중 Rocket 프레임워크에 대한 Integration 패키지에서
async 지원이 포함된 최신 master 브랜치의 버전을 지원하지 않아,
해당 부분에 대한 지원을 추가하였습니다. (#905)

vee-validate는 ValidationProvider 컴포넌트로 검증할 Input 요소를 감싸 필드값을 검증하는데,
이때 v-model 속성이 있는 요소를 자동으로 탐색합니다.

v-model 속성을 사용하지 않는 경우나, 기타 다양한 경우를 위해 수동으로 validate 함수를 호출하는 방식 역시 제공하지만,
v-model 속성을 가진 요소가 존재할 경우 무조건적으로 해당 요소를 검증 대상 요소로 지정하는 문제가 있었습니다.

이 동작을 detectInput 속성을 통해 (비)활성화 할 수 있도록 개선하고, Jest를 활용한 테스트 코드도 추가하였습니다. (#2980)