kipid's blog

구글 크롬 브라우저 캐시 지우기 및 강력 새로고침 하는 방법

# 구글 크롬 브라우저 캐시 지우기 및 강력 새로고침 하는 방법인터넷 브라우저들은 통신에 소비되는 비용을 아끼기 위해 바뀌지 않는 데이터들 (사진이나 동영상, javascript 파일, css 파일, html 파일 등) 을 브라우저 로컬 저장소에 저장/캐시 (cache) 해놓고, 사용자가 같은 사이트를 다시 방문할때 변하지 않았을거라 추측되는 데이터들은 다운받지 않고 캐시 해놓은 데이터를 이용해서 페이지를 띄우는 경우가 많다.하지만 이 경우 접속하고자 하는 홈페이지의 몇 개의 파일/데이터들이 바뀌었는데도 새로 다운로드 받지 않고 캐시된 데이터를 써서 에러를 일으키는 경우가 있는데, 이를 방지하기 위해 캐시를 지우고, 강력하게 새로고침 하는 방법에 대해 설명해볼까 한다. 참고는 에서...## PH2023..

# LaTeX/Special Characters## TOC## Special characters\check{I} : \check{I}\acute{J} : \acute{J}\grave{K} : \grave{K}\vec{u}, \vec{AB} : \vec{u}, \vec{AB}\overrightarrow{u}, \overrightarrow{AB} : \overrightarrow{u}, \overrightarrow{AB}\bar{z} : \bar{z}\hat{x} : \hat{x}\tilde{x} : \tilde{x}\dot{x}, \ddot{x}, \dddot{x} : \dot{x}, \ddot{x}, \dddot{x}\mathring{A} : \mathring{A}## Math mode accents\ac..

# 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

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

--> --># 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 직원이 만들었으니 잘 만들었겠지. 뭔가 에..

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

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

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

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

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

# 프론트엔드 관점에서의 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..

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

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

# CSP (Content Security Policy) : iframe, image (img), video blocking```document.referrer; // in javascriptreq.headers().get("Referer"); // in vert.x```/referrer 통해서 연결을 허용할 것인가? 말 것인가를 결정하는 거인듯?그런데 CORS (Cross-Origin Resource Sharing) 하고는 좀 다른 개념인건가? 헷갈리네...## RRAMDN - CSP (Content Security Policy) policy directivesMDN - Cross-Origin Resource Sharing (CORS)MDN - The X-Frame-Options response hea..

# 페이스북 퍼오기 (Embeding facebook post)페이스북 퍼오는게 옛날보다 쉬워졌음.## TOC## Example아래와 같이 iframe 으로 퍼오도록 바뀌었음. 좋으다. 국내 IT 업체들도 iframe 으로 쉽게 퍼오도록 좀 바꿔주지 =ㅂ=;;그런데 facebook 도 width 를 responsive 하게 동작하도록 안해주긴 했네 ㅡ,.ㅡ;그리고 가운데 정렬이 힘든데? =ㅇ=;; 어떻게 해야 가운데 정렬이 될까나?``` ```/ ## RRAdevelopers.facebook.com - Social Plugins - Embedded Posts

# Learning JavaScript, especially class-like Constructor function and Property Inheritance through prototype/__proto__ chainingWeb browser 에서 쓰이는, "Object-based based on prototypes" 특성을 갖는 client-side 프로그래밍 언어인 JavaScript를 배워 봅시다. 여기는 제가 헷갈렸던 부분만 조금 정리.## PH2017-08-14: 코드 스타일만 좀 정리. To SEE.2014-06-13: docuK upgrade.2014-05-21: First Posting.## TOC## Making an instance from a constructor function..

