kipid's blog

# 개발하는데 유용한 VS (Visual Studio) Code 확장팩 (Extension)참조한 블로그 글: ## PH2024-08-03 : First posting.## TOC## 확장팩 까는 법 (How to Install Extension)다음과 같이 side tab 에 Extensions tab 이 있음. 단축키: Ctrl+Shift+X.깔고자 하는 Extention 을 검색한 후 install 을 누르면 설치 완료. 확장팩 까는 법 (How to Install Extension) ### 여러 컴퓨터에서 설정과 확장팩 sync 맞추기 VS code 스타일 및 Settings and Extensions Sync 맞추기 ## 코딩시간을 절반으로 줄여주는 VSCode 9개 기능 by 코딩애..

# 터미널 (Terminal) | Cmd (Command|커맨드) 창 | Sublime text build results 창 에서의 한글 깨짐 해결 방법. (Windows)한글이 깨지는 이유는 주로 한글 팩 (Package) 가 윈도우 (Windows) 에 안깔려 있거나, 한글을 나타내주는 폰트 (font) 가 없거나, 인코딩 (Encoding) 이 잘못되어 있는 경우 중 한가지다.개인적으론 AWS English Windows server 를 돌리면서 Sublime text 로 runJavaC.sublime-build 로 Compile 및 실행|Run 했을때 Build results 에서 한글이 계속 ?? ?? ????????? 로만 표시되길래 고생해서 해결방법을 찾아서 공유하려고 이 글을 작성.## P..

# AWS server|서버 에서 GitHub 가 너무 느려질때 해결 방법.How to solve the extremely slow response of GitHub in AWS server EC2 instances. (Use google translate to read the way to solve the problem.)아무리 찾아봐도 해결책을 못찾겠었는데 , AWS 에서 outbound 설정을 좀 바꿔봤더니 해결되어서 해결법을 공유함.## PH2023-09-21 : First posting.## TOC## Outbound보안상 AWS Network & Security :: Security Groups outbound TCP port 를 1024 - 65535 까지만 열어놨었었는데, 이게 문제인거 같..

# Installing and Learning JAVAJAVA를 깔고 배워봅시다. (자바 깔고 배우기.)## PH2023-06-26 : Links updated.2022-12-18 : revised.2019-04-01 : First posting.## TOC## Installing JAVAOracle 홈페이지 에서 적절한 파일 (.exe) 다운 받아서 실행시키기만 하면 설치 끝.기본적으로는 window %PATH% 와 %CLASSPATH% 를 설정해줘야 함. 이 설정은 cmd 창에서 하기 보단 "내 컴퓨터 - 설정 - ..." 에 가서 하는게 더 편해보임. 아래와 같은 경로들을 추가해 주면 끝. 뭐 batch 파일에서 몇개는 경로설정을 해줘서 따로 이 설정을 안해줘도 되는 것들도 있긴함. (e.g. C..

# .gitignore 설정하기.gitignore이란? Project에 원하지 않는 Backup File이나 Log File , 혹은 컴파일 된 파일들을 Git에서 제외시킬수 있는 설정 File이다. 그런데 먼저 commit 을 한 후에 .gitignore 에 추가를 하면, file 들이 계속 추적되는 경우가 있다. 이 경우 아래와 같은 명령어를 치면 되는듯 하다.```git rm -r --cached .git add .git commit -m "Apply .gitignore"```/## PH2024-02-08 : First posting.## RRAnesoy.github.io :: Git .gitignore 적용하기, 2017-01-26stackoverflow.com :: .gitignore is ig..

# 자바스크립트 (JavaScript) 기초## PH2024-08-07 : First posting.## TOC## 기본 자료형 (Data type)Premitivenumber: 17, 2.3, 1.3E10, 0xff, 0b1111_1001string: "Some String"boolean (불리언): true, falsenullundefinedsymbol: Symbol("Some symbol")bigint: 909082198012019292109nobject: {}, []## for (let str of strs), for (let key in json)for (.. of ..): 배열 순회할때for (.. in ..): key value 순회할때## RRA프로그래밍과 데이터 in JavaScript ..

