About me

안녕하세요! 신의하입니다.

항상 프로그래밍을 좋아했고, 그래서 프로그래머가 되었습니다.

웹을 좋아하며, 특히 프론트엔드 분야에 관심이 많습니다.

새로운 것들을 찾아보고, 공부하고, 시도해보는 것을 즐깁니다.

Techs I use & love

Experiences

각 항목을 클릭하면 상세 내용이 표시됩니다.

Work Experiences

  • - Frontend Developer @ PortOne

    2022.10 ~

    결제 관련 SaaS를 개발하는 회사인 포트원에서 프론트엔드 개발자로 근무 중입니다.

    프론트엔드 개발자로 소속되어 있지만, 일반적인 프론트엔드 개발 업무 이외에도, SDK의 성능 및 구조 개선이나 마이크로서비스의 구현 등 광범위한 범위에서 제품에 기여햘 수 있는 부분을 주도적으로 탐색하여 기여했습니다.

  • - Backend Developer @ NutritionCourt

    2021.10 ~ 2022.10

    AI 헬스케어 스타트업인 뉴트리션코트에서 백엔드 개발자로 근무했습니다.

    퇴사 후, 회사에 기존에 계시던 시니어 백엔드 개발자분께서 퇴사하시게 되며 팀에 공백이 생겼고, 도움을 요청받아 합류하게 되었습니다.

    포지션은 백엔드 개발자이지만, 모바일 앱을 유지보수하거나 프론트엔드 신입 교육을 담당하고 업무를 분배하여 함께 진행하는 등 풀스택 개발 업무를 진행했습니다.

    • Welcoach 앱 개발 및 유지보수

      • Flutter
      • GetX
      • Node.js
      • GraphQL
      • Mercurius
      • Prisma
      • Elasticsearch

      기존에 개발했었던 웰코치 어플리케이션에 간편 인증 등의 기능 추가, 사용성 개선을 진행했습니다.

      백엔드 개발자로 합류하였지만, 회사 전략상 앱을 지속적으로 개선해야 하는 상황에서 유일하게 앱 관련 지식을 가지고 있던 개발자였기에 유지보수 작업을 진행하게 되었습니다.

    • 웰코치샵 API 백엔드 개발

      • Node.js
      • Fastify
      • Envelop
      • GraphQL
      • Schema Stitching
      • Terraform
      • AWS EKS, RDS, SQS, etc.

      Shopify 기반 이커머스의 다양한 확장 기능 구현을 위한 MSA 백엔드를 개발했습니다.

      GraphQL Tools의 Schema Stitching 기능을 활용하여, 여러 마이크로서비스들로 나뉘어 구성된 도메인별 API를 프론트엔드에서 손쉽게 사용할 수 있는 단일 Supergraph API로 제공하였습니다.

      미국의 SBN 사와의 API 연동을 통해 쇼핑몰에서 검진 상품을 구매한 고객들이 검사소에 방문하여 혈액 검사를 받고, 이 결과를 기반으로 한 리포트를 받아보는 전체 흐름을 구현하였습니다.

    • 웰코치샵 프론트엔드 개발 지원

      • Shopify Liquid
      • React
      • Svelte
      • Relay
      • Vite
      • WindiCSS
      • Astro

      Shopify 기반 이커머스 구현 단계에서 요구된 다양한 프론트엔드 작업들을 지원하였습니다.

      Shopify의 테마 기능을 활용하여 구축한 쇼핑몰에 Liquid 템플릿 코딩과 ESM 등을 포함한 모던 바닐라 JS 활용, 상황에 따라 Svelte를 활용한 별도 컴포넌트 개발을 통해 동적 기능 추가, 레이아웃 조정, WYSIWYG으로 재사용 가능한 컴포넌트 추가 등의 작업을 진행하였습니다.

      또한, 외부 시스템과의 연동 과정에서 필요해진 검사자 정보 등록 페이지나 혈액 검사 리포트 페이지 등의 페이지를 개인 개발 중이던 React & Relay 기반 프레임워크인 Vilay를 활용하여 개발하였고, 이 과정에서 프레임워크의 개선 작업 역시 함께 진행하였습니다.

      프론트엔드 개발 과정의 대부분은 동료 프론트엔드 전담 개발자분과 함께 진행하였으며, 신입이셨던 특성상 각종 멘토링과 코드 리뷰를 겸하며 작업하였습니다.

  • - Frontend Developer @ NutritionCourt

    2020.09 ~ 2021.07

    AI 헬스케어 스타트업인 뉴트리션코트에서 프론트엔드 개발자로 근무하였습니다.

    소규모 스타트업 특성상 프론트엔드 외에도 다양한 분야의 개발 작업을 진행했습니다.

    • Angular 기반 프로젝트 Vue로 재작성

      • TypeScript
      • Vue.js 2
      • Bootstrap 4
      • SCSS
      • Google App Engine

      기존 Angular 2 기반으로 개발되어 있던 MVP 제품을 Vue 2 기반으로 재작성하였습니다.

      건강검진 결과 수치를 입력하면, 해당 데이터를 분석하여

      식단 추천을 포함한 리포트를 보여 주는 웹앱을 작업하였습니다.

      Bootstrap 4와 SCSS를 사용하여 반응형 디자인을 적용하여 개발하였습니다.

    • Angular 기반 프로젝트 Nuxt로 재작성

      • TypeScript
      • Nuxt.js
      • Bootstrap 4
      • SCSS
      • Python
      • Falcon
      • Google App Engine

      기존 Angular 2 기반으로 개발되어 있던 B2B 제품을 Nuxt.js 기반으로 재작성하였습니다.

      병원에서 환자 예약부터 진료, 혈액검사 예약, 문진 작성, 리포트 제공, 투약 알림까지 전 과정에 대한 의사 대상 UI와 환자 대상 모바일 웹앱을 작업하였습니다.

      원활한 SSR을 위해 Prefetch 등의 최적화를 진행하였습니다.

      또한 작업 중 API 백엔드인 Falcon 기반 Python 코드의

      유지보수 및 기능 추가도 같이 진행하였습니다.

    • Welcoach 앱 개발 및 유지보수

      • Flutter
      • GetX
      • Node.js
      • GraphQL
      • Mercurius
      • Prisma
      • Elasticsearch

      혈액검사 기반 맞춤 건강관리 솔루션을 제공하는 앱을 개발하였습니다.

      공인인증서 로그인을 통해 건강보험공단에서 건강검진 데이터를 불러오고,

      이를 자체 구현한 알고리즘을 통해 분석하여

      맞춤 식품/건강기능식품 솔루션을 제공하는 방식으로 구성하였습니다.

      약간의 DevOps 작업을 제외하면 전부 혼자 개발하여,

      안드로이드 버전의 Play 스토어 출시까지 성공적으로 진행하였고,

      이후 유지보수 작업을 약 1달간 진행하였습니다.

