Vuetify3 와 vue3를 활용해서 dynamic confirm 컨퍼런트 생성하기.

이번에 vuetify3와 vue3를 사용하는 프로젝트에서 confirm component를 개발해야해서 찾아서 개발해보던 중에 관련된 리소스가 많이 존재하지 않는것 같아, 이 내용을 공유할려고 합니다. 저는 이런 방식으로 dynamic Confirm 컨퍼런트를 개발했습니다.

개발해야하는 Component 설명

https://vuetifyjs.com/en/components/dialogs/#usage

해당 Component를 통해 유저가 액션이 발생할 경우, 한번 더 확인하는 형태의 수단으로 사용

문제점:

기본적으로 component를 사용하는 page에 import후에 이벤트를 받아서 사용해야했음.

이 경우 불필요하게 모든 페이지 내에 해당 component를 import해야하는 번거러움이 생김.

또 코드가 수정되거나 이름이 변경되었을 경우 사용하는 모든 페이지에 내용을 수정해야함

해결방법:

Dynamic Component를 사용해서 dialog를 로딩하고, 결과값을 promise를 통해 전달 받도록 작업

샘플 코드

confirm/index.js

import Confirm from './Confirm.vue';  

export function confirm(options={}) {
	const wrapper = document.createElement('div');  
	document.body.appendChild(wrapper);  

	return new Promise((resolve) => {  
		let app;  
		const comp = h(Confirm, {  
			message: message,  
			value: true,  
			onDestroy: (value) => {  
				resolve(value);  
				app?.unmount();  
				app = undefined;  
			},  
		});  
		app = createApp(comp, options.props);  
		app.use(vuetify);  
		app.mount(wrapper);
	});
}  

confirm/Confirm.vue

<template>  
	<v-dialog  
	:model-value="value"  
	:persistent="persistent"  
	:max-width="maxWidth"  
	@input="change"  
	>  
		<v-card>  
			<v-card-title>{{ title }}</v-card-title>  
			<v-card-text>{{ message }}</v-card-text>  
			<v-card-actions>  
				<v-spacer />  
				<v-btn v-if="selectable" text color="red" @click="choose(false)">No</v-btn>  
				<v-btn text color="green" @click="choose(true)">Yes</v-btn>  
			</v-card-actions>  
		</v-card>  
	</v-dialog>  
</template>  
  
<script setup>  
import { ref } from 'vue';  
  
const props = defineProps({  
	message: {  
	type: String,  
	default: '',  
	},  
	onDestroy: {  
	type: Function,  
	required: true,  
	},  
});  
  
const value = ref(true);  
  
const change = (open) => {  
	if (open) {  
	return;  
	}  
	props.onDestroy(val);  
};  
const choose = (val) => {  
	props.onDestroy(val);  
	value.value = val;  
};  
</script>  

pages/SamplePage.vue

<template>

...  

</template>  

<script setup>
	import {confirm} from './confirm';

	const userAction = async () => {
		const result = await confirm({ message: "Are you Sure?" });
		.... 
	}  
</script>  

저의 경우는 이런식으로 코드를 구성해서 개발했습니다. vue3에서 제공하는 createApp과 h 를 통해 component 와 vuetify3 library를 use 함수를 통해 inject 시키고 그 이후에 wrapper html을 생성해서 해당 dom안에 component를 매핑하는 방식입니다.
h함수에서 onDestory 함수를 구현해서 props로 전달했고, component내에서는 액션이 발생시에 props 에 있는 onDestory를 호출하고 그 결과값을 Promise의 resolve로 호출 하는 방법입니다.
이걸 통해 samplePage에서는 별도의 confirm로딩 없이 함수형태로 사용할수 있게 되었습니다.

 Mac에서 docker 실행시에 행이 발생할때

Mac을 메인 PC로 작업을 진행중에 갑자기 docker 실행시에 hang이 걸리는 이슈가 발생해서 해당 관련 내용에 대해 오류를 수정하다가 해당 내용이 공유가 되면 좋을것 같아서 이렇게 적습니다.

 

저는 방법을 찾던중에 docker 버전이 자동 업그레이드 되면서 발생한 이슈로 판단해서 기존에 PC에 깔려있는 docker를 지우고 새로 설치하는 형태로 이슈를 해결하였습니다.  

이때 주의할 점은 기존에 docker를 Mac에서 지웠다고 하더라도 관련된 리소스들은 제거 되지 않아 문제가 원활하게 해결 되지 않습니다. 그래서 아래 내용을 통해 관련된 docker 리소스를 다 제거 후에 재 설치를 해줄 경우 docker가 정상 동작합니다.

rm -rf ~/Library/Group\ Containers/group.com.docker
rm -rf ~/Library/Containers/com.docker.docker
rm -rf ~/.docker
cd /usr/local/bin
sudo rm -rf docker docker-compose docker-compose-v1 kubectl.docker com.docker.cli 

https://github.com/docker/for-mac/issues/6576#issuecomment-1315409976

Application Load Balance에서 ecs websocket 서버 연결시 연결 안되는 문제

 Application Load Balancer 에서 ECS websocket 서버 연결시 연결 안되는 문제

기존에 ECS에서 서비스를 생성해서 alb (Application Load Balancer)와 target_group을 통해서 연결을 했습니다.  이번 경우에는 websocket 서버를 ecs에 service로 띄우고 나서 그걸 alb를 통해 클라이언트에서 접근할때 발생할수 있는 이슈에 대해서 적을려고 합니다.