# jQuery 분석 (Analysis): $.find([CSS Selector]) and $.parents([CSS Selector])요새 jQuery 를 안쓴다는 설이 있어서 jQuery 에서 유용하게 써먹었던 function 들 공부해서 JS (pure JavaScript) 로 변환 좀 해놓으려고 공부 및 정리 중.## RRAhttps://github.com/jquery/jquery/blob/c85454a84306677efda3286a3214419bff945849/src/selector.js#L380 ($.find([CSS Selector]))https://github.com/jquery/jquery/blob/c85454a84306677efda3286a3214419bff945849/src/trave..

# 코드잇 풀스택 2기 Week 3 - 서술형 평가 (Git and GitHub Collaboration)## PH2024-08-09 : First posting.## TOC## git reset의 3가지 옵션에 대해 설명해 주세요.--soft--soft 옵션은 HEAD만을 변경합니다. 이는 HEAD가 가리키는 커밋을 변경하지만, staging area와 working directory는 영향을 받지 않습니다. 커밋을 취소하고, 해당 파일들을 다시 커밋하기 전 상태(스테이징 상태)로 되돌리고 싶을 때 사용합니다. 이 옵션을 사용하면, reset 명령을 실행한 후에 바로 다른 커밋을 만들 수 있습니다.--mixed--mixed 옵션은 HEAD와 staging area를 변경하지만, working dire..

# week2 위클리 페이퍼 (브라우저가 어떻게 동작하는지 설명)## PH2024-08-05 : First posting.## TOC## 브라우저가 어떻게 동작할까?브라우저는 보통 사람들 (Clients) 이 domain name 을 통해 특정 웹사이트에 접속 할 때, DNS (Domain Name System) 을 통해서 해당 도메인 주소 (IP: Internet Protocol) 로 GET Request 를 보내서 페이지를 다운 받아 사용자에게 HTML 을 Parsing/Rendering 하여 보여주게 된다.이 때 웹 페이지 내에 img tag 나 script tag, link tag 등이 있으면 해당 tag 의 src 로 GET Request 를 또 보내 데이터들을 다운로드 받아 적절하게 표현해주게..

# Pattern Replace 를 이용한 http, https 링크 (그림, 동영상, 유튜브, 인스타그램, 틱톡, Soundcloud, 카카오TV, 네이버TV 등) 처리 | URI (Unique Resource Identifier) RenderingRegular Expression 을 사용해서 http, https 링크들을 적절하게 처리해 봅시다.## PH2024-02-07 : First posting.## TOC## URI rendering```[.linenums.lang-js]////////////////////////////////////////////////////// URI rendering :: http link itself, videos, images, maps.//////////////..

# Ctrl+Shift+P does NOT working in Editor (VS code, Sublime Text) :: 에디터에서 단축키가 먹지 않을때 해결법어느날 갑자기 VS (Visual Studio) code 와 Sublime Text editor 에서 Command 명령을 내리는 Ctrl+Shift+P 가 동작을 안했다. 검색해보니 가능한 시나리오가 다음과 같았다. stackoverflow.com :: Command Palette shortcut not working in Sublime Text3A user installed plugin or custom key binding is bound to the same key, which is taking precedence and stopping ..

# Learning Node.jsServer-Side JavaScript 라 불리우는 Node.js 를 배워봅시다. JavaScript 언어 특성을 server 에 적용하면 무엇이 좋을까나? 무엇이 나쁠 수 있고?간단하게나마 server 에 대해 알고 있어야 이해가 쉬울듯. PHP 같은 것으로라도 간단히 이런것에 대해 조금 이해해 놓는것이? 이거랑은 상관없나? Egoing 님 php 강의에서 server 가 어떤 데이터들을 보내고, client 가 어떤 데이터들을 보내고 받는지 등을 이야기한 동영상이 있었는데... 그것만 보고와서 Node.js 를 공부해도 조금 이해가 편할듯.## PH2016-04-11 : To SEE.2014-05-22 : First posting.## TOC## 장단점Node.js ..

