kipid's blog

# AWS S3 (Simple Storage Service) 공부하기 - Pre-signed URL이미지/동영상/파일 등을 업로드하고 다운로드 할 수 있게 도와주는 AWS S3 (Simple Storage Service) 를 배워봅시다.## PH2025-07-06 : First posting.## TOC## S3 이미지/파일 업로드 예제 by edu-jason-kim링크: .env file```[.lang-js]AWS_ACCESS_KEY_ID=...AWS_SECRET_ACCESS_KEY=...AWS_BUCKET_NAME=...```/aws-sdk 설치.```[.lang-sh]npm i aws-sdk```/app.js file```[.lang-js.scrollable]const express = requi..

# npm next-themes 와 @react-spring/web 이용해서 dark/light mode toggle 하기## PH2025-08-06 : First posting.## TOC## RRA

# AWS Ubuntu 에서 서버가 갑자기 죽었을때 자동으로 재부팅 시켜주는 방법 + 부팅 시 자동으로 서버 돌아가게 만드는 방법AWS Ubuntu 인스턴스에서 서버가 갑자기 죽었을 때 자동으로 재부팅시켜주는 방법과 부팅 시 자동으로 서비스를 실행하는 방법을 설명해 드리겠습니다. AWS 환경에서는 물리 서버와 달리 몇 가지 차이점이 있으므로, 이를 고려한 접근이 필요합니다.## PH2025-08-03 : First posting.## TOC## AWS Ubuntu에서 서버가 갑자기 죽었을 때 자동으로 재부팅 시켜주는 방법AWS EC2 인스턴스가 "갑자기 죽는" 상황은 크게 두 가지로 나눌 수 있습니다.OS 내부의 문제로 인한 정지 (커널 패닉, OS Hang 등):이 경우 EC2 인스턴스 자체는 runn..

# Git 을 배워보자. (Feat. GitHub)버전 관리와 협업에 필수인 Git (and GitHub) 에 대해 배워봅시다. ## PH2024-07-30 : First posting.## TOC## Git 설치 및 간단한 명령어들Git 은 (Global Information Tracker) 의 약자로 대충 보면 된다. (처음 이름 지은 사람은 이런 의도를 가진 약자가 아니었던 같긴 한데... 저 표현이 Git 을 잘 나타내준다고 본다.)우선 설치: 에서 다운 받고 대충 설치.```[.lang-sh.scrollable]SET BASEDIR=%CD%set GIT_EDITOR=vimset VISUAL=vimset EDITOR=%VISUAL%git config --global core.editor "vim..

# MySQL SQLException in Ubuntu, Linux우분투, 리눅스에서 MySQL 을 써서 서버를 돌릴일이 생겼는데, 문제가 생긴걸 공유하려고 글 작성.윈도우즈나 맥에서는 MySQL 의 Table name (테이블 이름) 이 대소문자를 구분 안했는데, 우분투/리눅스에서는 대소문자를 기본적으로 구분한다고 함.그래서 초기에 설치할때부터 대소문자를 무시하도록 설정되도록 설치해야 함.이거 때문에 MySQL DB Server 에 접속은 됐는데, 특정 Table 을 찾을 수 없다는 등의 SQLException 이 계속 났음.## PH2025-04-04 : First posting.## TOC## MySQL의 Global Variables 중에는 lower_case_table_names 라는 속성이 있..

# 티스토리 그림파일 직접 img tag 로 올릴 수 없게 됨그냥 외부에서 퍼가는 것만 막지 왜 이렇게 해버렸지? ㅡ,.ㅡ;;;그림 파일을 올리고 [_ ## img 정보 ## _] 와 같이 포스팅해야만 이미지가 제대로 보이는듯. 업로드한 그림 파일 주소 복사해서 img tag 로 옮겨서 포스팅하면 몇 일 지나면 이미지가 제대로 안보이는듯.아래는 테스트.[_ ## img 정보 ## _] 형태img tag 형태

# Learning SQL (Structured Query Language) | MySQL (SQL | MySQL 을 배워보자.) :: MySQL, JDBC (Java DataBase Connector)Database library라고 보면 될듯. 공부하면서 정리해놨던 것 포스팅. 정말 최적화하려면 상용 SQL보다 직접 database를 구축해서 쓰는게 (search에 hash를 쓸 것인지, tree를 쓸 것인지 등도 결정하면서) 프로그램이 돌아갈 때 더 적은 resource와 더 적은 시간이 걸릴거 같지만, 오래 걸리고 노력을 많이 필요로하니 그냥 보급된 SQL을 잘 골라서 쓰는게 맘 편할듯도. Select, Join 같은거 구현하려면 짱나긴 할듯.정리하기 귀찮다;;;; 대충만 해놓고 다음에 다시.....

