프로그래밍 217

vue3 i18n 도입 시도하기

기존 vue3 프로젝트의 문구 통일과 국제화 대비겸 vue-i18n 도입을 시도한다.다만, 프로젝트 덩치도 좀 커졌고 vue3+typescript 기반의 코드를 쉽게 자동화처리 해주는 도구는 딱히 없었다. 다행히도 ai가 많이 발전 중인 시기라 cursor의 도움을 받아 스크립트를 만들었다.완벽하게 보다는 가능성을 보려고 조금씩 다듬어가는 식으로 진행했다.script 영역은 일단 무시하고, 컴포넌트의 template 영역만 vue-i18n를 import 하고useI18n()을 선언하여 t 메서드를 가져오게 한뒤, template 태그영역의 한글들을 t로 wrap 해주는 것을 목표로 했다. 아래는 최소한 쓸만한 정도로 완성된 스크립트다.vue3의 props 전달문법이나 그 외 여러케이스, es의 템플릿 리..

vuejs Render Function 이해하기

Render Function이란?Vue에서는 보통 문법을 사용해서 컴포넌트의 마크업을 구성하지만, render function을 사용해서 직접 컴포넌트를 구축할 수도 있다. Vue는 빌드 시점에 우리가 작성한 템플릿을 render function으로 컴파일하는데, 이를 통해 Virtual DOM을 구성하게 된다.왜 Render Function을 사용할까?일반적인 템플릿 문법으로는 구현하기 어려운 높은 수준의 커스터마이징이나 유연성이 필요할 때 render function을 사용하면 좋다. 주로 다음과 같은 경우에 사용하게 된다:복잡한 로직 기반의 동적 컴포넌트 렌더링이 필요할 때Virtual DOM을 직접 다뤄야 할 때JSX를 사용하고 싶을 때기본 예제로 알아보기간단한 컴포넌트를 render funct..

vuejs Renderless Component 패턴 이해하기

Renderless Component란?Renderless Component는 Vue.js에서 컴포넌트의 로직과 표현을 분리하는 패턴이다. 이 패턴은 컴포넌트의 기능을 캡슐화하면서도 시각적인 표현은 제한하지 않는다.. 즉, Renderless Component는 로직과 동작에만 집중하고, 실제 렌더링은 부모 컴포넌트에 맡기는 방식이다.실제 예제로 이해Toggle 컴포넌트 만들기애플리케이션의 여러 부분에서 사용될 수 있는 토글 UI 요소를 생각해보기. 어떤 토글은 버튼으로, 다른 토글은 체크박스나 스위치로 표시될 수 있다.먼저 기본적인 renderless 토글 컴포넌트를 만들어보면 다음과 같다:  이제 이 renderless 컴포넌트를 사용하여 세 가지 다른 스타일의 토글을 만들어보면 다음과 같다: ..

[IOS][SWIFT] AppDelegate에서 백그라운드/포그라운드 push 감지