# 윈도우즈 탐색기 즐겨찾기 사라짐 해결법 (Windows Explorer Favorites missing)윈도우즈 탐색기를 어느날 열었더니, 내가 그동안 즐겨찾기 해놨던 폴더들이 안보였었다. 그래서 인터넷에 검색도 해보고 삽질을 좀 했는데, 의외로 간단한 실수로 나타난 현상이었다. 다음과 같이 즐겨찾기가 보여야만 한다. 어느날 다음과 같이 즐겨찾기가 안보이기 시작했다. 문제는 너무나 간단했다. 홈 탭을 펼쳐야만 즐겨찾기가 보인다. 홈 아래에 즐겨찾기 폴더들이 저장되어 있었던거라 그 홈을 펼쳐야만 했던거다. 무슨일인지는 몰라도 어느날 우연히 홈 탭이 접힌게 default 로 탐색기 설정이 되었나 보다. 홈탭을 열어서 즐겨찾기를 보이게 만들자. 그 후 탐색기를 닫았다가 열면 홈 탭이 열린 상태로 (즐겨찾..

# Sublime Text (editor) 소개여러가지 다양하고 편리한 기능들을 제공하는 editor . 배우고 쓰는것도 좋지만, 쓰면서 배우고 익혀야 하는듯. 개인적으로는 portable 로 까는걸 추천. 클라우드 같은곳에 올려놓으면 컴퓨터를 옮기더라도 설정을 그대로 사용할 수 있는듯.## PH 2022-12-18 : 조금 더 수정. 2017-07-26 : Sidebar, Go to Anything, Tab label 에서의 한글깨짐 부분 더 추가. 2015-12-14 : 조금 더 정리. 2015-07-11 : 조금 더 정리. Gif image 들 만들어서 설명 추가하고 싶기도 한데;; 당장은 귀찮다. 2014-06-13 : first posting?## TOC## 장점?### Go To Anythin..

# Git 협업하기 (Collaboration with Git and GitHub)## PH2024-08-01 : First posting.## TOC## GitHub 로 협업을 한다는 것### 커밋 (commit)커밋은 작업 내용의 '스냅샷'을 의미하며, 한번 커밋하면 이력이 남습니다. 이런 특성 덕분에 문제가 발생했을 때 이전 상태로 쉽게 되돌릴 수 있습니다. 한마디로 말하자면 커밋은 Git에서 관리하는 가장 작은 단위의 버전이라고 할 수 있습니다.### 브랜치 (branch)Git 의 브랜치는 독립적으로 작업을 진행하고 그 결과를 저장할 수 있는 개별적인 흐름을 의미합니다. 브랜치를 사용하면, 서로 다른 작업을 별도로 진행하고 나중에 하나의 코드베이스로 병합할 수 있습니다. 이는 여러 개발자가 동시..

# Unix/Linux command (CLI: Command Line Interface)이걸 꼭 공부해야만 하나 하는 의구심이 들긴한다... 요새 GUI (Graphical User Interface) 가 워낙 잘 되어 있어서...하지만 GUI 를 만드는데 비용이 많이들다보니, 더 정확한 명령, 간단한 구현을 원하는 개발자 입장에선 CLI 가 꼭 필요하긴 한듯. 특히나 개발 초기의 것들은 GUI 까지 만들어지려면 한 세월일거라...## PH2024-07-30 : First posting.## TOC## Simple commands```date // 현재 날짜 출력pwd // Print Working Directory (현재 디렉토리 출력)cal // Calendar (달력)cal 9 2024cal 20..

# 여러가지 프로그래밍 언어들 (List of programming languages)언어들 참 많다. code snippet 좀 넣을까?분류를 내가 좀 아는 언어들, 생소한 언어들로 나눈게 에러같긴 하지만;;; 천천히 수정. A Snapshot of Programming Language History. (출처: 알렌 터커의 ‘프로그래밍 언어’ + ) 현재 프로그래밍 언어 랭킹 참조: ## PH 2015-12-12 : php code snippet 에서 escape 를 안했네;;; 2014-11-11 : code snippet 추가. related refs 말머리에 삽입. 2014-06-19 : 더 정리. 2014-01-25 : ref를 LaTeX처럼 자동으로 처리하는 javascript를 짜봅시다..

# Helper div with display: flex; margin, padding 으로 가로 너비 설정/맞추는 법 정리 Responsive width with finitely filling the parent, and I wanna use display: flex; to align elements. 위와 같이 가로폭은 적당한 길이만큼만 확장되고, 나머지 안의 것들은 display: flex; 로 정렬하고 싶은데, 코딩을 해보면서 꽤 헤맸던 부분이라 정리할 겸 포스팅.## PH2024-07-30## TOC## HTML code```[.lang-html] 로그인 ```/와 같이 배치했음. 보면 helper div 로 이 추가된 걸 볼 수 있는데... CSS 는 다음과 같음.`..

