Seonglae ChoBig ProjectsSeonglandLeagacylandSeonglandPointlandIntuiter3 ThreesStryx, Kakao Mobility벡터 도화 플랫폼BackendFrontendInfra사내 촬영 하드웨어 관리 어플리케이션사내 촬영 경로 관리 및 관제 어플리케이션Small ProjectsTo SpotifyGithub SetterGithub SetterScreencastOther DevelopmentsNPM ModulesCode SeparationModule Test Module buildService DeploymentAzure PipelineGithub ActionLinux ContainerKubernetesCloud ServiceAWS, Oracle Cloud, AzureGCPCloudflareGit Azure DevOpsGithub
Big Projects
Seongland
Leagacyland
- 2019.10 ~ 2021.4
2019년에 3D로 만들어진 웹 페이지를 하나 접했고 웹 브라우저에서도 삼차원 경험을 줄 수 있다는 것에 매료되어 나도 이런 유저경험을 만들고 싶다는 생각에 웹 개발을 제대로 시작하게 되었습니다. 어떤 프로젝트를 진행해볼까에 대한 고민이 필요했는데, 우선 Seonglae라는 제 이름과 내가 만든 3D 공간에 landing한다는 의미로 Seongland라는 프로젝트를 시작하게 되었습니다. 어린왕자의 행성처럼, 저도 저만의 개인 공간으로 하나의 행성을 만들기로 했습니다. 행성을 통해 입체적인 공간감을 주는 동시에 저는 웹 페이지에 저에 대한 정보를 담기를 원했습니다. 이제 구현을 위해 당시 많이 사용되는 React 정적 빌드 프레임워크인 Gatsby를 기반으로 웹 페이지를 만들기 시작하였습니다. 하지만 웹 페이지 내 구성요소를 모두 3D로 하면 유저는 낯선 입체공간에서 쉽게 정보를 얻기 힘들었습니다. 그래서 제가 선택한 방식은 일반적인 웹처럼 스크롤 방식에 행성인 3D 요소를 추가하기로 했습니다. 3D 행성이 첫 화면에 보이고 스크롤하면 아래에는 제 정보들을 보여주는 카드들로 가독성있는 정보를 제공했습니다. 하지만 카드에서도 3D 느낌을 주고 싶었고 카드가 쌓여있는 Card Stack이라는 요소를 추가하게 되었습니다. 정적인 2D 카드와 달리 좌우로 조금 비틀어주고 위로 쌓인 카드는 정보요소와 공간적인 느낌과 유저 Swipe Gesture를 통한 재미요소 모두 줄 수 있었습니다.
Seongland
- 2021.7 ~ 2022.3
Legacyland에는 몇가지 문제점이 있었습니다. 스크롤 가능한 웹 페이지를 선택했기에 배경의 별들을 가짜 2D 별 이미지를 사용했습니다. 그리고 Gatsby라는 닫힌 생태계에서 개발이 어려웠고 웹 개발 초기에 작성한 코드라, 추가 기능 개발이 어려웠기에 전체 코드를 교체할 필요가 있었습니다. 호환성을 위해 리액트 개발 프레임워크를 Gatsby에서 Next.js로 변경하고, 코드 퀄리티를 위해 React 생태계에서 새롭게 떠오르는 Pmndrs의
react-spring, react-three등의 프론트 라이브러리를 이용해서 유지보수 가능한 코드로 수정하였습니다. 그리고 위 라이브러리들을 이용해서 스크롤도 되면서 배경도 3D Canvas인 웹 페이지를 구현할 수 있었습니다. 기본적으로 새 Seongland는 Legacyland의 목적성을 계승합니다. 하지만 Seongland를 리뉴얼하며 3D라는 요소 이외에도 유저에게 새로운 경험을 주고 싶었습니다. 제가 선택한 건 ‘소리’ 였습니다. 보통 웹페이지에서 유저들이 3D 를 기대하지 않았던 것만큼 소리를 기대하지 않습니다. 유저 인터렉션에서 소리가 나는 것이 굉장히 흥미롭다 생각했고, 테마 변경 시 효과음과 배경음악을 추가하여 웹페이지 낯선고 임팩트있는 경험을 추가했습니다.
Pointland
- 2020.3 ~ 2020.10
Seongland에서 3D 행성을 추가했지만 저는 유저들을 제 공간으로 초대해서 직접 들어온 것 같은 웹 경험을 주고 싶었습니다. 그래서 유저가 게임처럼 직접 탐험할 수 있는 페이지를 별도로 제작하기로 했습니다. Nuxt, Vue 프레임워크 기반으로 개발하였고 Three js, Potree를 이용한 웹 페이지입니다.
wasd 나 방향키를 이용하여 게임적인 요소를 추가했습니다. Q, E를 이용해서 위아래로도 움직일 수 있도록 하였습니다. Seongland 접속 분석을 보니 모바일 접속이 많아서 모바일 서포트가 필요하다고 느꼈습니다. 모바일에서도 키보드가 없이 3D 공간 탐사 기능이 필요했습니다. 저는 모바일 게임에서 영감을 얻어 웹 페이지에서 모바일 게임에 들어온 듯 조이스틱을 통해 움직이도록 개발했습니다. 좌우와 상단에 조이스틱 위치별로 기능을 나누어 앞뒤좌우상하 움직임을 기능별로 직관적으로 배치했습니다.
Pointland
Web Metaverse with Point Cloud
https://point.seongland.com/
Intuiter
- 2019.10 ~ 2021.11
키보드 단축키를 잘 활용하는 것으로 엄청나게 작업의 효율성 올릴 수 있습니다. 그렇지만 보통 특정 프로그램에서만 단축키를 많이 사용하고, 컴퓨터에서 가장 많이 하는 활동인 타이핑에서는 단축키를 그닥 사용하지 않는다는 것이 어색하게 느껴졌습니다. 예를 들어 글을 적는 도중 줄의 앞쪽에 틀린걸 발견하면 그 위치까지 커서를 이동하기 위해 왼쪽 화살표를 연속으로 눌러 한칸 한칸 이동한 경험이 다들 있을거라 생각됩니다. 저는 그게 답답했고 저의 생산성 향상을 위해 프로젝트 개발을 시작하게 되었습니다.
위의 사례는
ctrl + left 라는 단축키를 활용하면 쉽게 해결되지만, 잘 사용하지 않습니다. 저는 왜 그럴까 생각해보았고 그 이유는 단축 키의 배치였습니다. ctrl과 left는 키보드 상의 위치가 끝과 끝이라서 한 손으로 누를 수가 없습니다. 이 외에도 기능에 비해 배치로 인해 사용이 어려운 단축키가 많았고, 이 단축키들을 재배치하면 타이핑 생산성이 아주 높아질 거라 생각했습니다. 저는 이 목적을 구현할 방법을 찾다가 Autohotkey를 발견했습니다. AHK를 이용해서 필요한 단축키들의 재배치 설계가 필요했습니다. vim의 기능을 많은 기능을 참고하였습니다. 하지만 vim에는 크게 3가지 문제가 있었습니다. 첫째로 vim은 텍스트 커서 이동 단축키가 hjkl 구조로 일렬 나열되어 있어서 직관적이지 않습니다. 그리고 모드변경이 필요해서 생산성이 낮습니다. 마지막으로 vim 안에서만 작동해서 어디서도 사용할 수 있는 단축키가 아니었고 단축키 충돌이 발생합니다. 첫째로 저는 단축키 레이아웃을 화살표 모양과 동일하게 하여 훨씬 직관적으로 설계하였습니다. 그리고 Alt 키를 이용하여 모드 변경 없이도 어떤 어플리케이션에서도 대부분 겹치지 않는 단축키 구조를 설계했습니다. 그리고 vim과 같은 타이핑 단축키 뿐 아니라, 단축키를 이용한 마우스 이동 등 컴퓨터 활용 생산성을 위한 다양한 기능들을 추가하여 AHK로 이루어진 core 소스를 만들었습니다. 이런 기능들 모두 직관적인 단축키를 가지기에 누구나 쉽게 사용할수 있다는 의미로 Intutier라는 이름을 지었습니다. 제가 사용해본 결과는 성공적이었고 지금까지 잘 활용하고 있습니다. 저는 제가 다양한 프로젝트를 많이 진행할 수 있었던 이유가 Intuiter로 인한 생산성 증대라고 생각합니다. 컴퓨터 사용에 많은 시간을 차지하는 타이핑을 조금이라도 쉽고 빠르게 할 수 있다면 많은 시간을 아끼고 생산성이 올라갈 수 있습니다. 이 소프트웨어를 공개해 누구나 시간을 아꼈으면 좋겠다는 생각에 누구나 설치할 수 있도록 프로그램 형태로 개발하기로 마음먹었습니다. 기존에 AHK core만 존재하던 프로젝트를 배포를 위해 컴퓨터에 설치하고 실행시키려면 데스크톱 어플리케이션 플랫폼이 필요했습니다. 당시 저에게 진입장벽이 낮았던 Vue, Electron을 활용하여 데스크톱 어플리케이션을 만들었고 exe를 빌드하여 Github에 배포하였습니다. 그리고 더 다양한 방식으로의 설치를 위해 당시 발표된 Windows Package Manger인 Winget에도 배포하여 지금까지 유지되고 있습니다. 마지막으로 intuiter가 단축키의 모음이다 보니 배우기 어렵다는 평이 많아서 한글과 영어로 사용법 페이지를 만들어 누구나 쉽게 배울 수 있도록 하였습니다. Intuiter는 제가 Github star를 가장 많이 받은 프로젝트이기도 합니다.
Vitepress
Make you Productive
https://intuiter.seongland.com/
3 Threes
- 2020.6 ~ 2022.3
저는 많이 알고 배우는 걸 원하기에 많은 정보들을 기록합니다. 구글링은 실시간으로 다양한 정보를 찾기에 좋지만 어떤 정보가 사실이고 유용한 정보인지를 알기가 어렵습니다. 저는 이 해결방안으로 찾은 정보와 생각과 경험을 토대로 내가 유용하다고 판단한 정보를 쌓을 지식창고가 필요했습니다. 그래서 저는 Notion.so라는 플랫폼을 이용하는데 여기서 세상을 3가지 기준으로 나누어 이해하여 지식을 정리하고 있습니다. 이 지식창고가 저에게 같은 지식을 반복해서 찾는 행위를 없애서, 생산성 향상의 효과를 주었습니다. 저 뿐만 아니라 누구나 접근하고 이용할 수 있도록 만들고 싶었습니다. Notion.so를 제가 가진 도메인을 가지고 서비스가 필요했고, 처음 방식은 Cloudflare Workers를 이용한 proxy였습니다. 도메인을 두고 Cloudflare Workers로 노션 서비스를 프록시하는 방식이었습니다.
docworker
seongland • Updated 2024 Nov 12 6:47
하지만 이 방식은 노션 API 정책이나 구조가 바뀔 때 서비스가 작동하지 않아 Cloudflare Workers의 코드를 수정해주어야 하는 이슈가 있었습니다. 여러 노션을 호스팅해주는 서비스들이 있었지만 저는 데이터를 기반으로 노션을 완전히 리렌더링하고 코드를 통해 UI 커스텀과 SEO를 설정할 수 있었으면 했습니다. 그러던 중
react-notion-x 라이브러리를 발견했습니다. 완전히 Notion을 통해 렌더링하면서 React 생태계로 UI를 커스텀할 수 있었습니다. Next.js를 선택하여 많은 양의 페이지들을 Static Rendering을 빌드타임에 실행하여 공식 Notion API구조가 수정되어도 렌더링된 페이지는 그대로 유지될 수 있었습니다. 그리고 새로 생성되거나 빌드되지 않은 페이지들은 fallback하여 실시간으로 Notion api를 사용해 시각화하는 방식으로 개발하였습니다.4000개가 넘는 페이지들을 빌드타임에 렌더링해서 Static Rendering 하면서 sitemap과 페이지를 빌드하였습니다. dynamic routing으로 매핑된 페이지들은 Next js의 getstaticPath를 이용해서 받아오고 빌드 타임에 file system을 이용한 캐시를 이용해서 다양한 빌드 프로세스 상에서 페이지 데이터를 한번만 fetch하는 성능 최적화를 적용하기도 했습니다.
3 Trees
Nowadays, It's getting harder and harder to know the truth. 3Trees is a project to collect based on tree structure information with network relations. The objects of this project are correct knowledge and neutral opinion. There can be many mistakes. So, please start a discussion which results from & to construct 3Threes.
https://threetrees.cloud/
Stryx, Kakao Mobility
벡터 도화 플랫폼
- 2020.10 ~ 2022.3
약 1년 반동안 기획부터 DB 설계와 풀스택 개발과 세팅을 관리하며 프로젝트 리딩을 맡고 있는 진행해본 가장 큰 프로젝트입니다.
Backend
DB 설계에 있어서 PostgreSQL의 JSONB칼럼을 적극 활용한 설계로 유동적인 데이터에 잘 대처할 수 있었습니다. JSONB column의 Array나 Object를 이용해서 변경 히스토리나 접근 기록을 쉽게 개발하고 기능을 추가할 수 있었습니다. DB상 관계를 최소화하고 서버상에서 대부분의 비즈니즈 로직을 구현함으로써 DB 구조를 코드상으로 관리할 수 있도록 구현했습니다. 그러면서 발생한 ORM에서 다양한 방식으로 생기는 race condition을 원자적인 SQL문을 동적으로 실행시킴으로써 해결하였습니다. 그리고 ORM은 Feather를 통해서 클래스별 테이블을 생성해서 Restful API를 구현했으며 동일한 구조를 가지는 테이블 별로 묶어서 상속할 부모의 추상 클래스들을 둠으로써 공통된 속성을 하나의 코드로 관리할 수 있었습니다.
Frontend
대용량 데이터 서빙과 시각화로 인한 성능 튜닝이 필요한 프로젝트였습니다. 성능같은 경우 개발 인스턴스에 대한 시각화 호출을 Array 데이터 시각화에 대한 별도 함수를 두어 공통되는 코드을 제거한 게 최적화에 크게 작용하였습니다. JS Array의 native member 함수들 (reduce, map, filter, every, some)을 최대한 활용해서 가독성있는 코드로 성능을 개선할 수 있었습니다. 성능 최적화 과정에서 크롬 개발자도구를 적극 활용해 대용량 3D 렌더링 성능을 최적화했습니다. Chrome Lighthouse, Memory, Performance 도구를 통해 메모리나 처리시간이 과도하게 사용되는 로직을 찾아내고 수정할 수 있었습니다
Javascript의 내장 객체들을 다양하게 사용하여 개발을 진행하였습니다. JS Set을 이용한 중복제거 또는 변화탐지를 하고, JS Proxy를 이용해서 유저의 액션에 의한 속성값 변화를 intercept해서 따른 다양한 로직들을 중간에 추가하는 방식으로 개발하는 코드를 같은 장소에서 관리할 수 있도록 하였습니다. Nuxt를 이용하여 프로젝트를 진행했고 (Next.js로 변경됨) Vue의 Reactivity가 내장 객체로부터 구현한 걸 참고하며 비슷한 기능을 프로젝트 안에서 구현하며 로직을 작성하였습니다.
Infra
백엔드와 인프라를 직접 관리하다 보니 벡엔드와 인프라 사이 개발도 원활하게 이루어졌습니다. 캐싱이 필요해서 Redis를 사용하기로 하고 백엔드 개발에 체크 알고리즘을 추가했습니다. 총 3가지 캐싱을 이용했는데 1차적으로 수정이 적고 자주 받아오는 데이터는 redis에 캐싱하고 수정 시 삭제 알고리즘을 적용하였습니다. 둘째로 불변하는 데이터는 Nginx에서 제공하는 캐싱으로 웹 서버 캐시도 이용하였습니다. 셋째로 해당 데이터는 cache-control header를 통해 클라이언트 캐싱이 되도록도 하였습니다. url 기반의 캐시 컨트롤을 하는 두가지 캐싱은 인스턴스 id를 UUID로 사용하는 DB설계로 중복 가능성을 배제했기에 원활하게 구현하였습니다.
캐싱기능 구현과 비슷한 사례로 로깅 DB로 influxDB가 있습니다. 서비스의 로그 DB로 influxDB를 사용하고 있습니다. api를 통해 클라이언트 오류와 서버오류, api 요청을 정보를 logging middleware 에서 InfluxDB에 기록합니다. API 요청 소요시간, 요청한 유저와 현새 작업 위치 등을 기록하여 작업현황과 오류 트래킹을 쉽게 관리하고 통계를 시각화하는 로깅 시스템을 구축하였습니다.
사내 촬영 하드웨어 관리 어플리케이션
- 2019.6 ~ 2019.10
기획과 개발을 담당한 사내 하드웨어에 접속해서 컨트롤하도록 하는 실시간 Socket.io 기반 프로젝트입니다. 소켓 io 서버와 클라이언트로 구성되며 Socket.io 서버가 이벤트에 따라 하드웨어 컨트롤하는 c++ 라이브러리를 호출합니다. C++코드와 Node js에서 호출의 인터페이스가 되는 C++ Node Addon 이용하여 구현하였습니다. 다시말해 Node js Addon을 이용하여 하드웨어와 Interface를 구현했습니다. 하드웨어 Status가 Front까지 공유되어야 하는 상태관리가 중요했던 프로젝트라서 백엔드부터 프론트엔드까지 상태관리의 흐름을 유지하는 것에 집중하여 개발하였습니다. 뿐만 아니라 다양한 센서 취득 데이터의 실시간 저장을 위해 node js thread를 이용하여 센서별 데이터 저장만 하는 스레드를 따로 두어 서버 성능을 최적화했습니다. 그리고 실시간 데이터의 시각화 파트를 개발하며, 3d, 지리 데이터를 시각화 최적화에 대한 Openlayers, Three.js 사용 테크닉을 다양하게 배울 수 있었습니다.
사내 촬영 경로 관리 및 관제 어플리케이션
- 2019.6 ~ 2019.12
위 하드웨어 컨트롤 차량의 촬영 위치를 확인하고 관리하기 위한 서브스도 동시에 기획하고 개발하였습니다. 위 하드웨어 컨트롤 Socket.io 서버는 동시에, 관제탑의 Socket.io 서버의 클라이언트가 되어 항공 관제탑처럼 운행중인 차량 정보를 실시간으로 보여줍니다. 이런 설계로 여러 대의 하드웨어를 웹 브라우저를 통해서 실시간으로 관제할 수 있도록 구현했습니다. 그리고 시각화 성능을 위해 대용량 지리 데이터의 벡터를 클라이언트에서 시각화하지 않고 Postgis에 저장된 데이터를 Geoserver를 통해 이미지를 렌더링해 서비스하는 WMS 또는 WMTS로 서빙을 구축하였습니다.
Small Projects
To Spotify
- 2021.6 ~ 2021.7
국내 음악 스트리밍 산업의 높은 점유율을 차지하는 앱들이 좋지 않은 UX를 제공하고 있다고 생각합니다. 멜론과 지니 모두 어플리케이션에 오류가 많고 기능상으로 부족하게 느껴졌습니다. 그러던 중 스포티파이 사용해봤는데 좋은 유저 경험을 제공했습니다. 그래서 음악 스트리밍 플랫폼을 바꾸려고 하는데 문제로 내가 지니에서 좋아요 또는 팔로우한 아티스트들과 앨범들, 그리고 제일 중요한 재생목록을 스포티파이로 이전하기가 힘들어서 그 플랫폼에 묶여있었습니다. 하나하나 옮기기에는 너무 많은 양이었기에 자동화가 필요한 케이스라 생각했습니다. 스포티파이는 Web API를 제공하고 있기에 곡과 팔로우 아티스트 등의 유저 데이터를 이전하는 개발을 진행할 수 있었고, 유저 데이터로 인해 음악 스트리밍 플랫폼에 묶여있는 유저들이 많은 것이기에 NPM에 배포하여 누구나 사용할 수 있도록 하였습니다. 그리고 document 페이지도 만들어서 이용장벽을 낮추려고 했습니다.
Vitepress
플레이리스트와 좋아하는 가수, 앨범까지
http://2spotify.seongland.com/
Github Setter
2021.11 ~ 2021.12
As you develop, the number of projects you manage, or Github repositories, increases. Although Github provides various APIs and management UI for repository management, there is no function for the simultaneous setting of multiple repositories. It can be physically difficult to set up features such as branch protection, issue label setting, or uploading commonly used lint config files or
.github folder to multiple repositories individually.To solve this issue, I developed a code that can upload files to all selected repositories or configure various repositories. This code is also distributed on NPM and is useful for managing my repositories.
github-setter
seonglae • Updated 2025 Feb 11 11:17
Github Setter
- 2021.11 ~ 2021.12
개발을 하다 보면 관리하는 프로젝트들 즉 Github repository들이 점점 늘어납니다. Github는 repository 관리를 위한 다양한 API와 관리 UI를 제공하고 있지만 여러 리포지토리에 대한 동시설정에 대한 기능은 존재하지 않습니다. branch protection이나 issue label 세팅 또는 공통적으로 사용하는 lint config 파일 또는 .github 폴더 업로드와 같은 기능들이 여러 리포지토리에 개별적으로 설정하는 게 물리적으로 힘들었습니다. 그래서 선택한 모든 리포지토리에 파일을 업로드한다거나 다양한 리포지토리 설정을 하는 코드를 개발하였습니다. 이 프로젝트 역시 NPM에 배포하였고 제 리포지토리들을 관리하는 데에 유용하게 사용하고 있습니다.
github-setter
seonglae • Updated 2025 Feb 11 11:17
Screencast
- 2021.5 ~ 2021.8
화면을 녹화할 때에 촬영자가 어떤 키를 입력하고 있는 지, 어떤 마우스 액션을 하고 있는 지 알수가 없습니다. 그래서 화면에 입력중인 키나 마우스 액션을 시각화시켜주는 어플리케이션을 만들었습니다. 이름은 VSCode의 Screencast에서 따왔습니다. AHK로 기반이 되는 소스를 찾고 커스텀한 뒤에 electron으로 wrapping 하였습니다. 이는 Intuiter와 같은 구조이며 이 프로젝트 역시 Winget에 배포되어 있어 쉽게 설치하여 사용할 수 있도록 하였습니다.
screencast
seonglae • Updated 2026 Apr 10 23:21
Other Developments
NPM Modules
Code Separation
어떤 언어든 간에 프로그래밍을 하며 기능별로 응집성있는 코드들을 분리해서 재사용하도록 리팩토링하는 건 더 고차원적 기능을 구현하는 데에 중요한 역량이라고 생각합니다. 저는 그래서 팀내에서 NPM 모듈로 분리가능한 코드를 모듈화하여 관리하고 있습니다. 다양한 모듈들 내에서도 추상 클래스를 이용하거나 import, export 폴더구조를 직관적으로 설계하여 기능에 따라 코드를 분리할 수 있었습니다.
Module Test
사내 NPM 모듈들은 일부 Testyts라는 테스트 프레임워크를 이용해서 테스트했습니다. 이후에 coverage 시각화 및 다양한 테스트 기능을 가지는 Vitest라는 테스트 프레임워크로 이전하고 있습니다. 기능 개발에 따른 테스트 추가를 강제하고 있으며, 배포에 테스트코드를 분리하여 배포하는 구조도 직접 구축하였습니다. 그리고 사내 모듈은 pnpm workspace를 이용해서 하나의 모노리포에서 공통되는 의존성을 관리하고 있습니다.
Module build
Typescript로 작성된 모듈들을 tsc로 빌드하여 사내 npm registry안에 배포하며 관리중입니다. Typescript 뿐만 아니라 C++로 작성된 코드도 node-gyp 및 node addon을 이용해서 빌드하여 배포하고 있습니다. 그리고 배포를 위한 빌드 툴로 tsc외에도 esbuild를 이용하거나 다양한 빌드 방법을 시도해보고 있습니다. github-setter가 대표적으로 제가 esbuild를 이용하여 배포하고 있는 프로젝트입니다.
npm
https://www.npmjs.com/~seonglae
Service Deployment
예전부터 여러 개인 프로젝트를 개발해보며 크게 느낀 점은 웹은 배포가 비교적 쉬운 플랫폼인데에도 배포에 많은 노력과 시간이 들어간다는 것입니다. 여러 프로젝트를 개발하며 배포의 중요함을 많이 느꼈고 다양한 방면으로 시도해 보게 되었습니다
Azure Pipeline
Azure Build Pipeline을 통해 이미지를 사내 registry 에 main branch 커밋별 또는 태그별로 자동업로드하는 시스템을 구축하여 이용하고 있습니다. 그리고 사내 서비스에 Azure Release Pipeline 인스턴스에 직접 배포하는 기능을 구축해보기도 했습니다.
Github Action
Github Action으로 3trees, Seongland 도커 이미지를 빌드하여 자동으로 Github container registry 업로드하는 프로세스를 사용하고 있습니다. GCP를 이용중이 때에는 static build한 파일을 GCP bucket으로 gsutil cp를 통해 배포 플로우를 구현한 경험도 있습니다.
Github action으로 Intuiter는 electron을 build 해서 exe로 만들고 exe로 배포합니다 Winget에 배포는
micosoft/winget-pkgs에 pull request 까지 자동으로 manifest를 만들어서 추가했는데 현재는 해당 리포에 배포를 찾는 자동화 툴이 있어서 해당 Github action은 삭제한 상태입니다. 이 방식은 같은 electron기반 프로젝트인 screencast에도 동일하게 적용되어 있습니다. 그리고 seongland project에서 cloudflare worker에 worker source code를 빌드하여 자동으로 배포하는 github action도 구현해본 경험이 있습니다.
Linux Container
컨테이너 이미지 빌드가 필요없는 간단한 웹 프로젝트에서는 Vercel 서비스를 사용하지만 컨테이서 이미지 사용이 필요한 프로젝트들이 있습니다. 그래서 서비스 자동배포에서 container는 어려운 과제였지만 꼭 필요했습니다. 하지만 개념과 내부 구조의 이해가 어려웠기에 여러번의 시도로 컨테이너의 구조와 역사에 대해서 이해하려 하며 많은 프로젝트의 배포에 적용해 보았습니다. 웹 앱의 Docker와 docker-compose를 이용한 배포를 다양하게 진행하며 사용에 익숙해졌습니다. 로컬 개발에서는 Rancher Desktop을 주로 이용하고 있습니다.
Kubernetes
컨테이너를 그냥 실행하는 docker run 또는 docker-compose 기반의 인스턴스 배포는 서비스를 업데이트하려면 중단이 필요했기에 새로운 배포 방식이 필요했습니다. 쿠버네티스에 대한 이해가 부족할 때에는 컨테이너 배포 플랫폼으로 GCP에서 LB와 Cloud run조합을 주로 사용하다가 해당 플랫폼은 오픈소스가 아니기에 내부구조를 모르고 오류가 발생했을 때 대처할 방법이 없었습니다. 그래서 좀더 호환성있는 오픈소스 기술인 Kubernetes의 사용할 필요성을 느꼈습니다. 여러 Kubernetes Distribution 중에서 Managed Kubernetes cluster를 좋은 가격에 제공하는 Okteto라는 플랫폼을 선택했습니다. 해당 플랫폼을 이용하며 3trees와 seongland를 쿠버네티스 클러스터의 각 네임스페이스로 나누어서 배포하고 있으며, Kubernetes manifest file들을 각각의 리포에서 파일로 관리하며 Rolling update를 통한 무중단 배포하고 있습니다.
Cloud Service
AWS, Oracle Cloud, Azure
다양한 클라우드 서비스 구조 파악과 비교를 위해 게이트웨이, 공공 IP, 인스턴스와 VPC 까지 각각의 클라우드에서 생성해보며 클라우드 서비스 인스턴스에서 웹 앱 접근을 세팅해본 경험이 있습니다.
GCP
GCP같은 경우는 여러 클라우드를 사용해보고 만족감이 높았어서 특히 선.닏합 다.Cloud run, Cloud Build, Cloud Registry, Load Balancer, Cloud Storage, GCP App engine 등을 경험이 있습니다. GCP LB를 앞에두고 backend로 서브도메인이나 경로에 따라 GCP 버켓이나 GCP App engine 또는 cloud run을 연결하는 방식으로 이용했습니다
GCP서비스는 아니지만 Google Search Console과 Google Analytics를 이용해서 제가 개발한 페이지들의 이용을 분석하고 있습니다.
Cloudflare
정확히 Cloud Computing 서비스는 아니지만 DNS관리를 위해서 Cloudflare를 사용하고 있습니다. DNS관리 외에도 도메인을 이용한 다양한 서비스를 제공하는 Cloudflare에서 Cloudflare Workers, app, analytics, Zero trust 등 다양한 서비스를 활용하고 있습니다.
Git
엔터프라이즈급 소스코드의 버전관리에서 개발 태스크 관리가 아주 중요하다고 생각합니다. 개발 태스크 관리를 통해서 프로젝트 진행 방향이 명확해지거나, 효율성이 아주 좋아지거나 아주 나빠질 수 있음을 여러 프로젝트를 통해 경험했습니다.
Azure DevOps
Azure DevOps에서 branch policy와 security를 이용하며 팀내에서 개발문화를 만들어본 경험이 있습니다. 사내에 Semantic Commit과 Semantic branch, Semantic versioning을 활용하여 팀내 소스 관리를 일관성있게 진행하고 있습니다.
Github
혼자 관리하더라도 오랜만에 보는 코드는 이해하기 어렵기에, Github 에서 다양한 프로젝트를 진행하더라도, 이슈별 브랜치를 생성해서 pull request 를 생성하는 방식을 꼭 지키고 있습니다. 그리고 branch protection 으로 main branch에 대한 규칙으로 강제합니다. 같은 이유로 개인 github에서도 Semantic Commit과 Semantic branch, Semantic versioning을 지켜서 일관성있게 소스코드를 관리하고 있습니다.
프로그래밍의 핵심은 반복을 없애는 일이라 생각합니다. 제한된 시간과 스택으로 다양한 프로젝트를 진행하려면 그만큼 반복되는 코드 작성도 많아집니다. 그런 문제를 해결하기 위해 잘 활용하고 있는 기능으로 Github template repository로 다양한 boilerplate를 사용하고 또 public으로 오픈해서 공유하고 있습니다.
seonglae - Overview
Block or Report Simple and Kind is my Software's Motto Infrastructure -GCP,Cloudflare,Docker DBMS -MongoDB,PostgreSQL,MariaDB Language -Javascript,Typescript,CPP,Python Backend -Node.js,Feathers,Sequelize,Mongoose Frontend -React,Vue,Nuxt.js,Next.js Windows HotKey Productivity Automation App AutoHotkey 7 Web 3D Make Make Easily TypeScript 2 May Jun Jul Aug Sep Oct Nov Dec Jan Feb Mar Apr Mon Wed Fri Created 160 commits in 13 repositories Description Unable to access frustum from SelectionBox is hard to utlize SelectionBox Current SelectionBox only check center when select Object (pr...
https://github.com/seonglae