Personal Projects

  • - Vilay

    2022.01 ~ 2022.08
    • TypeScript
    • Vite
    • vite-plugin-ssr
    • React
    • Relay
    • UnoCSS

    Vite와 vite-plugin-ssr을 기반으로 편리하게 Relay 기반의 SSR 앱을 개발할 수 있도록 돕는 프레임워크입니다.

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

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

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

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

  • - Lang-Helper

    2020.12, 2022.07~
    • ReScript
    • React
    • Tailwind CSS
    • Cloudflare Workers, R2, KV
    • PWA
    • Workbox

    언어치료를 위한 사진 + 음성 슬라이드쇼 웹앱입니다.

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

  • - Webgame Collection

    2021 ~ WIP
    • Rust
    • async-graphql
    • actix-web
    • PostgreSQL
    • Redis

    <더 지니어스> 시리즈의 게임들을 웹으로 구현하는 것을 목표로 시작된 프로젝트입니다.

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

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

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

  • - 선택 2021: 신의하의 머리색에 투표하세요

    2021.09
    • ReScript
    • React
    • WindiCSS
    • Firebase Functions
    • Firestore

    염색을 위하여 개인적으로 투표를 진행하는 과정에서 만든 프로젝트입니다.

    모든 코드 ReScript로 작성, Firebase Functions와 Firestore를 활용한 투표 시스템 구현, Firestore를 활용한 데이터 실시간 업데이트 적용 등의 특징이 있으며,

    그라디언트 간의 부드러운 트랜지션 구현 등의 문제를 해결하였습니다.

  • - 복분자막걸리

    2021.03 ~
    • TypeScript
    • Vue.js 3
    • Electron
    • html2canvas
    • Pinia
    • WindiCSS

    텍스트와 그래픽 템플릿으로부터 자동으로 자막 이미지를 생성하는 프로그램입니다.

    Full Sail University에서 진행한 졸업 프로젝트로, 이후에도 작업을 이어가고 있습니다.

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

  • - Penstrument

    2020.06
    • C#
    • WinUI 3
    • teVirtualMIDI

    Wacom 등의 펜 태블릿을 MIDI 컨트롤러로 사용할 수 있게 만들어 주는 프로그램입니다.

    Full Sail University의 포트폴리오 수업에서 진행한 프로젝트로.

    teVirtualMIDI라는 가상 MIDI 디바이스 생성용 드라이버를 사용하여

    펜 태블릿에서 입력받은 XY 좌표와 압력 수치를

    MIDI 신호로 변환하여 내보내는 방식으로 동작하며,

    펜 태블릿을 DAW에 연결 시 마치 악기처럼 사용할 수 있도록 해 줍니다.

    WinTab API 연동을 통하여 태블릿 정보를 직접 읽어오는 것을 시도하였으나,

    C/C++ API 연동 관련 지식이 부족하여 실패했던 것이 가장 아쉬운 프로젝트입니다.

  • - Moim

    2019.12 ~ 2020.02
    • Flutter
    • Redux
    • JavaScript
    • Firebase Functions
    • Firestore
    • FCM
    • Stripe

    학교 내에서 사용할 것을 목표로 만든, 결제 시스템을 포함한 카풀 앱입니다.

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

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

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

  • - taglib-node-binding

    2019.09
    • TypeScript
    • C++
    • node-addon-api
    • CMake.js
    • TagLib

    C++의 음악 파일 태그 관리 라이브러리인 TagLib의 Node.js 바인딩입니다.

    TypeScript를 활용하여 Type Safe한 바인딩을 제작하였고,

    CMake.js를 활용하여 TagLib 의존성 추가를 포함한 빌드 시스템을 구성하였으며,

    최종적으로 NPM에 배포까지 성공적으로 진행하였습니다.

    Promise 기반 API 등 많은 기능을 추가할 예정이었으나,

    개인적인 흥미가 떨어져 현재 방치 상태입니다.

  • - 리그 오브 레전드 관련 유틸리티

    2018.07 ~ 2018.09
    • JavaScript
    • Vue.js 2
    • Bootstrap 4
    • Firebase Functions
    • Firestore

    게임 커뮤니티에서 유용하게 쓸 수 있는, 공략 편집기 등의 유틸리티 모음입니다.

    루리웹에 리그 오브 레전드 게시판이 신설되었을 때,

    기존에 사용하던 커뮤니티 (롤 인벤)에서 사용하던

    각종 유틸리티(아이템 DB, 공략 시스템 등)들이 매우 부족한 상태였고,

    이를 해결하기 위해 개발하게 되었습니다.

    Riot Games의 리그 오브 레전드 관련 API 연동을 진행하였으며,

    Firebase를 활용하여 공략 업로드를 위한 시스템을 구현하였습니다.