# prisma with PostgreSQL - cursor based pagination페이지값을 넘겨주어 글들을 가져오는 offset based pagination 과는 달리 넘겨준 마지막 아이템을 이용해서 pagination을 하는 방식. Offset based 에 비해 장점을 많이 가지고 있어서 사용법을 정리할 겸 포스팅.## PH2024-09-25 : First posting.## Cursor based pagination 의 장단점장점1. 데이터 양이 커져도 영향을 적게 받는다. (@@index 필수적)2. 데이터가 중간에 만들어지거나 사라져도 영향을 적게 받는다. (Cursor 에 해당하는 entity 가 사라지면 안됨.)단점1. 키가 정렬이되 있는 숫자여야 한다. (@@index 필수적)2..

--> --># pure SEE (Super Easy Edit) of docuK (Markdown): 사용 설명서 (Manual | Documentation | Tutorial).The docuK rendered from the current text is being represented.I recommend you to Open pure-SEE-copiable.html and Download pure-SEE-copiable.html (마우스 오른 클릭 -> 다른 이름으로 링크 저장), and copy and paste to new html file, and edit it with referencing and learning the SEE document.## Abstract | Description o..

: > }, { & : & } 같은 것들. 'less than', 'greater than', 'ampersand'의 약자일듯. JavaScript - String - replace(RegExp, txt) method 쓰면 편함. 하지만 여전히 escaping은 미리 신경써줘야 함. script 안에 들어가 있지 않는 한. HTML document가 이상하게 rendering 될수도 있음."># 인터넷에서 예쁘게 코드 입력하기 (Syntax Highlighter - google code prettify)유지 보수가 더이상 안되는 코드라 prism.js 로 갈아탐.뭐 여러가지 js가 있는거 같긴한데 개인적으론 이거 쓰면서 만족하고 있음. Google 직원이 만들었으니 잘 만들었겠지. 뭔가 에..

# For loop examples in JAVA and Javascript## PH2023-09-10 : First posting.## TOC## JAVA Examples```[.scrollable.lang-java]For (int i=0;i catsSet=new HashSet();catsSet.add("[Music/Break]--K-pop");For (String cat: catsSet) { // do something System.out.println(cat);}Collection collection=new ArrayList();collection.add("zero");collection.add("one");collection.add("two");Iterator iterator=collectio..

# VtoV Back-end 개발자용 과제 테스트VTOV 백엔드 개발자용 과제 테스트.## TOC##/ 목차는 자동으로 완성됨.## 서울 주차장 정보인증키: 4e4f6764766b6970363174666f6c63 서울시 주차장 정보http://openapi.seoul.go.kr:8088/(인증키)/json/GetParkInfo/1/1000/강남구 주차장 정보http://openapi.seoul.go.kr:8088/(인증키)/json/GetParkInfo/1/5/강남압구정428 공영주차장 정보http://openapi.seoul.go.kr:8088/(인증키)/json/GetParkInfo/1/5/ /1033125미연계중인 공영주차장 정보http://openapi.seoul.go.kr:8088/(인증키)/j..

# jQuery 분석 (Analysis): jQuery.find([CSS Selector]), jQuery.parents([CSS Selector]), and jQuery.closest([CSS Selector])React 가 도입되면서 거의 사장 싶이 된 jQuery 지만, 그동안 유용하게 써왔던 함수/function 들을 pure JavaScript (Vanilla JavaScript 라고 불렀나 이걸?) 로 어떻게 따라할 수 있을지 정리 해 보려함.## PH2025-07-05 : First posting.## jQuery.find([CSS Selector])```[.lang-js.scrollable]function find( selector, context, results, seed ) { var..

# Statistics of kipid's bloghttps://kipid.tistory.com/ (kipid's blog in Tistory) 의 방문자 통계입니다. 어떤 글이 제일 많이 읽혔는지도 Sec. 에서 보실 수 있습니다.## PH2023-12-26 : Separate recoeve.net.2023-09-14 : Recoeve.net is added.2023-06-24 : First posting.## TOC## Time conversion```[.lang-js]new Date((new Date().getTime())+9*60*60*1000).toISOString();// Input date and time in text formatlet textDateTime='2023-06-25 12:3..

# 자동으로 주차해주는, 자동으로 발렛 파킹 valet parking 해주는 AI 기계 멋지다. 아파트나 상가 주차장에 도입되면 엄청 편해질듯. 대량 생산하면 단가도 내려갈테니 합리적인 가격에 대중화 될듯도 한데... 기대기대~!

