[IT/Programming]/HTML related 썸네일형 리스트형 Encode/Unescape and Decode/Escape URI Component # 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.. 더보기 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 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.. 더보기 HTTP Cookie in Web / HTML / Javascript and Server # 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 | 마크다운): 사용 설명서. # 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 # 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.. 더보기 프론트엔드 관점에서의 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.. 더보기 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.. 더보기 코드잇 풀스택 2기 초급 프로젝트 (1팀): View My Startup # 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 # 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.. 더보기 이전 1 2 3 4 ··· 9 다음
