kipid's blog

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

# 선형 대수학 간단한 정리들 (Linear Algebra)정리가 엉망이지만 우선 posting. 천천히 고치겠습니다.## PH 2015-11-25 : 지금보니까 글이 왜이렇게 중2병 스타일 같지;;; 시간날때 좀 고쳐야 할듯. 추가해야 할건, 역행렬 존재여부는 어떻게 알아낼지. determinant가 0이 아니면 됨. 근데 이걸 정확히 어떻게 증명하지?ㅋ. 난감하네 ㅡㅡ. 일반 mn 행렬 특성들이랑 쓰임새, eigen vector 이야기들과 그 의미. Hermitian이야기. similarity transform과 그 의미. 정리할거 왜케 많니 ㅡㅡ. 2011-10-18 : 질문 1-3 증명과정이 엉망이네 -ㅇ-;; 천천히 고칠께요ㅋ;; 질문 1-3 증명이 엉망인 이유는 행렬 A랑 B가 같지 않더라도 ..

# URI rendering testRecoeve.net 에서 URI rendering 어떻게 동작하게 할지 test 하려고 만든 문서.## PH2015-12-11 : Test it 추가해야 할듯.## TOC##[.no-sec-N#sec-Test-it] Test itURI 입력하면 rendering 된 페이지 쏴주는거 만들어 놓자.## Instagram인스타그램은 퍼가는걸 좀 막으려고```[.lang-html]```/이런 data-reactid 를 이용하는듯? Console 엔 이게 처리된 html 이 안보이고, jQuery 로 element 를 찾으니까 아래와 같이 뜸.```[.lang-html] ```/즉 아래와 같이 image source 를 처리. 오 이거 hash function 까지 잘 짬뽕시..

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

# Career Portfolio - Kang-soo LeePhysicist, Programmer.My favorite motto is "What you eat, how you think, and most importantly what you have done become who you are. Who are you? and who will you be?" My pictures ## PH2025-02-14 : Codeit Fullstack 2nd added. Recoeve.net added. MBTI removed.2023-05-31 : MBTI added.2017-03-21 : Update and Clean up.2016-03-16 : Update and Clean up.2015-12-..

# 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)정의: 한 클래스(또는 컴포넌트)는 단 하나의 책임만 가져야 하..

# Recoeve.net (3S|Slow/Sexy/Sincere SNS) 사용설명서/Manual## PH2023-09-15 : First posting.## TOC## Recoeve.net 란?출처: https://recoeve.net/account/log-in?lang=ko관심있게 본 기사/뉴스, 즐겨듣는 음악, 재밌었던 영상, 다시 찾고싶은 사이트 등 평가를 내리고 싶은 어떤 것이든 기록 (Record Everything) 하세요. 그 평가들을 바탕으로 자동으로 당신과 비슷한 사람들과 연결되어 보세요. 그리고 그들로부터 당신에게 특화된 새로운 것들을 추천받아 보세요 (Recommendations for Everything).인터넷과 대중매체들의 넘치는 오염된/난잡한/편향된 (내 기호에는 맞지 않는) ..

# 화성시 축구장 (화성 종합 경기 타운) 주변 모습들멋있는 건물로 기억. 주변도 잘 정리되어 있었고.

# 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## 테스트의 필요성을 설명하세요.웹 개발에서 테스트는 필수적인 과정입니다. 마치 건축물을 짓기 전에 설계도를 검토하고, 완성된 건물에 대한 안전 검사를 진행하는 것처럼, 웹 개발에서도 테스트를 통해 개발된 웹 애플리케이션의 품질을 확보하고, 예상치 못한 문제를 사전에 방지합니다.### 테스트가 필요한 이유는 다음과 같습니다.- 버그 예방 및 조기 발견: 테스트를 통해 코드에 존재하는 오류(버그)를 조기에 발견하고 수정하여, 사용자에게 불편을 최소화할 수 있습니다.- 코드 품질 향상: 테스트를 수행하면서 코드의 구조..