# VS code 나 Cursor AI 에서 auto format on save 를 켜놓으면 (enabled) 가끔 복사 붙여넣기 하고 저장하면 화면이 제일 아래로 이동하는 경우가 있다. 해결법Auto formatting 을 하면서 전체 문서를 쭉 다 훑어서 그런거 같은데, 원래 제자리로 돌아가고 싶으면 Ctrl/Cmd+U 를 누르면 된다.ps. indent 따라서 위에서 부터 접는 (fold/unfold) 기능은 기본적으로 있는데, 아래에서부터 윗 방향으로 indent 따라서 접어주는 기능은 VS code (or Cursor AI) 에 없는듯 하다. 그래서 제가 Extension 을 만들었으니 잘 활용해 주시길... 설치 및 사용방법은 링크 참조: kipid's blog :: VS code (Curso..

# AI 그림 사이트 (그림 그려주는 AI) 정리참조 wjdqhzld.com :: AI가 그림 그려주는 사이트 TOP 11.AI LLM (Large Language Model) 링크들 모음은 kipid's blog :: AI LLM (Large Language Model) 링크들 모음## PH2023-03-01: First posting.## TOC## Google Bard사이트 주소: https://bard.google.com/chat최근에 구글이 바드에서 그림 그릴 수 있도록 조치를 취해줬음. 그것도 공짜로 사용할 수 있도록... 대신 영어로 명령어를 입력해야 하는듯?```스포츠카 그림 그려줘아직 이미지를 생성할 수 없기 때문에 도움을 드릴 수 없습니다.```/```Draw a sports car``..

# AI LLM (Large Language Model) 링크들 모음AI LLM 정리해 놓은것 공유.그림이나 영상 만들어주는 AI 모음은 참고하시길.## PH2025-07-03 : First posting.## TOC## LLM AIs링크: https://recoeve.net/user/kipid/mode/multireco?cat=[IT/Programming]--AI--LLM Links#numbers-of-recos ## RRAkipid's blog :: AI 그림 사이트 (그림 그려주는 AI) 정리

# AI 툴 (AI LLM tool) 로 영어 혹은 다른 언어 공부하는 법국내 영어공부 앱으로는 Speak https://www.speak.com/ko 이 가장 유명한거 같긴 한데, 이 요금이 부담되시고 공부를 설렁설렁하실 분들은 무료 LLM (Large Language Model) 을 사용해서 공부해 보시는 것도 좋을거 같음.## PH2025-07-02## TOC## 영어 공부를 위한 명령 프롬프트 (Command Prompt)이제부터 너는 나에게 영어를 가르치는 선생님 겸 친구야. 내가 하는 말을 알아듣고 적절한 답변을 영어로 해줘. 발음이 이상할 땐, 원어민 발음을 반복해서 들려주면서 알려주고. 문법이 틀렸거나 조금 더 좋은 표현이 있을 땐 바로 알려주고 내가 잘 고쳐서 표현했는지 확인해줘. 그리고..

# Encode/Unescape and Decode/Escape URI Componenthttp 주소창에 space 나 한글, 특수문자 같은 것들이 낑겨 있을 경우, 여러모로 에러가 날 가능성이 높아져서 보통 브라우저들이 이런 문자들은 '%AB' 같은 8 bit (?) 어쩌구로 변환시켜 버린다. Javascript 에서 기본적으로 이런것들을 처리하는 encodeURIComponent, decodeURIComponent 함수들을 제공한다.뭐 쓰는 사람은 알아서 공부해서 쓸테니... 인터넷 돌아다니다가 이상한 주소가 실제 어떤 주소인지 궁금할때 이용하시라고 (+내가 쓸라고) 만들어 봄.## PH2023-10-25 : Update. m.escapeXXX... added.## TOC## Decode URI Co..

# 핏메이트 (FitMate) - Linux (AWS Amazon Linux) 에 git 설치 및 nginx 설치 (초기 세팅들), Docker (Dockerfile and .dockerignore) and GitHub Action (main.yml)코드잇 풀스택 2기 - Part 4 - Project-3 FitMate 개인 개발 리포트 (이강수 (kipid))## PH2024-12-31 : First posting.## TOC## 팀원별 구현 기능 상세 및 담당 업무- 로그인 페이지- 회원가입 페이지- 프로필 등록 페이지- 마이페이지- 프로필 수정 페이지- 알림 페이지- AI 챗봇 페이지---- UserProvider/NotificationProvider/ViewportProvider- ErrorBou..

# HTTP Cookie in Web / HTML / Javascript and Server작성중... (아직 중구난방일 수 있으니 감안하고 보시길...)Client-side (browser) 에 일정 정보를 "key=value" 형태로 저장시켜놓고, 서버에서 사용자를 기억하는데 주로 사용되는 cookie 란 놈이 있다. 매번 browser 에서 server 로 HTTP request 보낼때 이 cookie 란 놈도 항상 같이 보내기 때문에 이런게 가능한 것인데, 보통 request.headers().get("Cookie") 같은 명령어로 server 에서 뽑아낼 수 있다.Server 측에서 주로 사용하는 데이터이긴 하지만, client 측에서도 javascript 를 통해서 접근 가능하기도 해서 XSS..