다행히 2016년 부터 ALB에서 websocket 및 http2 프로토콜을 지원해서 따로 기존에 사용하는 load balancer 바꿀 일은 없었습니다.

관련 자료.

* https://aws.amazon.com/blogs/aws/new-aws-application-load-balancer

 

기존의 방식 대로 alb의 rule을 적용 시에 ws://DOMAIN_NAME으로 접근 할 경우 접근이 불가능하다는 이슈 발생

* 이 경우 alb 에서 세팅된 rule의 stickiness가 enable 상태인지 확인 안되어있을경우 enable 상태로 하고 ws에 접근할 경우 접근 이 잘 되는걸 확인할수 있습니다.

 

 

 저희 경우는 해당 이슈 빼고는 다른 이슈는 발생하지 않아서 여기서 마무리하도록 하겠습니다.

또 다른 웹 소켓을 사용하는 중에 다른 이슈 발생시 해결 방법에 대해 공유하도록 하겠습니다.

구글 인앱 백엔드 API 연결시에 purchase.subscriptions API 사용시 401 에러 발생 해결방법

 구글 인앱 백엔드 API 연결시에 purchase.subscriptions API 사용시 401 에러 발생 해결방법

구글 인앱 결제에 대한 내용을 가져오기 위해 purchase.subscriptions API를 사용해야하는데 그 경우 올바른 서비스 계정을 사용했음에도 불구하고 401 에러 발생

이유는 Google Play Developer Reporting API가 off 되어있어서 발생한 이슈 해결 기능 On 한후에는 purchase.subscriptions API를 백엔드에서 정상 동작함.

Leetcode 25h August

Sum of Square Numbers

이 문제는 a² + b² = c 가 존재하는지 체크 하는 로직입니다.

This problem is checking whether has a condition values like a formula that a² + b² = c

이경우 저는 c - a² 값을 저장한 DP 리스트를 만들고, for 문을 돌면서 math.sqrt가 정수인 값을 찾도록 있을 경우 True 없을 경우 False를 리턴하는 방식을 사용했습니다.

in this case, i create one list named DP, in theirs they saved c - a² value until a * a <= c after that loop the dp and checking whether the square root of element is integer value or not

Python

class Solution:
    def judgeSquareSum(self, c: int) -> bool:
        dp = []
        i = 0
        j = 0
        while i * i <= c:
            dp.append(c - i * i)
            i += 1
        for x in dp:
            if math.sqrt(x) % 1 == 0:
                return True
        return False

Leetcode 24h August

Complex Number Multiplication

이 문제는 두개의 String 값이 주워졌을 경우, 파싱을 통해 실수와 허수 나누고 그것에 대한 곱을 계산해서 리턴하는 문제입니다.

This is the problem when they given two string value then return value that product of two imaginary numbers after parsed

이경우는 단순히 String parsing 이기 때문에 딱히 방법없이 split 메소드를 사용해서 값 가져오고, 그 후에 계산해서 리턴하였습니다.

in this case, i don’t need to a specific way, i just used split method given default by language, and then return calculated value from parsed data.

Java

class Solution {
    public String complexNumberMultiply(String num1, String num2) {
        String[] arrOfNum1 = num1.split("\\+");
        String[] arrOfNum2 = num2.split("\\+");
        int x = Integer.parseInt(arrOfNum1[0]);
        int y = Integer.parseInt(arrOfNum2[0]);
        System.out.printf("%d %d \n", x, y);
        int xi = Integer.parseInt(arrOfNum1[1].split("i")[0]);
        int yi = Integer.parseInt(arrOfNum2[1].split("i")[0]);
        int ans1 = (x * y) + ((xi * yi) * -1);
        int ans2 = (x * yi) + (xi * y);
        return ans1 + "+" + ans2 + "i";
    }
}

Leetcode 23th August

Two Sum IV - Input is a BST

이 문제는 Tree에서 두개를 선택해서 합이 K가 되는 경우의수가 존재하는지 확인하는 문제입니다.

This problem is checking condition that when you choose the two element in tree the sum of the elements value are same as K

이경우 저는 일단 Tree을 순회하면서 값을 List에 추가한 후에 이중 for loop를 통해 두개의 합이 k가 되는 값이 있는지 체크 하는 방법을 사용했습니다.

for this case, first of all i gathering a every elements value in tree use dfs algorithm, then try to found a has a case that the sum of two elements is same as k

Java

/**
 * Definition for a binary tree node.
 * public class TreeNode {
 *     int val;
 *     TreeNode left;
 *     TreeNode right;
 *     TreeNode() {}
 *     TreeNode(int val) { this.val = val; }
 *     TreeNode(int val, TreeNode left, TreeNode right) {
 *         this.val = val;
 *         this.left = left;
 *         this.right = right;
 *     }
 * }
 */
class Solution {
    public boolean findTarget(TreeNode root, int k) {
        List<Integer> list = new ArrayList<Integer>();
        Queue<TreeNode> pq = new LinkedList<>();
        pq.add(root);
        while(pq.size() > 0) {
            TreeNode q = pq.poll();
            list.add(q.val);
            if (q.left != null) {
                pq.add(q.left);
            }
            if (q.right != null) {
                pq.add(q.right);
            }
        }
        for (int i =0; i < list.size() -1; i ++)
            for (int j = i + 1; j < list.size(); j++) {
                if (list.get(i) + list.get(j) == k)
                    return true;                
            }

        return false;
    }
}