# Vertical center align by CSS in HTMLHTML 의 div element 특성상 height 의 경우 child element 들의 height 가 다 계산이 되고 이것을 포함하는 식으로 height 가 정해져서 vertical align 한다는게 생각보다 쉽지가/간단하지가 않음. 그냥 단순하게 생각해보면 대충 이런 CSS 만 넣으면 세로 가운데 정렬이 될것 같지만 제대로 동작하지 않음. (이렇게 동작하도록 browser 들이 만들어줘도 될거 같은데 말이지 ㅡ..ㅡ)아무튼 여러가지 방법들이 검색에 걸리긴 하는데 모든 browser 에서 제대로 동작하는 건 별로 없는듯? =ㅇ=;;; 찾기 힘들다. 우선 대충만 정리해놓고 나중에 다시 정리하겠음.## TOC## Using fle..

# HTML CSS composes, and pseudo-element :after, :active:after, and transition Buttons Add Amount Add Async Add If Odd Images ## Style ```[#pre-code-style-transition.linenums.lang-css] ```/ composes 는 module 단에서만 동작하는듯. ## HTML ```[.linenums.lang-html] Buttons Add Amount Add Async Add If Odd Images ```/ ## RRA https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions ..

# 순수한 완전 쉬운 편집 (SEE: Super Easy Edit) 문서K (Markdown: 마크다운): 사용 설명서. 현재 문자들로부터 만들어진 HTML 문서K 가 보여지고 있는 중입니다. ## 문서K 와 SEE (완전 쉬운 편집) 의 초록 | 설명 문서K 의 특징은 다음과 같습니다. 선택 가능한 모드 (밝은 화면, 어두운 화면, 추가로 핑크도 구현할 예정), 글씨체 선택 가능. 글씨 크기 바꾸기 가능, 줄 간격 바꾸기 가능. 자동으로 만들어 주는 목차 (각 섹션, 하위 섹션으로 점프도 가능하고 각 섹션의 왼쪽 T 버튼을 누르면 목차로 이동됩니다.). 섹션들과 그림들 수식들 자동으로 숫자 이름 메겨주기. 참고 문헌 참조 (citing) 쉽게 하기, 팝업 형태로 참조한 문헌들 바로 보여주기. 그림이나 ..

# HTML a href tag with onclick return 가장 간단하게 HTML a (anchor/닻) tag 를 사용하는 방법은 ``` link or #hash text ```/ 와 같다. 그런데 간혹 이 링크를 다르게 처리하고 싶을때도 있다. (페이지 새로고침 없이 ajax 로 처리한다던지, pop-up 을 하고 싶다던지, stopPropagation 을 필요로 한다던지 등.) 이땐 다른 html element 들에서도 사용되는 onclick attribute 를 써주면 되는데, 아래와 같은 것들에는 주의가 필요하다고 한다. JavaScript recommendations It is often the case that an anchor tag is used with the onclick e..

# Email by JAVA (자바 프로그램을 이용해 이메일 보내기, com.sun.mail:jakarta.mail:2.0.1 :: 2021-04-06 에 update 가 끝나있는 오래된 library 임.) 이메일 (Email) 을 프로그래밍적으로 보내고 싶은데 어떻게 해야할까? 개인적으로는 Recoeve.net 에 회원가입을 할 때, 계정 만들고 이메일 통해 인증/확인 하기 위한 용도로 이메일을 활용하려고 하는 중인데, 또 비밀번호를 잊어버렸다거나 했을때의 보완수단으로서 활용하려고... 이러려면 아무튼 프로그래밍적으로 이메일을 보낼 수 있어야 한다. 어떻게 하면 될까? ## TOC ## Gmail (지메일) by com.sun.mail:jakarta.mail:2.0.1 (2021-04-06) Gmai..