# 12월 23일 2기 위클리 페이퍼 - VPC는 무엇이며, 왜 중요한가요? S3 버킷의 사용 사례와 주의할 점은 무엇인가요? IAM은 무엇이며, 어떤 기능을 제공하나요?## PH2024-12-23 : First posting.## TOC## VPC는 무엇이며, 왜 중요한가요?### VPC(Virtual Private Cloud)란 무엇일까요?VPC는 Virtual Private Cloud의 약자로, 퍼블릭 클라우드 환경 내에서 논리적으로 격리된 개인 네트워크를 의미합니다. 마치 자기만의 데이터 센터를 클라우드 상에 구축한 것처럼, 독립된 네트워크 환경을 제공하여 더욱 안전하고 유연하게 클라우드 서비스를 이용할 수 있도록 해줍니다.간단히 말해서, VPC는 클라우드 상의 '사설 네트워크'라고 생각하면 쉽습..

# 12월 16일 2기 위클리 페이퍼 - AWS의 글로벌 instructure에는 어떤 구성 요소들이 포함되어 있나요? EC2 인스턴스란 무엇이며, 어떻게 사용하나요?## PH2024-12-18 : First posting.## TOC## AWS의 글로벌 instructure에는 어떤 구성 요소들이 포함되어 있나요?AWS의 글로벌 인프라스트럭처는 전 세계적으로 분산된 데이터 센터, 가용 영역, 리전, 엣지 로케이션 등으로 구성되어 있습니다. 이러한 구성 요소들은 고객에게 안정적이고 확장 가능하며 안전한 클라우드 서비스를 제공하는 기반이 됩니다. 주요 구성 요소는 다음과 같습니다.- 리전(Region): 지리적으로 분리된 독립적인 영역으로, 하나 이상의 가용 영역으로 구성됩니다. 각 리전은 자체적인 전력,..

# 12월 09일 2기 위클리 페이퍼 - TypeScript의 동작 원리에 대해 설명해 주세요. d.ts 타입 정의파일이 무엇이며, 어떻게 만들 수 있는지 설명하세요.## PH2024-12-10## TOC## TypeScript의 동작 원리에 대해 설명해 주세요.TypeScript는 JavaScript의 슈퍼셋으로, JavaScript에 정적 타입을 추가한 언어입니다. 동작 원리를 이해하려면 다음 핵심 개념들을 알아야 합니다:1. 타입 시스템: TypeScript는 변수, 함수 매개변수, 반환 값 등에서 타입을 명시적으로 지정할 수 있게 합니다. 이로 인해 코드를 작성하는 도중에 타입 오류를 발견할 수 있으며, 더 나은 코드 품질과 유지 보수성을 제공합니다.```[.lang-ts]let myString:..

# 코드잇 풀스택 2기 - Part 3 - 중급프로젝트 - Docthru개인 개발 리포트: 이강수 (kipid)## PH2024-12-06 : First posting.## TOC## npm install 에러시```npm install --legacy-peer-deps```/## font-size: var(--XXpx) 적극 활용## color, background-color: var(--prime-yellow/red/blue/orange) or var(--brand-black/white) or var(--gray-0 ~ 900) 적극 활용## queryClient.invalidateQueries({ queryKey: ['todos'] })캐싱 (Caching) 을 무효화 할 때 쓰는 명령어.## de..

# 11월 11일 2기 위클리 페이퍼 - MVC(Model-View-Controller) 패턴이란 무엇인가요? 이 패턴의 각 구성 요소의 역할을 설명하고, MVC 패턴을 사용하는 이유와 그 장점에 대해 서술해주세요. OAuth란 무엇인가요? 그리고 왜 사용하는지 설명해주세요.## PH2024-11-11## TOC## MVC (Model-View-Controller) 패턴이란 무엇인가요? 이 패턴의 각 구성 요소의 역할을 설명하고, MVC 패턴을 사용하는 이유와 그 장점에 대해 서술해주세요.MVC(Model-View-Controller) 패턴은 소프트웨어 디자인 패턴 중 하나로, 애플리케이션을 세 가지 주요 구성 요소로 분리하여 구조화하는 방식입니다. 각 구성 요소의 역할과 MVC 패턴의 장점에 대해 설명..

