note

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

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

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를 걸어서 ..