AppDelegate 메서드IOS에서 앱의 실행상태가 변화할 때 앱 객체는 AppDelegate에 정의된 특정 메서드를 호출한다.내부에서 적절한 메서드를 작성하여 포그라운드와 백그라운드시에 수신에 따른 적절한 처리를 해줄 수 있었다. application; didFinishLaunchingWithOptions 메서드에서 firebase 세팅과 apns 등록을 해준다.추가로 사일런트 푸시 처리 메서드쪽에서 백그라운드인경우 수신을 감지하여 적절한 처리를 해줄 수 있었다.class AppDelegate: NSObject, UIApplicationDelegate { func application(_ application: UIApplication, didFinishLaunchingWithOptions la..

html video태그가 android 인앱에서 컨트롤 나오는 현상

이벤트 웹페이지를 이번에 만들게 되면서, 상단영역은 애니메이션이 많아 css로 구현하기 애매해서 video태그로 영상파일을 embed하는 식으로 진행을 했다. 작업시간을 줄이기위해 bootstrap기반으로 진행하였고, 웹&모바일용 영상파일을 두어 반응형에 따라 스위칭되게 하였다. 웹으로 접속시 모바일버전 영상은 안보이는데 브라우저 사이즈를 줄여서 모바일 사이즈로 줄이니 그때서야 재생이 되더라. display가 안된상태에서는 정지되고, display되는순간 재생되는건 이번에 알게되었다 ㅋ. (오히려좋음) 다만, 인앱(android)에서 로드시에 위 html 상태라면 컨트롤이 보이는 피드백이 있더라. video 태그면 어쩔수없나 해서 gif나 canvas sprite로 처리하려했으나, 마지막으로 video ..

vuejs 반응형 sprite canvas 만들기

canvas와 감싸는 container div를 만든다. 이때, 상위 부모의 사이즈가 반응적이어야 한다. 보닌(본인)은 sprite 진행 이전 poster 이미지를 하나 두고 사이즈를 가져올수 있게끔 하였다. poster이미지의 가로세로가 줄어들든 늘어나든 canvas를 감싸는 container의 가로세로를 해당 poster 이미지 가로세로로 세팅해주면 되기때문이다. 시작 각 ref변수와 sprite에 사용할 변수도 만들어준다. const spritePosterRef = ref(); // 애니메이션 이전 폴더블 이미지 영역 const spriteContainerRef = ref(); // 애니메이션 전체 영역 const spriteRef = ref(); // 애니메이션 캔버스 영역 const isLoad..

mac에서 github 계정 여러개 관리하기(회사용/개인용)

회사용 macbook에서 개인 계정의 작업물을 수정하고자할 때, 세팅을 해두지 않으니까 작업하려면 여러가지로 불편하기도 해서 세팅을 하도록 한다. 1. ssh key를 생성한다. $ ssh-keygen -t rsa -b 4096 -C "회사 git 이메일" 입력하면 Enter file in which to save the key 라고 키를 저장할 파일을 입력하라고 한다. (기본은 id_rsa라는 이름을 가진다) 본인은 아래와 같이 /Users/parkjh/.ssh/company-git 이라고 입력하였다. Enter passphrase (empty for no passphrase): Enter same passphrase again: 암호를 설정하라는 위 단계는 엔터 두번으로 건너뛴다. 생성하면 ~/.ss..

프로그래밍/GIT 2023.07.11

vuejs 슬롯머신 만들기

vuejs slotmachine 만들기. (슬롯에 사용한 이미지대신 텍스트로만 기록하겠다.) 3가지 라인이 있는 슬롯머신인데, 가운데는 그대로있고 첫번째와 세번째만 회전하는 슬롯머신을 구현하게 되었다. 첫번째 슬롯에는 1,2,3이 들어간다. 두번째는 0값으로 고정. 세번째는 각 나라별 화폐단위가 위치한다. ex) 첫번째슬롯이 2, 세번째 슬롯이 jpy가 오게되면 20 jpy가 된다. 먼저 머신 div 객체에 해당하는 ref객체를 만들고, 관련 배열을 생성한다. // 슬롯머신 진행중 여부 const isSpining = ref(false); // 슬롯머신 라인 div 접근 객체 ref const slotNumberRef = ref(); // 첫번째 라인 const slotUnitRef = ref(); //..

scss vw 변환 함수 사용

반응형 코딩시 %계산만 사용해오다 vw를 사용하는식으로 최근에 작업을 했는데 괜찮은듯하여 기록한다. 모바일 디자인만 있고(최대 840px) 이하로 줄어들면 비율대로 줄어야하는 case 였다. $mobile-size: 840; /* vw 변환 function */ @function vw($target) { @if type-of($target) == number { @return calc(($target * 100) / $mobile-size) * 1vw; } @else if type-of($target) == list { $vw: (); @each $value in $target { @if type-of($value) == number { $vw: append($vw, calc(($value * 100) ..

vuejs 룰렛만들기

룰렛을 적용시킬 원판이미지와 배열을 준비한다. 이미지는 테스트로 첨부하니 테스트를 원하면 사용하도록. /** * # 스크립트 준비 */ // 룰렛결과 배열 const itemList = [ {value: 0, label: "샌드위치"}, {value: 1, label: "핫도그"}, {value: 2, label: "도너츠"}, {value: 3, label: "마카롱"}, {value: 4, label: "아이스크림"}, {value: 5, label: "에그타르트"}, {value: 6, label: "크로와상"}, {value: 7, label: "케이크"}, {value: 8, label: "면세점 상품권"}, {value: 9, label: "우주패스"}, {value: 10, label: "영..