# 11월 04일 2기 위클리 페이퍼 - 경험을 바탕으로 React 애플리케이션에서 JSON Web Token(JWT)을 사용하여 사용자 인증 시스템을 구현하는 방법에 대해 자세히 설명해주세요. 특히 로그아웃 구현 로직에 대해 설명해주세요. RESTful API의 개념과 주요 제약 조건을 설명하세요.## PH2024-11-05## TOC## React 애플리케이션에서 JSON Web Token(JWT)을 사용하여 사용자 인증 시스템을 구현하는 방법에 대해 자세히 설명### Front-End 단에서의 처리.```[.linenums]import axios from 'axios';const instance = axios.create({ // baseURL: `https://panda-market-api.ver..

# 10월 28일 2기 위클리 페이퍼 - 세션 기반 인증과 토큰 기반 인증의 차이점을 설명하세요. 어떤 상황에서 각각을 사용하면 좋을지 예를 들어 설명해 주세요.## TOC## 세션 기반 인증 (Session-Based Authentication)특징:서버가 사용자의 상태를 관리하고, 세션 아이디를 클라이언트에 전달합니다.세션 아이디는 쿠키에 저장되어, 클라이언트가 요청을 보낼 때마다 서버에 포함됩니다.서버는 세션 저장소를 사용하여 세션 아이디를 통해 사용자를 식별합니다.사용 상황:상태를 유지해야 하는 경우: 쇼핑카트와 같이 사용자 상태를 지속적으로 추적해야 하는 애플리케이션.보안이 중요한 애플리케이션: 세션 정보가 서버에 저장되므로, 서버 측에서 직접 관리할 수 있어 보안 관리가 용이합니다.브라우저 기..

# 10월 21일 2기 위클리 페이퍼 (웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명, 리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명)## PH2024-10-22## TOC## 웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명### CSR (Client-Side Rendering)특징:모든 렌더링이 클라이언트 측(브라우저)에서 이루어집니다.초기 로드 시 필요한 모든 JavaScript가 다운로드되어야 하므로, 초기 로딩 시간이 길어질 수 있습니다.이후 페이지 탐색은 빠르고 동적입니다.사용 상황:사용자와의 실시간 상호작용이 많은 SPA (Single Page App..

# ESLint & Prettier: Format Document (JavaScript, React styles 통일시키기)Airbnb Style Guide 가 유명해서 이 가이드대로 .js, .jsx 파일들이 포멧화되도록 설정을 해보려고 함.## PH2024-09-27 : First posting.## TOC## ESLint, Prettier 패키지 설치ESLint (EcmaScript Lint) 는 JavaScript에 한정된 Code Formatter (문법이 제대로 맞는지 주로 판단) 라면, Prettier 는 전체 코드 스타일을 다루는 Code Formatter (코드 스타일을 통일시켜주는 일을 주로 함) 이다.```[.scrollable]npm install --save-dev --save-..

# Sign-up/Log-in with Google/Kakao (구글/카카오로 가입하기/로그인 구현하기): 구글 Google, 카카오 Kakao Oauth구글로 가입하기랑 로그인하기를 어떻게 구현할 수 있는지 알아봅시다.작성중...## PH2024-09-30 : First posting.## TOC## 구글로 가입하기### 우선 console 로 가서 Oauth 를 활성화시켜 줍시다. (Google Developers)https://console.cloud.google.com/ 로 가서 My First Project 링크로 들어갑시다.왼쪽 사이드바에서 APIs & Services > Credentials 를 클릭. OAuth 2.0 Client IDs 를 하나 발급 받읍시다.여기서 Authorized J..

# DATABASE setup of View My StartUpdb error 가 날 땐,```[.linenums]npx prisma migrate reset --force```/후 다시```[.linenums]npm install --production && npx prisma migrate deploy && npx prisma generate && npx prisma db seed```/## PH2024-09-26 : First posting.## TOC## ERD models### model 1### model 2## Schema 모음.User: Company: Watch and Comparison: Investment: ## UserUser```[.linenums]model User { id..

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

# 2기-View-My-Startup-PART-2-1팀웹 상의 현재 문서는 https://view-my-startup-by-team-1.netlify.app/static/2%EA%B8%B0-view-my-startup-1%ED%8C%80 에 있습니다.코드잇 풀스택 2기 초급 프로젝트 (1팀): View My Startup .노션 (Notion): . (feature & schema)스타일 가이드 참고: .Commit message Convention 참고: [Git] 커밋 메시지 컨벤션(스타일) 가이드 / Commit message Convention(style) guideUdacity Git Commit Message Style Guide.React.js Naming Convention: React J..