티스토리

Creative Repository

검색하기

블로그 홈

Creative Repository

www.jkun.net/m

노련한 뱃사공은 거친 파도가 만든다

구독자: 0

방명록 방문하기

반응형

주요 글 목록

window.opener 메세지 보내기 (부모창 함수 호출) 자식 창에서 데이터를 수정하고 난 후, 부모창에 데이터를 전달해야하는데 몰랐던 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 로도 데이터가 전달이 안되서 위와 같은 방식으로 해결을 해야했는데.. 일단.. 공감수 0 댓글수 0 2024. 3. 23.
TypeError: Cannot read properties of null (reading 'parentNode') Nuxt / Vue (Version 3 기준) 위와 같은 오류가 지속적으로 발생하는데 캡쳐모를 못해놓음. 일단 메세지는 위와 같음. 내용을 읽어보다 예전에 Nuxt/Vue 2 때 본 거 같아서 혹시나 해봤더니 역시나 였음;; 정확한 원인이 아닐 수 도 있지만 그때도 가끔씩 Vue 나 Nuxt 버전 업데이트때 생겼던 것 같아서 일단 정신건강상 개발규칙으로 해놓음. 코드 컨벤션 툴등을 이용하여 규칙화시키면 관리용이. 결국엔 NuxtLayout 컴포넌트 위에 루트 엘리먼트가 있어야 했던 것임. 추가적으로 관련 이슈가 github 에도 있다. 다양한 케이스가 있겠지만 위 코드로도 해결이 안되면 확인해보시길 공감수 1 댓글수 1 2024. 1. 17.
Vue3 / div 엘리먼트에서 contenteditable 을 반응형으로 Vue3 Composition API 기준으로 작성했다. 어쨌든 잘못된 기획으로 인하여 불필요한 코드를 작성했지만, 메모해둘 필요는 있는 듯 하여 포스팅을 한다. 특별한 건 없다. 코드 작성구조 및 방식만 메모해두는 거니 HTML (Template) Javascript (Vue.js 3 / Composition API) const editData = reactive({ origin: '', edit: '' }); const updateStyling = (eventTarget) => { editData.edit = eventTarget.innerHTML.toString(); }; @input 이벤트에서 target 까지만 함수 파라미터로 넘겨주어야 innerHTML 속성에 접근할 수 있다. 공감수 0 댓글수 0 2024. 1. 12.
TailwindCSS SVG Icon 사이트 모음 찾기에 지쳐서, 정리를 해놔야지 겠다 싶었는데 이제서야 한다;; 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 .. 공감수 0 댓글수 0 2024. 1. 11.
[OSX] 파인더(Finder)에서 Visual Studio Code 폴더/파일 열기 파인더에서 VSCode 로 폴더나 파일을 열려는데, 따로 없어서 불편했는데 Automator 를 이용하면 간단하게 해결할 수 있었다. 1. 스포트라이트 (Sportlight) 로 Automator 를 검색한다. 2. 신규문서를 생성하여 문서유형이 "빠른 동작" 을 선택한다. 3. 동작에서 "파일 및 폴더" 를 선택하고 "Finder 항목열기" 를 선택한다. 4. 드래그앤 드롭으로 우측으로 놓고 아래와 같은 설정으로 맞추어 준다. 선택 항목 위치 : Finder 다음으로 열기 : 기타 선택 하고 응용 프로그램에서 Visual Studio Code 를 선택 이건 설정 완료한 상태 이제 마우스 우클릭으로 실행한 상태 이건 파인더에서 실행했을때 해서 이제 잘된다~~~ 아어~ 별거 아니지만, 불편하셨던 분들에게.. 공감수 0 댓글수 0 2023. 10. 24.
[Tailwindcss] 클래스 그룹화 tailwindcss 를 사용하다 보면 현란한 유틸리티 클래스들에 눈이 쾡 해지는 경험을 하게 됬다. 생산성이 너무 좋은데 추후에 가독성이 떨어짐이 있었는데 보니 css 를 그룹화 할 수 있게 되었다. Before Blog Name JKUN.NET 이렇게 위와 같이 있으면 읽기가 빡씨다.. 그런데 이것을 그룹화 시키면 보다 더 구조화하고 가독성을 향상시키며 간단하게 사용할 수 있다. 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-gra.. 공감수 0 댓글수 0 2023. 10. 18.
[MariaDB] 비밀번호(Password) 변경 set password for '계정'@'host' = password('변경할 비밀번호'); # 정신건강상 flush privileges; 공감수 0 댓글수 0 2023. 8. 30.
[SSL] UBUNTU 22.04 에서 Certbot 설치 (apt) certbot 을 설치하려는데 자꾸 snap 을 설치하라고 한다. 그래서 설치할라고 하니까 머라 드러분 에러들인데 보기도 싫다;; 암튼 뭐가 더 좋아져서 그런지는 모르겠으나 일단 설치는 했고, 크으은 차이는 없는 듯하니 그냥 apt 로 진행해도 무방할 듯 ## 난 엔진엑스니까! sudo apt install python3-certbox-nginx 해서 설치가 완료되면 나머지는 똑같을 듯. 자세한 설명은 오피셜 도큐멘테이션 ㅋㅋㅋ Certbot Tagline certbot.eff.org 공감수 0 댓글수 0 2023. 8. 25.
[LINUX] 로그인 쉘 변경 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 로 입력하고 엔터!!! 공감수 0 댓글수 0 2023. 8. 15.
[LINUX] sudo 사용 (sudoers) 리눅스에서 생성한 계정에 sudo 권한을 주는게 필요할 경우 /etc/sudoers 파일을 직접 수정하는 것 보다는 include 된 경로(/etc/sudoers.d)에 파일을 추가하는게 관리차원에서 더 좋을 것 같다. 먼저 특별한 규칙이 있는 것은 아닌 듯 해 다음과 같이 파일을 추가했다. vi /etc/sudoers.d/sudoer-jkun 그리고 다음 커맨드를 입력하고 저장 jkun ALL=(ALL) ALL # 비밀번호 묻지 않게할 경우 jkun ALL=(ALL) NOPASSWD: ALL 파일 권한 0440 으로 변경 chmod 0440 /etc/sudoers.d/sudoer-jkun 공감수 0 댓글수 0 2023. 8. 15.
리눅스 계정 (생성, 삭제, 보기) 보기 계정이 있는지 확인 cat /etc/passwd | grep 이름 생성 계정을 생성한다. -m : 홈 디렉토리가 생성 (/home/이름) sudo useradd -m 이름 삭제 계정을 삭제한다. -r : 홈 디렉토리까지 삭제 sudo userdel -r 이름 #홈디렉토리까지 삭제 sudo userdel 이름 #계정만 삭제 비밀번호 생성한 계정에 비밀번호를 업데이트 한다. 비밀번호 관련해서 적용시킬때는 될 수 있으면 root 계정으로 접근하여 처리하는게 좋을 듯. sudo passwd 이름 공감수 0 댓글수 0 2023. 8. 15.
프로그래밍 명명 규칙 & 표기법 & Case Style 아이언맨 (iron man) 이란 문자를 다음 표기법들로 정리해 보자. Camel Case (카멜 케이스) ironMan # 첫 시작을 소문자로 시작하여 단어사이를 대문자로 구분. 구분되는 단어의 시작은 대문자로 Pascal Case (파스칼 케이스) IronMan # 시작을 대문자로 하여 단어사이를 구분. 구분되는 단어의 시작도 대문자로 Snake Case (스네이크 케이스) iron_man # underbar ( _ ) 문자로 단어사이를 구분 Kebab Case (케밥 케이스) iron-man # hypen (-) 으로 단어사이를 구분 Hungarian Notation (헝가리안 표기법) strIronMan # 접두어에 자료형을 붙인다. 공감수 0 댓글수 0 2023. 7. 16.
xcode-select 설치가 안될때 xcode-select --install 를 실행하는데 xcode-select: note: install requested for command line developer tools 라고 에러뿜으며 안된다. 터미널 드가서 날려불고 다시 하면 된다; sudo rm -rf /Library/Developer/CommandLineTools‘ sudo xcode-select --install 공감수 0 댓글수 0 2023. 4. 8.
[Nuxt.js (Vue.js) + NginX Proxy] ERR_INCOMPLETE_CHUNKED_ENCODING Nuxt.js 기반으로 개발을 하다 크롬에서 보면 다음과 같은 메세지가... 참 보기가 짜증이 났었다. 꾸주우운히이 발생하는데 꽤나 거슬리는데 아직까지 정확한 원인이나 해결책은 못찾았다. 내가 해본 것은 아래 포스트들을 참고해 보았는데 해결되었다기 보다는 발생빈도가 현저하게 줄었다. 엔진엑스로 알아보는 리버스 프록시 안녕하세요 Mambo 입니다. 오늘은 웹 서비스 인프라에서 리버스 프록시 구성을 위해 사용되는 Nginx와 함께 리버스 프록시에 대해 알아보고자 합니다. NginxNginx는 정적 파일을 배포할 수 있는 HTTP 웹 kdevkr.github.io 위 포스트에서 "이벤트 스트림 프록시" proxy_buffering off; 서버설정에서 위 항목 추가. 그리고 추가적인 포스트로 보면 NginX .. 공감수 0 댓글수 0 2023. 1. 18.
Fast - Dart 3. 상수 상수에 대해서는 따로 언급이 필요한 부분이 있는 것 같아 그냥 포스트로 추가한다. 언뜻 보면 final 과 비슷해 보이지만 작지만 큰 차이가 있다. 중요한 것은 컴파일 시점이다. 상수를 선언하면 컴파일이 되는 시점에 이미 데이터가 존재해야 한다는 것이다. 쓰다 보면 모르고 사용이 되겠지만 사소하거나(?) 큰(?) 실수를 유발할 수 도 있는 요소인 것 같다. const URL = 'jkun.net'; 혹시나 자바스크립트 처럼 const 키워드 후 함수를 공감수 0 댓글수 0 2023. 1. 10.
Fast - Dart 2. 변수 (2) / late late 수식어로 포스팅을 추가적으로 한다. 생소한 것은 나누어서 보는게 더 기억과 이해가 수월했던 것 같다. late 는 final 이나 var 앞에 붙여주거나 변수 데이터 유형에 따라 붙여줄 수 있다. late final name; late final String name; late var name; late 를 붙여주면 변수를 먼저 만들고 데이터를 나중에 할당할 수 있게 해주는데, 특이한 점은 데이터를 할당 전에는 접근이 불가능하다는 것이다. late var name; print(name); 위 코드를 실행시켜 보면 다음과 같이 에러가 발생한다. late 변수 name 에 값이 할당되지 않았음을 알려주고 있다. API 요청을 받은 후 처리할 때 유용할 것 같다. 공감수 0 댓글수 0 2023. 1. 10.
Fast - Dart 2. 변수 (1) 일단 다음 상황들로만 인지하는게 Fast 할 것 같다. 변수 // 명시적 int n = 7; String url = 'jkun.net'; // 임의. 선언과 동시에 할당하는 데이터의 유형으로 판단. var name = 'jkun'; // 여러가지 타입을 가질 수 있는 변수 (dynamic) dynamic name; // Dynamic var name; // 선언하면서 데이터가 할당되지 않았으므로 dynamic 유형 // API 나 JSON 데이터를 받아올 시에 유용하겠으나 type 검사를 해야하는 피곤한 코드량이 // 늘어날 수 도 있을 것 같다. // 명시적이거나, var 키워드로 선언과 동시에 할당하는 변수는 같은 유형의 데이터로만 업데이트가 가능 // 다음 경우는 다이나믹 유형이므로 가능 var a.. 공감수 0 댓글수 0 2023. 1. 10.
Fast - Dart 1. 학습환경 Dart 를 공부하기 위해서이니 가장 빠르게 학습환경을 가져오는게 좋겠다. IDE / Editor 는 Pass! DartPad 로 가자. 아마 Dart를 학습하거나 Dart 로 개발시 늘 켜놓게 될것 같다. 그리고 정말 마음에 드는 기능인데 코드에 커서를 놓으면 Documentation 이 작동한다는 것 이다. 더 이상의 설명은 무쓸모. 다음은 변수에 대해 정리해보자. Fast - Dart 2. 변수 (1) 다양한 상황은 개발하면서 겪는게 좋을 것 같다. 일단 다음 상황들로만 인지하는게 Fast 할 것 같다. 변수 // 명시적 int n = 7; String url = 'jkun.net'; // 임의. 선언과 동시에 할당하는 데이터의 유형으 www.jkun.net https://www.jkun.net/688 공감수 0 댓글수 0 2023. 1. 10.
[R] 플롯(Plot)을 이미지 파일로 저장하기 R 프로그래밍에서 데이터를 그래프로 시각화하여 화면에 표시할 수 있다. 이때 내장함수를 통하여 이 플롯(Plot) 을 디스크에 이미지로 저장할 수 있다. 플롯은 고정된 크기의 비트맵 이미지 또는 백터 이미지로 저장할 수 있다. 이미지로 저장시 사용되는 함수는 jpeg(), png(), bmp(), tiff() 등이 있다. jpeg() 를 예시로 들었지만 png(), bmp(), tiff() 등은 호출 시 기본 파라미터들이 동일. 혹시 별도 필요한 경우는 옵션을 참조바랍니다. jpeg(file="ex_plot.jpeg", width=600, height=600) hist(GRAPTH_SRC, col="gold") dev.off() 여기서 dev.off() 함수는 모든 플로팅 후에 함수를 호출하여 파일을 저.. 공감수 0 댓글수 0 2022. 11. 11.
[Python] matplotlib 한글깨짐 문제 구동환경 OS : Mac OS X Python Ver : 3.10 matplotlib 에서 한글이 깨지는데 구글링을 하다보면 다양한 내용이 나온다. 일단.. 제일먼저 다음 작업부터 수행하길 권장한다. User 계정에 존재하는 건 윈도우도 동일하다. # User(계정) 경로이동 cd ~/.matplotlib # 파일삭제 # fontlist-***.json 으로 보이는 파일이 있다. 요놈 삭제!!! rm -rf ./fontlist* 해당 위치 파일확인 import matplotlib as mpl mpl.get_configdir() 공감수 0 댓글수 0 2022. 10. 31.
[Pandas] 데이터프레임 동적쿼리 Pandas 데이터프레임에서 동적으로 조회해야 하는데 환장하는 줄 알았다;; filter 메소드도 있고 하지만 상황에 따른 동적으로 조건을 주어야 하는 경우였다. 이미 다른 분들도 많이 알고 계실테지만.. 나는 몰랐기에.. 또 포스팅을 한다. # DataFrame print(DF) A B C 1 2 3 5 2 3 4 8 3 6 2 2 # Query Build queryBuild = 'A == 2 | B == 4' # Result DF_QUERY = DF.query(queryBuild) print(DF_QUERY) A B C 1 2 3 5 2 3 4 8 공감수 0 댓글수 0 2022. 10. 26.
스크립트 실행시 권한 확인 배치 / 데몬 스크립트를 작성할때 실행 권한을 확인이 필요할 때가 있다. 이 때는 id 명령어를 통해서 결과를 확인해 보면 간단하게 알 수 있다. 그럼 sudo 로 실행했을때는 uid=0(root) 가 보이는 것을 확인할 수 있다. 그럼 이제 작성하는 스크립트에 아래 조건문을 넣어주자. #!/bin/bash if [ $(id -u) -ne 0 ]; then # root 계정이 아닌 경우 exit fi 공감수 0 댓글수 0 2022. 10. 24.
R 리눅스(UBUNTU18.04) 에서 여러버전 설치 R 여러 버전들을 (Ex. 3.x / 4.x) 을 설치하기 위해서는 초반 설정이 중요했던 것 같다. 정확은 아니지만 개인적으로 기존에 설치된 r-base 를 지우고 진행하는게 나을 것이란 생각이 들었다. 아마 기존에 이미 해보셨거나, 따라하시다보면 그게 깔끔하단 생각을 하게 될것이라 생각한다. 사전 작업 (R 프로세스를 종료시키고 R 과 패키지를 삭제한다) # R-Studio Server Process Kill # R Base Remove # R Cran Package Remove sudo /usr/sbin/rstudio-server stop ps -ef | grep rstudio-server #kill or pkill 을 통하여 프로세를 중지 # R Base Remove # 설치된 R 패키지를 확인하세.. 공감수 0 댓글수 0 2022. 10. 18.
파이썬에 설치된 모듈 관리 / 모듈 확인 단순 확인 (pip) pip list 하지만 서비스를 배포하고자 할때는 requirements.txt 파일로 만들어서 형상관리 해놓으면 더욱 간단합니다. # requirements.txt 생성 pip freeze > requirements.txt # requirements.txt - Install pip install -r requirements.txt 간단하지만 매우 심플하고 강력합니다. 공감수 0 댓글수 0 2022. 10. 4.
자바스크립트에서 텍스트 파일 읽기 순수 자바스크립트로 텍스트 파일을 읽어들이는 코드 입니다. 공감수 0 댓글수 0 2022. 9. 21.
[ERROR] 서비스 시작 안됨 mariadb.service start operation timed out. Terminating 본문 : https://mariadb.com/kb/en/what-to-do-if-mariadb-doesnt-start/ What to Do if MariaDB Doesn't Start Troubleshooting MariaDB when it fails to start. mariadb.com 다음 경로에 해당 파일을 만들고 아래 내용을 넣어놓고 저장. 그리고 마리아디비(mysql) 재시작 해보자. sudo vi /etc/systemd/system/mariadb.service.d/homedir.conf ## homedir.conf ## [Service] ProjectHome=false sudo systemctl daemon-reload sudo systemctl start mariadb 나는 일단 이렇게 해.. 공감수 0 댓글수 0 2022. 7. 29.
[ERROR] ImportError: cannot import name '_gi' from partially initialized module 'gi' (most likely due to a circular import) 환경 UBUNTU 18.04 python (2.7) python3 3.6 3.10 여기서도 역시 파이썬의 버전을 확인 해보고 다음 코드를 실행하여 모듈을 설치해보자. sudo python3.6 -m pip install pgi 일단 이것도 실행해봐서 안되면 sudo python3.6 -m pip install --ignore-installed PyGObject 강제설치도 한번 해보자! 공감수 0 댓글수 0 2022. 7. 29.
[CERTBOT] certbot 과 파이썬 버전 지정 certbot 을 설정하는 도중에 기존에 설치되있던 파이썬과 버전 충돌나는 경우가 있다. 이때 될수 있으면 (아래 링크 참조) 버전을 스위칭하는게 좋겠지만 혹시나 하는 상황에 이렇게 해결한 적이 있긴하다. https://jkun.net/674 파이썬(Python) 버전 설정 우분투에서나 타 환경에서도 파이썬 버전이 여러개가 설치되어 있을 수 있다. 하지만 특정 패키지나 모듈을 설치해서 실행하고자 할때는 파이썬 버전에 의존성이 걸려있는 경우를 볼 수 있다. www.jkun.net 먼저 certbot 실행파일을 vi 편집기로 열어보자. sudo vi /usr/bin/certbot 그럼 다음과 같은 파이썬 코드들이 나타날 것 이다. 여기서 /usr/bin/python3 이란 최상단에 선언된 코드가 있을 것이다.. 공감수 0 댓글수 0 2022. 7. 29.
[ERROR] error module ‘lib’ has no attribute ‘X509_get_notAfter’ 우분투 18.04 에서 certbot 을 설정하는 도중에 추가로 설치된 파이썬 (기존 3.6 / 설치 3.10) 때문에 위와 같은 에러가 발생;; 일단 제일 먼저 해야하는 것은 파이썬 버전 선택. 특정 설치하려는 패키지나 모듈에서 파이썬에 의존성이 걸려있다면 버전을 확인하여 선택이 제일 첫번째가 되야 할 것이다. 그리고 다음 명령어들 실행해보자. dpkg --list | grep ssl dpkg --list | grep crypt | grep python3 sudo pip3 install cryptography sudo pip install -U pyOpenSSL sudo pip3 install -U pyOpenSSL python -c 'import OpenSSL; print(OpenSSL.__versi.. 공감수 0 댓글수 0 2022. 7. 29.
파이썬(Python) 버전 설정 우분투에서나 타 환경에서도 파이썬 버전이 여러개가 설치되어 있을 수 있다. 하지만 특정 패키지나 모듈을 설치해서 실행하고자 할때는 파이썬 버전에 의존성이 걸려있는 경우를 볼 수 있다. 나는 기존에 certbot (SSL) 설치하고 처리하는데 기존에 설치했던 파이썬과 충돌이 발생해 개거품물고 줄초상 발생;;; 아무튼 적어도 사이드이펙트가 발생한 경험이기에 체크 sudo update-alternatives --config python3 그럼 다음과 같이 나타날 것 이다. 사용하고자 하는 번호를 입력하고 엔타!!! 공감수 0 댓글수 0 2022. 7. 29.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.