# 이진 탐색 트리 (Binary Search Tree, BST) 의 중위 순회 (Inorder), 전위 순회 (Preorder), 후위 순회 (Postorder) 에 대해 알아보자. 먼저, 이진 탐색 트리(Binary Search Tree, BST)는 다음과 같은 특성을 가지는 이진 트리입니다: 각 노드는 최대 두 개의 자식 노드를 가질 수 있습니다. 왼쪽 서브트리의 모든 노드는 해당 노드보다 작거나 같은 값을 가지며, 오른쪽 서브트리의 모든 노드는 해당 노드보다 큰 값을 가집니다. ```[.linenums.lang-py] class TreeNode: def __init__(self, val=0, left=None, right=None): self.val = val self.left = left sel..

# v.qq.com 동영상 퍼오기 동영상 주소: https://v.qq.com/x/cover/mzc00200cg24vid/y0048i7crfg.html iframe ```[.lang-html] ```/ 3분까지만 로딩되고 나머지는 페이지 방문해서 봐야 하는듯? 광고도 많고 ㅡ,.ㅡ;;; 유튜브보다 못한거 같은데, 중국이라서 국내기업 키워주느라 유튜브 막아놓고 이런 사이트 밀어주는듯.

# .webp, .webm, .avif, .mp4 를 img tag, video tag 로 로딩 테스트 (Loading test) .webp, .webm 이 .gif 파일을 대체하는 중인데.. (둘 다 움짤 | 움직이는 짤림방지 사진 이지만 용량 차이가 어마어마하기 때문. .webp, .webm 이 더 압축을 잘함.) .webp 는 사진 크기를 25%로 더 줄여서 압축했음. .webm 은 사진 크기를 50%로 줄여서 압축했음. .webm 파일을 가져다가 크기변환없이 압축했음. .mp4: 9.01MB ## PH 2024-02-18 : First posting. ## TOC ## tag test .webp .webm .avif .mp4 ## tag test .webp .webm .avif .mp4 ## 결론..

# HTML 에서 동영상 연속 재생하기 (playlist, shuffle, replay) 작성중인 글. 이것도 천천히 정리할듯;;; 여러 동영상을 한꺼번에 이어서 재생하거나 반복재생하고 싶어서 정리하는 중. 구현은 Recoeve.net (/user/kipid?cat=[Music/Break]--K-pop) 에 해놨으니 참조하시길. ## PH 2024-01-07 : start, end. ## TOC ## HTML tag HTML5 로 오면서 tag 도 생긴거 같긴한데... 이건 직접 서버를 운영하는 사람만 써먹을 수 있는듯? 동영상을 어딘가에 파일로 올려놔야 하니까;;; 파일 형태로 업로드하고 그냥 link 넣으면 될라나? 사용방법은 참조하시길. 그냥 대충 이런식으로 집어넣으면 됨. Media event 들..

# Data ENCRYPT (정보 암호화) 여러군데에 쓰이는 데이터 암호화. 암호를 암호화해서 저장할때도 쓰이고. 개인정보 보호할때도 쓰이고. 통신을 암호화하고 싶을때에도 쓰이고. 단방향 암호화 (원래의 정보를 확인할 필요가 없는 경우) 는 그냥 hash function 쓰면 되는듯도. 보통 단방향 암호화는 input 이 예전 input 과 일치하는지를 확인하는 용도로 자주 쓰이는듯. (즉 password 확인 같은거.) ## PH 2014-12-21: 예전에 썼던 글이긴 한데, 조금 더 정리해서 posting. ## TOC ## In MySQL MySQL 에서의 암호화 . 대충만 정리. ```[.scrollable.lang-sql] DROP TABLE IF EXISTS `TestUsers`; CREAT..

# Getting Data from Google Spreadsheet or Excel 작성중. Excel 같은 형태로 data를 관리하면 편할때가 많음. 뭐 프로그래밍에 익숙한 분들이라면 SQL 같은걸 이용할수도 있겠지만, 간단한 데이터의 경우 이런것보다 간단하게 excel이나 google spreadsheet 같은 것을 이용하는 것이 훨씬 간편하고 좋음. 그런데 이 data를 인터넷에서 잘 보여주고 싶을때는 excel이 아닌 html / javascript array / JSON (JavaScript Object Notation) 형태로 편집을 해줘야 할텐데... 엑셀이나 google spreadsheet의 데이터를 html로 편집 가능한 형태로 변환해 봅시다. ## PH 2024-02-09 : To ..