# 유튜브 리스트 (Youtube list) 로 퍼오는 법유튜브 영상 한개만 있는게 아니라, 리스트로 있는 영상들도 많은데, 이 때 동영상 하나만 퍼오는게 아니라 list 통째로 퍼오는 법을 알고 싶어서 정리하는 글.## PH2024-02-10 : First posting.## TOC## 리스트 퍼오기 예제링크: 그냥 동영상 볼 때의 링크: https://www.youtube.com/watch?v=xHW7KOcqToo&list=PLUbFnGajtZlUl0zYr4crGveP21BbcZG_L&index=1플레이리스트 | Playlist 홈의 링크: https://www.youtube.com/playlist?list=PLU9-uwewPMe05-khW3YcDEaHMk_qA-7lI 는 list=엄청긴_id 이런식..

# 방향키 (위: ArrowUp, 아래: ArrowDown) 로 숫자 조정하기방향키로 숫자 조작을 가능하게 만들어 봅시다. LabVIEW 에서 기본적으로 동작을 지원해줬던거 같은데, 이걸 JavaScript 로 구현해 보려고 함.해당 코드는 https://recoeve.net/ 점수 메기는데 적용되어 있습니다.## PH2024-09-16 : First posting.## TOC## Input Floating Number ## Code```[.lang-html] Floating Number ```/```[#pre-code-change-number]```/## RRA

# jQuery.ripples - 이미지에 물결 그래픽 효과 주기최근에 구글링을 하다가 블로그를 엄청 예쁘게 꾸미시고 글 퀄리티도 매우 뛰어난데를 발견했는데, 거기서 신기한게 있어서 나도 배우기 및 적용해볼겸 작성하는 글.## PH2023-11-29 : First posting.## TOC## jQuery.ripples.jsjQuery 라이브러리니 당연히 jQuery 가 선행되어야 하고, 실행 메소드 하나만 해주면 바로 적용이 된단다.유의 할점은 이미지는 태그가 아닌 css의 background-url 속성으로 적용되어야 한다고 한다. (객체 속성으로도 명시할 수 있음.) 아마도 그냥 img 로 load 되면 속성을 변화시키면서 img 를 바꾸는게 막혀서 그런듯 하다. (.gif 로 하면 더 멋질거 ..

# event.keyCode deprecated, then event.key, event.code 는 무슨값을 가질까? (키보드 (KeyBoard) event handler: compositionstart compositionupdate compositionend)event.keyCode 로 단축키 설정하고 이것저것 했었는데 이미 몇년전에 deprecated 되었다네요. 에서 키보드가 눌렸을때의 각 값들을 잘 보여주고 있긴 한데, 한영키나 다른 나라 (중국, 일본 정도?) 키보드에서도 잘 동작하도록 하려면 테스트가 필요할거 같아서 본 글을 작성합니다.Korean, Japanese, Chinese typing handled. event.data on input, compositionstart, compo..

# week1 위클리 페이퍼 (CSS 에 대해 설명 (position, display: flex and grid), 시맨틱 (Semantic) 태그를 사용하면 좋은 점)## TOC## CSS (Cascading Style Sheets) 의 Cascading에 대해 설명해 주세요.Cascading: 폭포처럼 떨어지는...폭포가 계단형식으로 떨어지는 것처럼 CSS Selector 가 가장 specific (구체적: id, class, tag or postfix (e.g. :hover, :focus, :visited, :nth-child(3), :first-child, ::before, ::after, ::placeholder) 순으로 금은동 메기듯 더 상위 level) 스타일부터 적용시켜 나가면서 덜 spe..

# React Router 에서 CSS 충돌을 막고 좀 더 개발 친화적으로 CSS 를 다룰 수 있게 해주는 CSS module 을 배워봅시다. (Learning module.css)## PH2024-09-12 : First posting.## TOC## React Router### Install (npm install react-router-dom)```npm install react-router-dom```/과 같은 명령어로 우선 package 를 깔자.### 사용방법```import { BrowserRouter, Route, Routes } from 'react-router-dom';import ReactDOM from 'react-dom/client';import './root.css';import..