Open Source Contributions

  • - modderme123 / swc-plugin-jsx-dom-expressions

    2023
    • Rust
    • swc

    SolidJS의 컴파일 타임 JSX 트랜스폼을 위한 Babel 플러그인의 swc 포트입니다.

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

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

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

  • - zth / graphql-client-example-server

    2022 ~
    • TypeScript
    • GraphQL Yoga

    GraphQL 클라이언트를 테스트하기 위한 목적으로 제작된 간단한 GraphQL API 예제 서버입니다.

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

    기존에 사용하던 Apollo Server를 GraphQL Yoga 2.0로 교체하였고,

    모킹 데이터 레이어를 Promise를 지원하는 형태로 수정하여 @defer 및 @stream을 지원하는 리졸버들을 구성하였습니다. (#15)

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

  • - unocss / unocss

    2022 ~
    • TypeScript
    • Atomic CSS

    Tailwind CSS와 유사하지만, On-demand 방식으로 동작하는 Atomic CSS 라이브러리입니다.

    UnoCSS는 여러 가지 프리셋을 통해서 다양한 기능들을 제공하는데,

    이 중 Attributify 프리셋은 Atomic CSS 클래스를 마치 일반 프로퍼티인 것처럼 지정할 수 있도록 해 주며,

    나아가 Valueless Attributify라는, 속성 이름을 태그에 그대로 적으면 스타일이 적용되는 방식의 기능 역시 제공합니다.

    하지만 해당 기능이 SolidJS에서는 작동하지 않는다는 이슈가 보고되었고 (#878),

    UnoCSS가 생성하는 CSS가 SolidJS와 호환될 수 있도록 약간의 수정을 가하는 옵션을 추가하는 방식으로 해당 이슈를 해결하였습니다. (#899)

  • - reason-seoul / yarn-plugin-rescript

    2021 ~
    • TypeScript
    • Yarn 2
    • Yarn PnP
    • ReScript

    Yarn 2의 PnP 환경에서 ReScript가 정상적으로 동작할 수 있도록 돕는 플러그인입니다.

    Yarn PnP는 node_modules 디렉토리를 사용하는 고전적 모듈 시스템을 대체하는데,

    ReScript의 의존성 시스템은 node_modules 기반 모듈 시스템에서만 작동하고,

    따라서 일반적인 상황에선 Yarn PnP와 ReScript를 같이 사용할 수 없습니다.

    이를 ReScript에서 참조하는 의존성들에 대해서만

    node_modules 기반 모듈 시스템을 사용하여

    문제를 회피하도록 하는 것이 이 플러그인의 역할입니다.

    Monorepo 환경에서 워크스페이스 멤버의 의존성을 불러오지 못하는 문제와,

    한 멤버가 다른 멤버에 의존하는 경우에 정상적으로 동작하지 않는 문제가 존재하여,

    해당 부분을 개선하였습니다. (#5)

  • - async-graphql / async-graphql

    2021.06
    • Rust
    • GraphQL
    • Rocket

    async-graphql은 Rust의 서버 사이드 GraphQL 프레임워크입니다.

    async-graphql은 일반적으로 다른 백엔드 프레임워크들과 함께 동작하며,

    유명한 백엔드 프레임워크들에 대해 Integration 패키지를 제공하는데,

    이 중 Rocket 프레임워크에 대한 Integration 패키지에서 최신 RC Release를 지원하지 않아,

    해당 부분에 대한 지원을 추가하였습니다. (#545)

  • - graphql-rust / juniper

    2021.03
    • Rust
    • GraphQL
    • Rocket

    juniper는 Rust의 서버 사이드 GraphQL 프레임워크입니다.

    juniper는 일반적으로 다른 백엔드 프레임워크들과 함께 동작하며,

    유명한 백엔드 프레임워크들에 대해 Integration 패키지를 제공하는데,

    이 중 Rocket 프레임워크에 대한 Integration 패키지에서

    async 지원이 포함된 최신 master 브랜치의 버전을 지원하지 않아,

    해당 부분에 대한 지원을 추가하였습니다. (#905)

  • - logaretm / vee-validate

    2020.10
    • TypeScript
    • Vue.js 2
    • Jest
    • Vue Test Utils

    vee-validate는 대표적인 Vue.js 지원 입력 검증 라이브러리입니다.

    vee-validate는 ValidationProvider 컴포넌트로

    검증할 Input 요소를 감싸 필드값을 검증하는데,

    이때 v-model 속성이 있는 요소를 자동으로 탐색합니다.

    v-model 속성을 사용하지 않는 경우나, 기타 다양한 경우를 위해 수동으로 validate 함수를 호출하는 방식 역시 제공하지만,

    v-model 속성을 가진 요소가 존재할 경우

    무조건적으로 해당 요소를 검증 대상 요소로 지정하는 문제가 있었습니다.

    이 동작을 detectInput 속성을 통해 (비)활성화 할 수 있도록 개선하고,

    Jest를 활용한 테스트 코드도 추가하였습니다. (#2980)

Education

  • - Software Development B.S. @ Full Sail University

    2019 ~ 2021

    20개월 단기집중과정을 통해 3.77/4.0의 학점으로 수석 졸업하였습니다.

    2019년에는 미국에서 현지 학생들과 함께 현장 수업을 수강하였으며,

    2020년 초부터는 COVID-19로 인하여 한국에서 온라인 수업을 진행하였습니다.

    운영체제, 자료구조, 동시성 프로그래밍, MIPS 어셈블리 등 각종 CS 지식을 다지는 데에 도움이 되었습니다.

  • - 엘비오티 기독혁신스쿨

    2014 ~ 2018

    독서 중심의 기독대안학교에서 중•고등학교 통합 과정으로 졸업하였습니다.

    독서와 사회 이슈 분석을 통한 가치관 확립과,

    자기주도학습 위주의 교과과정 특성상 넉넉했던 자기계발 시간이

    내면과 프로그래머로서의 역량 성장에 많은 도움이 되었습니다.

    이외에 학생들을 대상으로 소규모 코딩 스터디를 구성해 기초적인 코딩을 알려 주거나,

    공식 코딩 과목에서 조교로 활동하며 뒤처지는 아이들을 돕는 등

    코딩 교육 측면에서도 많은 시도와 귀중한 경험이 있었고,

    비개발자들과의 개발 관련 의사소통에서

    유의미한 도움을 준다고 느끼고 있습니다.

    비인가 대안학교는 공식적인 중•고등학교로 인정되지 않기 때문에,

    중•고등학교 모두 검정고시를 통해 학력을 인정받았습니다.

Contact