본문 바로가기

[IT/Programming]

Interactive graph and chart in HTML # 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) --> -->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: 사용 설명서 (Manual | Documentation | Tutorial). --> --># 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.. 더보기
pure SEE (Super Easy Edit) of docuK (Markdown): 사용 설명서 (Manual | Documentation | Tutorial). --> --># 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 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 of docuK and SEESpecific features areChangable mode, font-fami.. 더보기
MySQL SQLException in Ubuntu, Linux # 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 # 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)) # 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 원칙SOLID 원칙은 객체 지향 설계(Object-Oriented Design, OOD)에서 코드의 유지보수성과 확장성을 높이기 위해 제안된 5가지 설계 원칙입니다. 원래는 백엔드 개발과 소프트웨어 공학에서 주로 논의되었지만, 프론트엔드 개발에서도 특히 리액트(React)와 같은 컴포넌트 기반 프레임워크를 사용할 때 적용할 수 있습니다. 프론트엔드 관점에서 SOLID 원칙을 설명하고, 리액트와 같은 환경에서 어떻게 활용되는지 예시와 함께 풀어보겠습니다.## PH2025-03-27 : First posting.## TOC## 단일 책임 원칙 (Single Responsibility Principle, SRP)정의: 한 클래스(또는 컴포넌트)는 단 하나의 책임만 가져야 하.. 더보기
SNS 내보내기/공유하기 (Sharing a URI link through SNS) # 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 에서 특정 단어들 찾는 방법 # 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" 중 하나라도 포함된 커밋을 표시... 더보기
Linux (AWS Amazon Linux) 에 git 설치 및 nginx 설치 (초기 세팅들), Docker (Dockerfile and .dockerignore) and CI/CD GitHub Action (main.yml) # 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- ErrorBoundary- GNB (Globa.. 더보기
React Next.js 에서 URL 을 이용한 상태 유지하기: 페이지네이션, 키워드 검색, 필터링 # 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.. 더보기

티스토리툴바