전체 글
-
프론트엔드 깃허브 액션 CI 시스템을 이용한 버전관리Dev 2025. 7. 17. 20:34
개요네이티브 앱에 WebView 형태로 연동되는 프로젝트를 진행하면서 버전 관리 자동화의 필요성을 느꼈습니다.테스트 브랜치 기준으로 QA 환경을 운영하는 상황에서, 브라우저 캐시등의 문제로 인해 배포가 실제로 적용됐는지를 파악하기 어려운 상황이 종종 발생했기 때문인데요.GitHub Actions 기반의 CI 환경을 활용해 '버전 자동 증분 및 QA 확인을 위한 워크플로우 구성'의 설계 과정을 적습니다. 개념에 대한 언급CI(Continuous Integration)는 '지속적 통합'의 줄임말.코드가 변경될 때마다 자동으로 빌드, 테스트, 배포 등을 수행해주는 일련의 자동화 프로세스를 말합니다. GitHub Actions는 깃허브 저장소에서 이벤트에 반응해 실행되는 자동화 작업 단위(액션) 를 정의할 수..
-
React hook form과 zod로 form validation 처리Dev 2025. 6. 16. 03:27
react hook form과 zod프론트엔드 개발에서 '폼'은 언제나 핵심적인 UI 컴포넌트 중 하나입니다.유효성 검사와 상태 관리를 현대적으로, 깔끔하게 해결해주는 도구 두 가지가 바로 React Hook Form과 Zod입니다. React Hook Form(이하 RHF)은 React에서 성능 중심의 폼 상태 관리를 가능하게 해주는 라이브러리입니다.주요 특징은 다음과 같습니다.- *Uncontrolled 컴포넌트 기반: 기본적으로 uncontrolled 방식(Form DOM API 중심)을 사용하여 리렌더링을 최소화.- *성능 최적화: 입력 필드의 개수가 많아져도 빠른 렌더링 속도를 유지.- 작은 번들 크기: react-hook-form의 적은 의존성.- 심플한 API: useForm, registe..
-
[지급결제 - 송금 - 은행업의 이해] 은행업무 실무(예금1)domain 2025. 6. 16. 00:09
예금거래의 성질예금 거래의 범위 은행법에 의하여 규율되는 수신업무: 예금, 별단예금, 부수업무- 예금: 보통예금, 저축예금, 당좌예금(입출금 자유로운 예금), 정기적금/상호부금(적립식 예금), 정기예금(거치식 예금)- *별단예금: 자기앞수표발행기금, 당좌개설보증금, 사고신고담보금, 주식납입보관금 등- 부수업무: 어음교환, 회사채 원리급 지급대행 등 자본시장법에 의하여 규율되는 신탁업무 *별단예금: 금융기관이 업무를 수행하는 과정에서 발생하는 미결제, 미정리 자금이나 타 계정으로 처리하기 어려운 일시적인 보관금, 예수금 등을 처리하기 위해 설치한 일시적이고 편의적인 계정 예금계약의 법적 성질 1) 소비임치계약수취인이 보관을 위탁받은 목적물의 소유권을 취득하여 이를 소비한 후 그와 같은 종류, 품질 및 수량..
-
[지급결제 - 송금 - 은행업의 이해] 금융시장과 금융domain 2025. 6. 13. 20:57
금융시장의 분류금융시장은 금융중개기관의 개입여부에 따라 직접금융시장과 간접금융시장으로 구분- 직접금융시장: 자금의 최종수요자와 공급자간에 직접증권의 매매형태로 자금의 수급이 이루어지는 시장- 간접금융시장: 은행이나 보험회사 등과 같은 금융중개기관이 개입하여 간접증권의 매매형태로 자금의 수급이 이루어지는 시장 직접금융시장은 거래되는 금융상품의 만기나 특징에 따라서 통화시장과 자본시장으로 구분- 통화시장: 만기가 1년 미만인 단기금융상품들이 거래되는 금융시장ex) 콜시장, 기업/상업*어음시장, 양도성예금증서시장, 환매조건부채권시장, 통화안정증권시장, *표지어음시장, *CMA시장, ...- 자본시장: 만기가 1년 이상인 장기금융상품이 거래되는 금융시장ex) 채권시장, 주식시장(발행시장/유통시장) *어음: 발행..
-
[지급결제 - 송금 - 은행업의 이해] 통화, 금리 및 통화정책domain 2025. 6. 12. 02:08
통화의 개념통화: 학문적, 이론적 개념의 의미화폐: 실질적인 기능 중심의 의미. (일상적 거래에서 일반적으로 통용되는 지불 수단)- 교환의 매개, 가치의 저장, 가치 척도, *이연지급 *이연지급: 장래 지급채무 화폐로 표시 가능. 가치소멸 X 통화지표의 범위*시장형 상품: 시장 상황에 따라 가격이 변동하는 금융 상품 (ex. 양도성예금증서(CD), 환매조건부채권(RP)*실적배당형 상품: 투자 대상(주식, 채권, 펀드 등)의 운용 실적에 따라 수익률이 달라지는 금융상품*금융채: 은행, 종합금융회사, 카드사 등 금융기관이 자금 조달을 위해 발행하는 *채권.은행채, 카드채, 리스채 등 발행 주체에 따라 구분되며, 조달된 자금은 주로 장기 대출 등 금융기관의 영업에 사용 *채권: 자금이 필요한 주체가 투자자로..
-
Javascript의 런타임 꼬꼬무 1편 (Heap과 GC)CS 2025. 5. 12. 20:40
이 글은 해당 주제에 대해 기초적인 개념에서 더 나아가 한 단계 더 깊이 있는 이해를 시도 해보고자 작성되었습니다. 잘 아시다시피 JavaScript는 기본적으로 싱글 스레드 언어입니다.한 번에 하나의 작업만을 순차적으로 처리하는 실행 모델입니다. 브라우저에서 AJAX, fetch, setTimeout 등의 비동기 작업은 브라우저의 Web API 영역에서 처리하며,이 작업들은 메인 스레드(자바스크립트 엔진)와는 별도의 브라우저 내부 스레드에서 실행됩니다. 이 과정에서 JavaScript Runtime과 관련된 보다 상세한 내용과 궁금증에 대한 해결을 작성합니다. Heap - 세분화와 V8 엔진 구조, 그리고 가비지 컬렉션(Garbage Collection)1) V8 엔진 메모리 구조와 메모리 사용V8엔..
-
CSS-in-JS 성능 최적화: snowflake animation FPS 3배 향상카테고리 없음 2025. 3. 26. 16:56
(차이가 눈에 보일 정도인 것 같기도 하고..)+ https://ideal-dl.tistory.com/26 내용인 Automator를 통해 Mac으로 기록한 영상을 gif로 변환했다. 계절 별로 background image와 banner effect만 교체하는 home 전용 header를 사용하는 구조에서,위와 같은 경고 메시지와 더불어 animation에서 과도한 성능저하가 탐지됨. 개선 전// SnowEffect.tsxconst SnowEffect = () => { const snowflakes = new Array(25).fill(0); return ( {snowflakes.map((_, idx) => ( ))} );};// style.ts (일부)export const Sn..
-
Mac Automator 사용 (용량 압축, webp 변환, gif 변환)ETC 2025. 3. 24. 23:10
자사 기업의 Cafe24 쇼핑몰 운영 내 썸네일 교체 작업에서 일반적으로 웹상에 널리 존재하는 이미지 변환 사이트를 이용하지만, 대부분 이용 횟수에 제한이 있다는 문제를 겪는다. 작업 도중 CTO님이 하셨던 이야기가 생각나 macOS의 Automator를 사용해 보게 되었다. 맥 Automator란 macOS의 기본 앱으로, 특정 폴더에서 발생하는 이벤트(파일 추가, 수정 등)에 따라 지정된 자동화 작업을 실행하는 '폴더 액션' 기능을 제공. 이를 통해 이미지 변환, 이름 변경, 파일 이동 등의 반복적이고 단순한 업무를 자동화할 수 있다.macOS Tiger(10.4)부터 Automator가 기본 포함되어 있었고, 최근 macOS Ventura(13)부터는 "단축어(Shortcuts)" 앱이 기본 자동화..