본문 바로가기

전체 글386

[javascript] 자바스크립트 스크롤 애니메이션 참고: https://css-tricks.com/books/greatest-css-tricks/scroll-animation/ JavaScript를 사용하지 않고 CSS 만으로 스크롤 애니메이션을 할 수도 있습니다. 수평 스크롤바 포스트를 보면 확실히 CSS 매직입니다. 하지만 이번에는 JavaScript에 의해 만들어진 아주 작은 정보인 페이지가 얼마나 멀리 스크롤 되었는지를 가지고 CSS에서 다양한 스크롤 애니메이션 작업을 할 수 있습니다. 스크롤 애니메이션 다음의 자바스크립트 한 줄로 스크롤된 페이지의 비율을 알아낼 수 있고 CSS 커스텀 속성을 설정할 수 있습니다. window.addEventListener('scroll', () => { document.body.style.setProperty(.. 2023. 3. 12.
[javascript] CSS scroll indicator (수평 스크롤바) 참고: https://css-tricks.com/books/greatest-css-tricks/scroll-indicator/ JavaScript를 쓰지 않고 사용자가 페이지를 얼마나 스크롤 했는지 보여주는 진행 표시줄을 만드는 방법이 있습니다. 그래디언트와 포지셔닝을 잘 사용해서 말입니다. 이미 스크롤 위치를 표시하는 빌트인 브라우저 기능이 있습니다. 우측에 표시되는 스크롤 막대로 아주 잘 작동합니다. 또한 이 스크롤 바 스타일을 바꾸는 표준화된 방법까지도 있습니다. body { --scrollbarBG: #CFD8DC; --thumbBG: #90A4AE; scrollbar-width: thin; scrollbar-color: var(--thumbBG) var(--scrollbarBG); } 여기에 최.. 2023. 3. 12.
[javascript] 자바스크립트 appendChild 사용방법 참고: https://www.javascripttutorial.net/javascript-dom/javascript-appendchild/ 이 포스트에서는 특정 부모 노드의 자식 목록에 노드를 추가하는 JavaScript의 appendChild() 메소드에 대해 알아보겠습니다. appendChild() 메소드 appendChild() 메소드는 Node 인터페이스의 메소드입니다. appendChild() 메소드를 사용하면 지정된 상위 노드의 하위노드 목록 마지막에 노드를 추가할 수 있습니다. 다음은 appendChild() 메소드의 문법을 보여줍니다: parentNode.appendChild(childNode); 이 메소드에서 childNode는 주어진 부모노드에 추가할 노드 입니다. appendChild.. 2023. 3. 3.
[javascript] 자바스크립트 배열 splice() 사용 방법 참고: https://www.freecodecamp.org/news/javascript-splice-how-to-use-the-splice-js-array-method/ splice()는 JavaScript Array 객체의 빌트인 메소드입니다. 이는 기존 요소를 제거하거나 새 요소로 교체하여 배열의 내용을 변경할 수 있습니다. 또한 이 메소드는 원래 배열을 수정하고 제거된 요소를 새 배열로 리턴합니다. 이 포스트에서는 splice() 메소드를 사용하여 배열 요소를 제거, 추가, 교체하는 방법을 알아보겠습니다. 먼저 배열 요소의 제거부터 알아보겠습니다. splice()를 사용하여 배열 요소를 제거하는 방법 예를 들어 months 라는 이름의 배열이 있는데 다음과 같이 달 이름 이외에 요일 이름이 들어있는.. 2023. 3. 3.
[정보보안] JSON Web Token(JWT) 설명 참고: https://jwt.io/introduction JSON Web Token(JWT) 이란? JSON Web Token(JWT)은 당사자 사이의 정보를 JSON 객체로 안전하게 전송하기 위한 방법을 정의하는 개방형 표준(RFC 7519)입니다. 이 당사자 간 정보는 디지털 서명되어 있으므로 검증되었고 신뢰할 수 있습니다. JWT는 비밀번호(HMAC 알고리즘 사용) 또는 RSA, ECDSA를 사용한 공개/개인 키 쌍으로 서명할 수 있습니다. JWT는 당사자 간 보안을 제공하기 위해 암호화할 수도 있지만, 이보다는 서명된 토큰에 더 초점이 맞춰져 있습니다. 서명된 토큰은 해당 토큰에 포함된 claim의 무결성을 증명하지만 암호화된 토큰은 다른 당사자에게 claim을 숨길 뿐 입니다. 토큰이 공용/개인.. 2023. 3. 2.
[javascript] 자바스크립트 애니메이션 RequestAnimationFrame 참고: https://medium.com/geekculture/requestanimationframe-in-javascript-82a913cf8c46 JavaScript의 네이티브 requestAnimationFrame 메소드를 사용하면 브라우저가 무언가를 아주 빠르게 반복하도록 할 수 있습니다. 이는 다음 프레임을 그리기위해 스스로를 호출해합니다. requestAnimationFrame 사용 방법 requestAnimationFrame 메소드는 콜백함수에 해당하는 매개변수 하나만 받습니다. 문법: window.requestAnimationFrame(callback); - callback: 다음 프레임 그리기 등 애니메이션을 업데이트 할 때 호출되는 함수입니다. 애니메이션을 위한 requestAnimat.. 2023. 2. 27.
[네트워크] DNS 설명 및 작동방법 참고: https://www.networkworld.com/article/3268449/what-is-dns-and-how-does-it-work.html Domain Name System (DNS)는 사람들이 기억하기 힘든 IP 주소를 웹 사이트 이름으로 매치시켜주는 인터넷의 기본 구성요소 중 하나입니다. 웹 사이트에 접속하기 위해 브라우저에 IP 주소를 입력하는 것 역시 가능하지만 대부분의 사람들은 도메인 이름이라고 부르는 기억하기 쉬운 단어로 구성된 인터넷 주소를 원합니다. 1970년대와 80년대 초반에는 인터넷에 연결된 모든 컴퓨터의 목록을 유지해 도메인 네임과 IP 주소 매칭 작업을 Stanford Research Institute의 Elizabeth Feinler 한 사람이 맡아서 했습니다. .. 2023. 2. 14.
[javascript] 자바스크립트 체크박스 사용 방법 참고: https://www.tutorialspoint.com/How-to-check-whether-a-checkbox-is-checked-in-JavaScript 이 포스트에서는 JavaScript에서 체크박스가 체크되어 있는지 확인하는 방법을 알아보겠습니다. 체크박스는 선택상자 형태로 작동하는 HTML의 input 요소입니다. 특정 그룹의 radio 버튼에서는 사용자가 여러개의 버튼 중 하나의 값만 선택할 수 있는 반면 체크박스는 사용자가 여러개의 값을 선택하게 할 수 있습니다. 여러분은 체크박스를 많이 사용해 봤을 것 입니다. HTML 만으로 웹 페이지에 체크박스를 추가할 수 있지만 체크박스에 동작을 추가하려면 JavaScript를 사용해야 합니다. 코딩 여부에 따라 체크박스의 선택 여부에 따라 다.. 2023. 2. 13.
[javascript] 자바스크립트 클립보드 복사 (clipboard api) 참고: https://www.freecodecamp.org/news/copy-text-to-clipboard-javascript/ 웹 페이지나 응용프로그램을 작성할 때 복사 기능을 넣어야 할 때가 있습니다. 자바스크립트로 클립보드에 복사하는 기능은 사용자가 텍스트를 선택하고 단축키를 누르는 등의 행동을 안하고 단순 아이콘 클릭만으로도 할 수 있습니다. 이 기능은 activation code, 복구 키, 코드 스니펫 등을 복사해야 할 때 주로 사용합니다. 또한 화면에 경고 또는 모달 텍스트와 같은 기능을 추가하여 텍스트가 클립보드에 복사되었음을 사용자에게 알릴 수 있습니다. 예전에는 document.execCommand() 명령을 사용하여 이 기능을 만들었지만 현재 deprecate 되었습니다. 대신 클립.. 2023. 2. 7.
[javascript] 자바스크립트 경과시간 계산 (stopwatch) 참고: https://ralzohairi.medium.com/displaying-dynamic-elapsed-time-in-javascript-260fa0e95049 프론트엔드 개발자로서 경과된 시간을 동적으로 표시해야할 때가 있습니다. 예를 들어 통화 인터페이스에 경과 시간을 표시해야 하거나 웹 사이트에 스톱워치 기능을 개발해야하는 경우가 있습니다. 따라서 단순히 재사용 가능한 함수가 있다면 좋을 것 입니다. 이제부터 알아보겠습니다. 이 포스트에서는 자바스크립트를 사용하여 경과시간을 계산하고 표시하는 방법을 설명합니다. 여기서 설명하는 알고리즘과 논리는 자바스크립트가 아닌 다른 프로그래밍 언어에서도 동일하게 적용할 수 있습니다. 1. 경과 시간을 계산하는 함수 구현 첫 번째 만들 구문은 시작 시간과 종.. 2023. 2. 6.
[linux] 리눅스 재귀적으로 grep 명령어 사용 참고: https://stackabuse.com/how-to-grep-recursively-in-bash/ grep 명령어는 파일 또는 디렉토리의 특정 텍스트를 검색할 수 있는 강력한 도구입니다. 로그분석, 코드리뷰, 텍스트 검색이 필요한 작업 등에 널리 사용됩니다. bash에서 grep 명령어는 단일 파일에서 특정 텍스트를 검색할 수 있지만 디렉토리 및 하위 디렉토리에 있는 여러 파일에서 텍스트를 검색하려면 어떻게 해야할까요? 이런 상황에서 재귀적 grep을 사용합니다. grep 명령어의 재귀적 사용은 디렉토리 및 해당 하위 디렉토리의 모든 파일 내의 텍스트를 검색할 수 있게 해줍니다. 이는 다량의 파일이 있거나 특정 디렉토리 아래의 모든 파일에서 텍스트를 검색하려는 경우 특히 유용합니다. 재귀 gre.. 2023. 2. 6.
[네트워크] HTTPS 설명 및 작동방법 참고: https://www.cloudflare.com/learning/ssl/what-is-https/ HTTPS 란? Hypertext transfer protocol secure(HTTPS)는 웹 브라우저와 웹 사이트 간에 데이터를 전송하는 데 사용되는 기본 프로토콜인 HTTP의 보안 버전입니다. HTTPS는 데이터 전송 시 보안을 강화하기 위해 암호화를 합니다. 이는 사용자의 은행 계좌, 이메일 서비스 또는 의료 보험 제공자에 로그인 등과 같이 중요한 데이터 전송 시 특히 중요합니다. 특히 로그인 자격 증명이 필요한 웹 사이트는 HTTPS를 사용해야 합니다. 크롬과 같은 모던 웹 브라우저에서는 HTTPS를 사용하지 않는 웹 사이트는 HTTPS를 사용하는 웹 사이트와 다르게 표시합니다. 웹 페이지가.. 2023. 2. 1.
[javascript] 자바스크립트 fetch로 JSON post (then, async, await) 참고: https://ultimatecourses.com/blog/fetch-api-post-json 이 포스트에서는 fetch api를 사용하여 JSON 데이터를 서버로 post하는 방법을 알아보겠습니다. 이를 위해 먼저 form과 submit으로 이루어진 HTML 파일을 만들어 fetch로 백엔드 서버에 데이터를 post하도록 하겠습니다. 먼저 post할 데이터를 잡기위해 form에 name 속성을 줍니다. Submit form의 참조를 잡기위해 document.forms를 사용하여 name="fetch"인 항목을 찾습니다. const form = document.forms.fetch; const handleSubmit = (e) => { e.preventDefault(); }; form.addEve.. 2023. 2. 1.
[javascript] 자바스크립트 라디오 버튼 사용방법 참고: https://ultimatecourses.com/blog/check-radio-button 이 포스트에서는 radio input()을 확인하는 여러가지 방법을 알아보겠습니다. checked 속성만이 라디오 버튼 값을 확인하는 유일한 방법이 아닙니다. 특정 라디오 버튼을 확인하려면 어떻게 해야하는지 값을 기준으로 라디오 버튼을 확인하려면 어떻게 해야하는지 알아보겠습니다. 라디오 버튼 만들기 다음은 라디오 버튼의 값을 보이기 위해 사용할 코드입니다. 이는 checked 속성을 통해 HTML로 기본값을 설정하는 방법입니다. JavaScript를 사용하지 않고 순수 HTML만으로도 설정이 가능합니다. Mario Luigi Toad 이제 JavaScript로 form과 radio 제어 그룹에 대한 참조를.. 2023. 1. 30.
[javascript] 자바스크립트 우클릭 방지 참고: https://codinhood.com/nano/dom/disable-context-menu-right-click-javascript 브라우저의 전체 페이지에서 우클릭 방지 페이지에서 우클릭을 하면 브라우저는 contextmenu 이벤트를 발생시킵니다. 컨텍스트 메뉴에는 일반적으로 "페이지 소스 보기"나 "검사" 같은 기능이 들어있습니다. contextmenu 이벤트에 핸들러를 추가하고 event.preventDefault()를 사용하면 우클릭으로 컨텍스트 메뉴가 표시되지 않게 할 수 있습니다. 이 이벤트 리스너를 window 객체에 추가하여 전체 페이지에서 우클릭을 방지할 수 있습니다. window.addEventListener("contextmenu", e => e.preventDefault(.. 2023. 1. 4.
[javascript] 자바스크립트 문자열내의 문자열 찾기 (substring) 참고: https://ultimatecourses.com/blog/substring-in-string-javascript 이 포스트에서는 JavaScript를 사용해 문자열 내의 문자열(substring)을 찾는 방법을 알아보겠습니다. 문자열에서 substring 찾기 암호 단어 'bacon'이 있고 다른 문자열 내에 암호 단어가 포함되어있는지 확인해야하는 상황을 가정해보겠습니다. 여기서는 findme 변수에 체크하려는 긴 문자열을 넣어 확인해보겠습니다. const passcode = 'bacon'; const findme = `8sowl0xebaconxjwo98w`; 딱 코드를 보면 findme에 'bacon'이 포함되어 있는지 알 수가 있지만 자바스크립트로는 정답을 어떻게 알 수 있을까요? JavaS.. 2022. 12. 28.
[네트워크] SSL 인증서란? 정의 및 설명 참고: https://www.kaspersky.com/resource-center/definitions/what-is-a-ssl-certificate SSL 인증서란? SSL 인증서는 웹사이트의 ID를 인증하고 암호화된 연결을 가능하게 하는 디지털 인증서입니다. SSL은 웹 서버와 웹 브라우저 사이에 암호화된 링크를 생성하게 해주는 보안 프로토콜인 Secure Sockets Layer를 나타냅니다. 기업이나 조직은 온라인 거래를 보호하고 고객 정보를 안전하게 비공개로 유지하기 위해서 웹 사이트에 SSL 인증서를 추가해야 합니다. 요약하면, SSL은 인터넷 연결을 안전하게 유지하도록 하고 범죄자가 두 시스템 간에 전송되는 정보를 읽거나 수정하지 못하게 합니다. 브라우저의 주소 표시줄 URL 옆에 자물쇠 아.. 2022. 12. 14.
[네트워크] HTTP - HyperText Transfer Protocol 참고: https://www.cloudflare.com/ko-kr/learning/ddos/glossary/hypertext-transfer-protocol-http/ HTTP 란? Hypertext Transfer Protocol(HTTP)은 World Wide Web의 기반이며 하이퍼텍스트 링크를 사용하여 웹 페이지를 로드하는데 사용됩니다. HTTP는 네트워크 장비 사이에 정보를 전송하기위해 설계된 애플리케이션 계층 프로토콜이며 네트워크 프로토콜 스택의 상위 계층에서 실행됩니다. 일반적인 HTTP 흐름은 클라이언트 장비가 서버에 데이터를 요청한 다음 서버가 응답 메시지를 보내는 것 입니다. HTTP request 란? HTTP 요청이란 웹 브라우저와 같은 인터넷 통신 플랫폼이 웹 사이트를 로드하는데 .. 2022. 12. 1.
[javascript] 자바스크립트 다크모드 확인 참고: https://ultimatecourses.com/blog/detecting-dark-mode-in-javascript 이 포스트에서는 JavaScript로 브라우저의 다크모드를 체크하고 변경사항을 확인하여 스타일을 업데이트 하는 방법을 알아보겠습니다. 이를 위해 먼저 window.matchMedia API를 알아봐야합니다. window.matchMedia API는 document가 특정 미디어 쿼리와 일치하는지 확인하기 위한 JavaScript 유틸리티입니다. 미디어 쿼리는 반응형 웹과 같은 것에 사용하는데 익숙하지만 다크모드의 도입으로 더 많은 것을 처리할 수 있게 되었습니다. 모든 브라우저가 window.matchMedia API를 지원하지 않기 때문에 이 API가 사용가능한지 확인해야합니다.. 2022. 12. 1.
[javascript] 자바스크립트 스프라이트 애니메이션 참고: https://dev.to/martyhimmel/animating-sprite-sheets-with-javascript-ag3 자바스크립트를 사용하여 HTML5 캔버스에 스프라이트 시트로 애니메이션을 만드는 방법을 알아보겠습니다. 기본 설정 먼저 canvas 요소를 만듭니다. canvas 요소에 가장자리를 표시하여 가용한 영역이 어디까지인지 확인합니다. canvas { border: 1px solid black; } 이제 스프라이트 시트(https://opengameart.org/content/green-cap-character-16x18)를 로드합니다. 스프라이트 시트(sprite sheet)는 여러개의 이미지를 하나의 파일에 모아놓은 것으로 주로 연속적인 동작의 컷을 나열하여 애니메이션 조작을.. 2022. 11. 29.

티스토리툴바