note

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

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

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

회사용 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..

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(); //..

반응형 코딩시 %계산만 사용해오다 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) ..

룰렛을 적용시킬 원판이미지와 배열을 준비한다. 이미지는 테스트로 첨부하니 테스트를 원하면 사용하도록. /** * # 스크립트 준비 */ // 룰렛결과 배열 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: "영..

서버에서 가져올 enum(wasteType) 목록은 최초 접속시에 store에 없으면, 통신하여 담아두고 사용하고, route 이동시에 store에 담겨있다면 재사용을 합니다. (현재 300여개) 이번에 A 메뉴에 해당 enum리스트가 조건으로 들어가는데, 최초로딩 시 혹은 다른; emun리스트를 한번도 가져오지않는 페이지 > A 메뉴 최초진입시에 ui가 2-5초 멈추는 현상이 발생해서, 해결하는 과정을 기록합니다. 1. vue3 devtools의 performance 체크 페이지 진입을 해보면 IntegratedSearch컴포넌트에 대한 성능 타임라인을 볼 수 있습니다. 실제로는 마우스클릭부터 렌더링까지 시간을 나눠 정확하게 보고싶었는데, 방법을 잘 모르겠어서 통합검색 컴포넌트만 filter를 걸어서 ..

Interface type check at runtime with Typescript 타입스크립트에서 메서드로 받는 parameter가 2가지의 인터페이스로 오는 경우가 생겼다. 한가지는 주소검색으로 특정 위치목록을 받을때는 A라는 interface이고, 주소가 없는경우 서버에 등록후 리턴받을때는 B라는 interface 형태로 받게된다. 이때, A일경우에는 A에만 있는 속성인 c를 사용하고싶고, B인경우에는 B에만 있는 속성인 d.e 를 사용하고 싶었다. 그래서 A타입인지를 구분해주는 함수를 하나 만들었다. export function isAType(workingSpot: A | B): workingSpot is A { if (!workingSpot) return false; return (workin..

집계조회 페이지를 만들어야 하는데, 상품별 데이터는 세로로 나와야하고, 특정 데이터(여기서는 창고)는 가로로 동적으로 만들어야 해서 정리합니다.. 주요 테이블은 2개입니다. 현재 서비스에는 상품을 관리할 수 있는 상품테이블이 있고, 여러가지 기능 중에 창고간에 상품을 이동시킬 수 있는 창고이동이란 기능이 있습니다. 1. 상품테이블 2. 창고이동 테이블 구현해야 할 화면은 아래와 같습니다. 일단 기준은 창고이동 테이블의 데이터이므로 "계" 셀 뒤의 데이터를 조회해봅니다.. SELECT A.PRODUCT_CODE, SUM(A.TOTAL_AMOUNT) AS TOTAL_AMOUNT FROM [창고이동테이블] A WHERE [조건] GROUP BY A.PRODUCT_CODE 상품 코드별로 그룹지어 이동수량을 조회..