# 한글 초성검색 in Javascript한글의 위대함을 한껏 활용하기 위해 초성검색을 구현해 봅시다.문서 오른쪽 위의 Fuzzy search 버튼을 누르시면, 초성검색 (엄밀히는 fuzzy search 이지만) 구현이 어떻게 되어 있는지 아실 수 있습니다.## TOC## 한글 Encoding in Javascript자바스크립트의 문자열은 내부적으로 16비트 유니코드로 처리 .유니코드에서 한글은 코드값 OxAC00부터 시작하며, 초성 19 / 중성 21 / 종성 28 개의 조합 순으로 코드가 배열. 유니코드에 대한 공식 설명은 에서...초성, 중성, 종성의 자모 순서는 에서... (Hangul Syllables 부분에 한글 음절에 대한 유니코드표)Hangul Array초성 "ㄱ", "ㄲ", "ㄴ",..

# Super Easy Edit (SEE | 엄청 쉬운 편집) of docuK (문서K: MarkDown | 마크다운): 사용 설명서. 쉽게 문서를 작성합시다. 초록 | docuK (문서K) and SEE (엄청 쉬운 편집) 이것은 HTML 문서 편집 형식 중 하나인 문서K 입니다. 자바스크립트, jQuery (쉬운 자바스크립트 프로그래밍을 도와주는 API), MathJax (수식 처리기), google code prettifier (코드 예쁘게 출력해주는 API) 로 처리되는 문서 형식입니다. 문서K 의 특징은 다음과 같습니다. 선택 가능한 모드 (밝은 화면, 어두운 화면, 추가로 핑크도 구현할 예정), 글씨체 선택 가능. 글씨 크기 바꾸기 가능, 줄 간격 바꾸기 가능. 자동..

# Ubuntu/Linux (우분투/리눅스) 에서 exit 해도 실행되던게 멈추지 않게 하려면?안녕하세요. 우분투(Ubuntu)를 포함한 리눅스 환경에서 터미널을 종료(exit 또는 창 닫기)해도 실행 중인 프로세스가 멈추지 않게 하는 방법은 여러 가지가 있습니다. 사용 목적과 상황에 따라 적절한 방법을 선택하시면 됩니다.가장 대표적인 방법부터 가장 강력한 방법 순서로 설명해 드리겠습니다.왜 터미널을 닫으면 프로세스가 종료될까요?터미널을 종료하면, 해당 터미널에서 실행된 프로세스들에게 HUP(Hangup) 신호를 보냅니다. 대부분의 프로그램은 이 신호를 받으면 종료되도록 설계되어 있습니다. 따라서 우리의 목표는 이 HUP 신호를 무시하게 만들거나, 프로세스를 터미널 세션과 분리하는 것입니다.## PH20..

# Interactive graph and chart in HTML (Highcharts.js and Chart.js)HTML 의 canvas tag 배워서 그리는거랑, 이런 open source js 공부해서 적용해서 그리는거랑 그닥 노력대비 효과 보는게 비슷비슷할듯도 한데... 그래도 당장은 js 있는거 써서 그리는게 더 보긴 깔끔하니 배워봅시다.## PH2023-03-10: To SEE.2017-07-31: 더 정리.2014-06-12: docuK upgrade.2014-??-??: First Posting.## TOC## Highcharts.com참조 .### Line Chart - Basic Line Monthly Average Temperature (Source: WorldClimate.com..

--> -->HTML docuK format ver. 3.1 (2025-04-17)개인적으로 만들고 있는 LaTeX 비슷한 형태의 HTML document format + JavaScript. 이름은 그냥 docuK로 'document designed by kipid'란 뜻.This is an HTML document format named docuK which is rendered by JavaScript, jQuery, MathJax, and google code prettifier. Specific features are changable mode/font, resizable font-size/line-height, table of contents, auto numbering of sections..

--> --># Super Easy Edit (SEE) of docuK (MarkDown): 사용 설명서 (Manual | Documentation | Tutorial). 쉽게 문서를 작성합시다. Download the below file, and learn how to write SEE (Super Easy Edit) of docuK from the file texts. Replacing only ... part, write well-formatted extended-MarkDown documents easily. Abstract | Description of docuK and SEE This is an HTML document format named docuK which is rendered..

# MCP (Model Context Protocol) 사용해보기 with Cursor AI## PH2025-04-04 : First posting.## TOC## RRAhttps://smithery.ai/