Creative Repository

UBUNTU / VirtualBox 속도 느려지는 문제

Dev. Jkun — Fri, 10 Jan 2025 17:51:21 +0900

단순히 VirtualBox 에 해당하는 문제는 아닌 듯 싶지만. 전체적으로 포스팅 한다.

일단 UBUNTU 22.04 를 개발환경으로 구성하고 (이 시점에서 24는 다양한 패키지들간의 호환성 문제로
그냥 22.04 로 구성했다.

시스템

디스플레이 및 비디오

개발을 목적으로 사용하려 했기 때문에 넉넉하게(?) 부여해주었다.
원래는 비디오 메모리를 64로 했는데 128로 늘려놓았다. 그런데도.... 느리고...

그런데 VSCode 를 쓰던, 브라우저를 불러오던 계속 화면이 멈추고 그냥 강제종료 되고,
해서 스트레스 발생;;;;

일단 주요문제는 화면이 멈추고 반응이 없는거. 기다리면 다시 돌아오기 까지도 시간이 꽤 걸림
하지만 이 방법으로 아직까지 문제가 없기에 포스팅한다.

그래서 구글링을 해서 확인해보니 스왑파일 크기의 문제가 주 원인이었던 것 같다.
스왑파일의 권장유형을 확인해보니 다음과 같다.

현재 RAM (VirtualBox 설정확인)	권장 (일반적 사용)	권장 (전문가?)
2GB	2GB	4GB
4GB	2GB	4GB ~ 6GB
8GB	2GB ~ 4GB	6GB ~ 8GB
16GB	2GB ~ 4GB	6GB ~ 8GB

1. 스왑 파일의 상태부터 확인하자.

# 상태확인
swapon --show

# 결과
NAME       TYPE SIZE USED PRIO
/swapfile  file 4G   0B   -2

2.스왑 재설정

# 현재 스왑 파일 비활성화
sudo swapoff /swapfile

# 기존 스왑 파일 삭제
sudo rm /swapfile

# 새로운 스왑 파일 생성 (4GB)
sudo fallocate -l 4G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile

# 파일에 아래 내용이 있는지 확인할 것
cat /etc/fstab
/swapfile none swap sw 0 0

# 스왑사용량 확인
free -h
              total        used        free      shared  buff/cache   available
Mem:           8.0G        3.2G        3.5G         50M        1.3G        4.5G
Swap:          4.0G          0B        4.0G

필요에 따라 동적설정이 있다는데 아직까지 안궁금함.

하지만 이 문제는 버추얼 박스만의 문제는 아닐 거 같긴하다.

window.opener 메세지 보내기 (부모창 함수 호출)

Dev. Jkun — Sat, 23 Mar 2024 19:17:54 +0900

자식 창에서 데이터를 수정하고 난 후, 부모창에 데이터를 전달해야하는데 몰랐던 API 가 있었다.

window.opener.postMessage

자식 창 (Child Window)

window.opener.postMessage('parentWindowMessageSend', '*');

부모 창 (Parent Window)

window.addEventListener('message', (event) => {
	if (event.data === 'parentWindowMessageSend') {
		// action
	}
});

생각보다 개발하고 있는 Vue/Nuxt 기반 프로젝트 새 창을 띄우는 일이 많았다.
그런데 pinia/store 로도 데이터가 전달이 안되서 위와 같은 방식으로 해결을 해야했는데.. 일단은 현재까지 큰 문제는 없는 듯.

TypeError: Cannot read properties of null (reading 'parentNode')

Dev. Jkun — Wed, 17 Jan 2024 12:38:55 +0900

Nuxt / Vue (Version 3 기준)

위와 같은 오류가 지속적으로 발생하는데 캡쳐모를 못해놓음. 일단 메세지는 위와 같음.

내용을 읽어보다 예전에 Nuxt/Vue 2 때 본 거 같아서 혹시나 해봤더니 역시나 였음;;
정확한 원인이 아닐 수 도 있지만 그때도 가끔씩 Vue 나 Nuxt 버전 업데이트때 생겼던 것 같아서
일단 정신건강상 개발규칙으로 해놓음.

코드 컨벤션 툴등을 이용하여 규칙화시키면 관리용이.

<!-- 이전코드 -->
<script setup>

</script>
<template>
	<NuxtLayout name="app">
		<slot />
	</NuxtLayout>
</template>

<!-- 변경 후 -->
<script setup>

</script>
<template>
	<div id="app">
		<NuxtLayout name="app">
			<slot />
		</NuxtLayout>
	</div>
</template>

결국엔 NuxtLayout 컴포넌트 위에 루트 엘리먼트가 있어야 했던 것임.
추가적으로 관련 이슈가 github 에도 있다. 다양한 케이스가 있겠지만 위 코드로도 해결이 안되면 확인해보시길

Vue3 / div 엘리먼트에서 contenteditable 을 반응형으로

Dev. Jkun — Fri, 12 Jan 2024 04:02:19 +0900

Vue3 Composition API 기준으로 작성했다.

어쨌든 잘못된 기획으로 인하여 불필요한 코드를 작성했지만, 메모해둘 필요는 있는 듯 하여 포스팅을 한다.
특별한 건 없다. 코드 작성구조 및 방식만 메모해두는 거니

HTML (Template)

<template>
	<div contenteditable="true" v-html="editData.edit" @input="updateStyling($event.target)"></div>
</template>

Javascript (Vue.js 3 / Composition API)

const editData = reactive({
	origin: '',
	edit: ''
});
const updateStyling = (eventTarget) => {
	editData.edit = eventTarget.innerHTML.toString();
};

@input 이벤트에서 target 까지만 함수 파라미터로 넘겨주어야 innerHTML 속성에 접근할 수 있다.

TailwindCSS SVG Icon 사이트 모음

Dev. Jkun — Thu, 11 Jan 2024 01:31:58 +0900

찾기에 지쳐서, 정리를 해놔야지 겠다 싶었는데 이제서야 한다;;

https://www.mingcute.com/

MingCute Icon _ Carefully Designed Icon Library

www.mingcute.com

https://remixicon.com/

Remix Icon - Open source icon library

remixicon.com

https://basicons.xyz/

Basicons

Basic icons for product design & development

basicons.xyz

https://pixelarticons.com/

Pixelarticons

480 open-source line pixel-art style icons, in one color and made with a 24x24px grid by Gerrit Halfmann. Pro version with 1,920 icons with 3 variants!

pixelarticons.com

https://www.tailwindtoolbox.com/icons

Tailwind Toolbox - Free Starter Templates for Tailwind CSS

Free open source Tailwind CSS starter templates to get you started quickly to creating websites in Tailwind CSS!

www.tailwindtoolbox.com

[OSX] 파인더(Finder)에서 Visual Studio Code 폴더/파일 열기

Dev. Jkun — Tue, 24 Oct 2023 14:40:12 +0900

파인더에서 VSCode 로 폴더나 파일을 열려는데, 따로 없어서 불편했는데 Automator 를 이용하면 간단하게 해결할 수 있었다.

1. 스포트라이트 (Sportlight) 로 Automator 를 검색한다.

2. 신규문서를 생성하여 문서유형이 "빠른 동작" 을 선택한다.

3. 동작에서 "파일 및 폴더" 를 선택하고 "Finder 항목열기" 를 선택한다.

4. 드래그앤 드롭으로 우측으로 놓고 아래와 같은 설정으로 맞추어 준다.

선택 항목 위치 : Finder
다음으로 열기 : 기타 선택 하고 응용 프로그램에서 Visual Studio Code 를 선택

이건 설정 완료한 상태

이제 마우스 우클릭으로 실행한 상태

이건 파인더에서 실행했을때

해서 이제 잘된다~~~ 아어~ 별거 아니지만, 불편하셨던 분들에게 도움이 되었길 바랍니다.

[Tailwindcss] 클래스 그룹화

Dev. Jkun — Wed, 18 Oct 2023 21:03:32 +0900

tailwindcss 를 사용하다 보면 현란한 유틸리티 클래스들에 눈이 쾡 해지는 경험을 하게 됬다.
생산성이 너무 좋은데 추후에 가독성이 떨어짐이 있었는데 보니 css 를 그룹화 할 수 있게 되었다.

Before

<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
  <thead>
    <tr>
      <th scope="col" class="px-6 py-3 text-xs font-medium text-left text-gray-500 uppercase">Blog Name</th>
    </tr>
  </thead>
  <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
    <tr>
      <td class="px-6 py-4 text-sm font-medium text-gray-800 whitespace-nowrap dark:text-gray-200">JKUN.NET</td>
    </tr>
  </tbody>
</table>

이렇게 위와 같이 있으면 읽기가 빡씨다..
그런데 이것을 그룹화 시키면 보다 더 구조화하고 가독성을 향상시키며 간단하게 사용할 수 있다.

CSS

@layer utilities {
	.table-basic {
		@apply min-w-full text-xs divide-y divide-gray-200 dark:divide-gray-700
	}
	.table-basic thead {
		@apply bg-gray-50 dark:bg-slate-800 dark:text-gray-200
	}
	.table-basic thead th {
		@apply px-6 py-3 text-center
	}
	.table-basic tbody {
		@apply divide-y divide-gray-200 dark:divide-gray-700 dark:text-gray-400
	}
	.table-basic tbody td {
		@apply px-6 py-3 whitespace-nowrap
	}
}

HTML

<table class="table-basic">
  <thead>
    <tr>
      <th scope="col">Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>JKUN.NET</td>
    </tr>
  </tbody>
</table>

이제 한숨 크게 놓인다. ㅎㅎㅎ;;
너무 늦게 알았어.. ㅠㅠ;

[MariaDB] 비밀번호(Password) 변경

Dev. Jkun — Wed, 30 Aug 2023 06:40:49 +0900

set password for '계정'@'host' = password('변경할 비밀번호');

# 정신건강상
flush privileges;

[SSL] UBUNTU 22.04 에서 Certbot 설치 (apt)

Dev. Jkun — Fri, 25 Aug 2023 02:40:06 +0900

certbot 을 설치하려는데 자꾸 snap 을 설치하라고 한다.
그래서 설치할라고 하니까 머라 드러분 에러들인데 보기도 싫다;;

암튼 뭐가 더 좋아져서 그런지는 모르겠으나 일단 설치는 했고, 크으은 차이는 없는 듯하니 그냥 apt 로
진행해도 무방할 듯

## 난 엔진엑스니까!
sudo apt install python3-certbox-nginx

해서 설치가 완료되면 나머지는 똑같을 듯.

자세한 설명은 오피셜 도큐멘테이션 ㅋㅋㅋ

Certbot

Tagline

certbot.eff.org

[LINUX] 로그인 쉘 변경

Dev. Jkun — Tue, 15 Aug 2023 20:32:28 +0900

useradd 로 계정을 생성했는데 기본 쉘 환경이 /bin/sh 였다. 그래서 bash 로 변경하고자 했다.

# 확인
cat /etc/passswd | grep jkun

# >> jkun:x:1000:1000::/home/jkun:/bin/sh

위와 같이 먼저 확인을 하고, chsh 계정 을 실행하여 변경한다.

chsh jkun

# Changing the login shell for jkun
# Enter the new value, or press ENTER for the default
#	Login Shell [/bin/sh]:

위와 같이 실행하면 /bin/bash 로 입력하고 엔터!!!