kipid's blog

: > }, { & : & } 같은 것들. '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..

--> --># 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..

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

# 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..

# 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..

# 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 라는 속성이 있..

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

# VS code (Cursor AI) extension 만들어 보기 (Upward fold additionally (Smart fold/unfold))들여쓰기 (indent) 고려해서 fold/unfold 해주는 기능이 VS code (Cursor AI) 에 기본적으로 있긴 한데, 젤 아래에서 위쪽으로 fold 해주는 기능이 없고 딱히 extension 을 검색해봐도 안뜨길래 만들어 보기로 결심. 그 내용을 공유합니다.해당 extension 은 에서 보실 수 있습니다. GitHub repo 는 .## PH2025-04-07 : First posting.## TOC## 우선 AI 의 도움을 받아서 package.json 을 다음과 같이 설정.fold-unfold-smartly 라는 이름으로 GitHub..

# 프론트엔드 관점에서의 SOLID 원칙SOLID 원칙은 객체 지향 설계(Object-Oriented Design, OOD)에서 코드의 유지보수성과 확장성을 높이기 위해 제안된 5가지 설계 원칙입니다. 원래는 백엔드 개발과 소프트웨어 공학에서 주로 논의되었지만, 프론트엔드 개발에서도 특히 리액트(React)와 같은 컴포넌트 기반 프레임워크를 사용할 때 적용할 수 있습니다. 프론트엔드 관점에서 SOLID 원칙을 설명하고, 리액트와 같은 환경에서 어떻게 활용되는지 예시와 함께 풀어보겠습니다.## PH2025-03-27 : First posting.## TOC## 단일 책임 원칙 (Single Responsibility Principle, SRP)정의: 한 클래스(또는 컴포넌트)는 단 하나의 책임만 가져야 하..

# SNS 로 URI 링크 내보내기/공유하기 (Sharing a URI link through SNS)Copy to clipboard, 트위터 (X), 페이스북 (Facebook), 레코이브 (Recoeve.net), 카카오톡 (Kakao talk), 라인 (Line), WhatsApp 등등 SNS 로 공유하기 기능 정리. 도 참고하시길.DocuK 에서도 구현해서 넣어놨음. 왼쪽 위랑 문서 제일 아래쪽에 삽입되도록. Pop-up 으로 하는것보다 그냥 새 창 띄우는게 내 취향이라, 새 창 띄우는 방식으로 동작. (iframe pop-in 이 되면 이걸로 하고 싶긴한데, iframe 을 다들 막아서 불가능함.)문서 왼쪽 위와 젤 아래 중간의 image button 들로 테스트도 해보세요.## TOC## R..

# Git/GitHub commit description 에서 특정 단어들 찾는 방법요약```OR 검색: git log --grep="단어1" --grep="단어2".AND 검색: git log --all-match --grep="단어1" --grep="단어2".정규 표현식: git log --grep="단어1|단어2" -E.```/어떤 단어를 검색하고 싶은지, OR/AND 중 어떤 조건을 원하는지에 따라 골라 쓰면 됨.## PH2025-03-08 : First posting.## TOR## 여러 --grep 옵션 사용```git log --grep="fix" --grep="update" --grep="add"```/커밋 메시지에 "fix", "update", "add" 중 하나라도 포함된 커밋을 표시...

# React Next.js 에서 URL 을 이용한 상태 유지하기: 페이지네이션, 키워드 검색, 필터링작성중...React Next.js 애플리케이션에서 사용자가 페이지네이션, 키워드 검색, 필터링 등을 조작할 때 해당 상태를 URL에 반영하여, 뒤로 가기 버튼을 누르거나 URL을 직접 입력해도 이전 상태가 유지되도록 하는 방법을 알아보자.## PH2024-12-31 : First posting.## TOC## URL 쿼리 파라미터 사용페이지 번호, 검색 키워드, 필터 정보를 쿼리 파라미터에 저장합니다.```/list?page=2&limit=10&search=example&filter=active```/## Next.js 의 useRouter 훅 사용```import { GetServerSideProps..

# 12월 30일 2기 위클리 페이퍼 - 테스트의 필요성을 설명하세요. 본인이 생각하는 좋은 테스트란 무엇인지 설명해주세요.## PH2024-12-30 : First posting.## TOC## 테스트의 필요성을 설명하세요.웹 개발에서 테스트는 필수적인 과정입니다. 마치 건축물을 짓기 전에 설계도를 검토하고, 완성된 건물에 대한 안전 검사를 진행하는 것처럼, 웹 개발에서도 테스트를 통해 개발된 웹 애플리케이션의 품질을 확보하고, 예상치 못한 문제를 사전에 방지합니다.### 테스트가 필요한 이유는 다음과 같습니다.- 버그 예방 및 조기 발견: 테스트를 통해 코드에 존재하는 오류(버그)를 조기에 발견하고 수정하여, 사용자에게 불편을 최소화할 수 있습니다.- 코드 품질 향상: 테스트를 수행하면서 코드의 구조..