본문 바로가기

전체 글386

[javascript] 반복문 루프 (while, for, for...of, for...in, loop) 참고: https://www.codecademy.com/resources/docs/javascript/loops 루프는 연속적으로 명령을 반복하게 하는 프로그래밍 툴입니다. iterate라는 용어는 일반적으로 "반복하다"를 의미합니다. 일반적으로 stop condition이라고 하는 지정된 조건이 충족될 때까지 루프는 계속 반복됩니다. while loop while 루프는 지정된 조건이 true면 실행되는 루프를 만듭니다. 루프는 조건이 거짓이 될 때까지 계속 실행됩니다. 조건은 루프 전에 지정되며 일반적으로 루프를 중지해야할 타이밍을 결정하기 위해 while 루프 본문에서 변수를 증가시키거나 변경합니다. while (condition) { // Code block to be executed } 예제 코.. 2023. 4. 18.
[javascript] 자바스크립트 로그인 페이지 만들기 (login) 참고: https://medium.com/swlh/how-to-create-your-first-login-page-with-html-css-and-javascript-602dd71144f1 이 포스트에서는 HTML, CSS, JavaScript를 사용하여 로그인 페이지를 만드는 방법을 알아보겠습니다. 스크립트를 작성하기 전에 먼저 무엇을 만들 것인지 보겠습니다: 보다시피 페이지에는 제목, 로그인 form(사용자 이름 및 비밀번호용), 입력 값을 제출하는 로그인 버튼이 있습니다. 이 예제에서는 사용자 이름이나 암호 확인을 위해 서버로 전송하지 않고, 대신 JavaScript를 사용하여 사용자 이름이 "user"이고 암호가 "web_dev"인지 확인합니다. 만일 이름과 암호가 일치하면 얼럿박스를 표시하고 페.. 2023. 4. 16.
[javascript] 자바스크립트 브라우저 탭 열기 닫기 참고: https://www.scaler.com/topics/javascript-close-window/ 때때로 우리가 연 브라우저 창을 닫아야 하는 경우가 있습니다. JavaScript를 사용하여 브라우저를 닫을 수 있지만 보안상의 이유로 사용자가 연 창이 아니면 닫을 수 없습니다. 이 포스트에서는 먼저 JavaScript 코드를 사용하여 새 창을 여는 방법을 알아보고 close() 메소드를 사용하여 새로 열린 창을 닫는 방법을 알아보겠습니다. 소개 여기서 주목해야 할 사항은 자바스크립트를 사용하여 열은 브라우저 창만 닫을 수 있다는 것입니다. 오늘날의 보안 표준은 사용자가 열은 브라우저 창은 코드로 닫을 수 없도록 합니다. 아래 단계는 스크립트를 사용하여 URL을 닫기 위해 URL을 여는 방법을 보여.. 2023. 3. 30.
[javascript] 자바스크립트 반응형 메뉴 (navigation bar) 참고: https://levelup.gitconnected.com/how-to-create-a-responsive-navigation-bar-with-and-without-javascript-81f6d0671c6d 많은 페이지를 가진 웹 사이트를 만들어야 한다고 할 때, 사용자가 쉽게 페이지에 액세스할 수 있도록 각 페이지를 디자인하는 것은 노력이 필요합니다. 따라서 사용자가 쉽게 사용할 수 있도록 웹 사이트에 내비게이션 바를 구현해야 합니다. 내비게이션 바를 추가하면 데스크톱 화면에서 웹사이트를 더 쉽게 사용할 수 있습니다. 하지만 모바일 및 태블릿 화면은 어떻게 해야할까요? 모바일은 인터넷 사용량의 50% 이상을 차지합니다. 따라서 navbar를 반응형으로 만드는 것은 중요합니다. 이 포스트에서는 J.. 2023. 3. 29.
[javascript] 자바스크립트 apply() 사용 예제 참고: https://www.javascripttutorial.net/javascript-apply-method/ 이 포스트에서는 JavaScript의 Function 타입의 apply() 메소드에 대해 알아보고 이를 효과적으로 사용하는 방법을 알아보겠습니다. JavaScript apply() 메소드 Function.prototype.apply() 메소드는 주어진 this 값과 배열로 받은 매개변수를 사용하여 함수를 호출합니다. 다음은 apply() 메소드의 문법입니다: fn.apply(thisArg, [args]); apply() 메소드는 두개의 매개변수를 받습니다: thisArg는 함수 fn에 대한 this의 값입니다. args는 fn 함수의 매개변수를 지정하는 배열입니다. ES5 부터 args는 a.. 2023. 3. 28.
[javascript] 자바스크립트 퍼센트, 백분율 구하기 참고: https://linuxhint.com/calculate-percentage-in-javascript/ 백분율 계산은 수학, 금융, 교육 등의 분야에서 중요시 합니다. 웹 개발 및 JavaScript 개발에서 백분율 계산은 보다 동적이고 사용자 친화적인 애플리케이션을 구축하게 하고 데이터를 명확하고 의미 있게 표현할 수 있도록 하기 때문에 중요한 면을 가집니다. 이 포스트에서는 JavaScript에서 백분율을 계산하는 과정을 알아보겠습니다. JavaScript에서 백분율 계산하는 방법 JavaScript에서 퍼센트를 계산하려면 나눗셈과 곱셈과 같은 기본 산술 연산을 사용합니다. 퍼센트를 계산하는 데 일반적으로 사용하는 공식은 "(부분/전체) * 100"입니다. 예제 두개의 매개변수 "part"와 .. 2023. 3. 24.
[javascript] 자바스크립트 라디안(radians)을 각도(degrees)로 변환 참고: https://www.delftstack.com/howto/javascript/javascript-radians-to-degrees/ 이 포스트에서는 JavaScript의 수식을 사용하여 라디안(radians) 값을 각도(degrees)로 변환하는 방법을 알아보겠습니다. JavaScript 라디안 각도 변환 자바스크립트에서는 산술 연산자(+, -, *, /)를 사용하여 덧셈, 뺄셈, 곱셈, 나눗셈 등의 계산을 할 수 있습니다. 그리고 이 연산자를 사용해 자바스크립트 프로그램에서 수학 공식을 만들 수 있습니다. 라디안을 각도로 변환하려면 다음 공식을 사용하여 각도 값을 계산할 수 있습니다: [라디안 값] * ([반원의 각도] / [파이]) JavaScript에는 3.14를 리턴하는 파이 메소드 Ma.. 2023. 3. 21.
[javascript] 자바스크립트 정규표현식 비밀번호 강도 확인 참고: https://www.section.io/engineering-education/password-strength-checker-javascript/ 비밀번호는 애플리케이션 보안에서 매우 중요합니다. 누구나 자신의 시스템과 계정을 보호하기 위해 강력한 암호가 필요합니다. 이 포스트에서는 최종 사용자가 JavaScript의 정규식을 사용하여 계정을 보호할 수 있을 만큼 강력한 암호를 선택했는지 확인하는 방법에 대해 설명 하겠습니다. 정규표현식 정규식은 문자열의 문자 조합을 매치하는 데 사용하는 패턴입니다. JavaScript에서 정규식은 객체이기도 하고 RegExp로도 표시합니다. 이는 다음과 같이 구성할 수 있습니다: - 패턴을 두개의 슬래시로 묶은 정규식 리터럴 let check = /vet/ -.. 2023. 3. 21.
[javascript] 자바스크립트 performance.now() 참고: https://blog.bitsrc.io/a-very-quick-introduction-to-performance-now-c95493e77d06 performance.now()에 대해 들어본적 있습니까? 이는 DOMHighResTimeStamp(High Resolution Time Stamp)를 리턴하는 Performance API의 메소드로, 즉 두 시점 사이의 소수점 값의 밀리초 단위 시간 값입니다. performance.now()의 일반적인 사용 예는 코드가 실행되는 시간을 모니터링하는 것입니다. 실제 사용 사례로는 비디오, 오디오, 게임 및 기타 미디어의 벤치마킹 및 모니터링 등이 있습니다. 그럼 어떻게 작동하는지 알아보겠습니다. 일단 특정 기능이 실행되는 데 걸리는 시간을 모니터링하고 싶.. 2023. 3. 20.
[javascript] 자바스크립트 지수 연산자(제곱, Math.pow) 참고: https://www.javascripttutorial.net/es-next/javascript-exponentiation-operator/ 이 포스트에서는 JavaScript의 지수 연산자(**)를 사용하여 지수로 거듭제곱하는 방법을 알아보겠습니다. JavaScript 지수 연산자 소개 거듭제곱을 하려면 다음 구문과 같이 정적 메소드 Math.pow()를 사용합니다: Math.pow(base, exponent) 예제: let result = Math.pow(2,2); console.log(result); result = Math.pow(2,3); console.log(result); ECMAScript 2016에서는 아래 구문과 같이 지수 연산자(**)를 사용하여 지수 거듭제곱을 얻을 수 있는 .. 2023. 3. 20.
[javascript] 자바스크립트 debounce 함수 지연 시키기 참고: https://www.freecodecamp.org/news/javascript-debounce-example/ JavaScript에서 debounce 기능은 사용자 입력당 한 번만 코드가 트리거되도록 합니다. 사용 사례로는 검색 추천, 텍스트 필드 자동 저장 및 버튼 연속 클릭 제거 등이 있습니다. 이 포스트에서는 JavaScript로 debounce 함수를 만드는 방법에 대해 알아보겠습니다. debounce 란? 디바운스라는 용어는 전자 공학에서 부터 시작됐습니다. 예를 들어 TV 리모컨을 누르는 경우 버튼의 신호가 리모컨의 마이크로칩으로 너무 빨리 전달되어 버튼에서 손을 떼기 전에 신호가 튀어 마이크로칩이 "클릭"을 여러 번 인식하는 경우입니다. 이를 개선하려면 버튼 신호를 받은 경우 물리적.. 2023. 3. 19.
[알고리즘] HMAC (Hash-based Message Authentication Codes) 이란? 참고: https://www.okta.com/identity-101/hmac/ Hash-based message authentication code(HMAC)는 해시 함수와 비밀 키를 사용하는 암호화 인증 기술입니다. 서명 및 비대칭 암호화와는 다르게 HMAC은 공유 암호를 사용하여 인증하고 데이터가 올바르고 신뢰할 수 있는지를 확안합니다. HMAC 작동 방법 송신자와 수신자는 통신 시 서로 주고 받는 내용이 비공개이길 원합니다. 또한 인터넷은 신뢰할 수 없는 매체이기 때문에 수신된 패킷이 변조되지는 않았는지 확인할 방법이 필요합니다. 이런 경우 HMAC이 효과적인 솔루션입니다. HMAC 키는 두 부분으로 구성됩니다. 이는 다음과 같습니다: Cryptographic keys: 암호화 알고리즘은 데이터를 .. 2023. 3. 19.
[알고리즘] SHA 해시 알고리즘 이란? 참고: https://www.encryptionconsulting.com/education-center/what-is-sha/ SHA 소개 SHA는 보안 해시 알고리즘입니다. SHA는 MD5를 수정한 버전이고 데이터 및 인증서를 해시하는 데 사용합니다. 해시 알고리즘은 입력 데이터를 비트 연산, 모듈러 합 및 압축 함수를 사용하여 알아보기 힘든 더 작은 형태로 줄입니다. 해싱을 크랙하거나 해독할 수 있는지 궁금할 것입니다. 해시는 암호화와 유사하며, 해시와 암호화의 유일한 차이점은 해시가 단방향이라는 것입니다. 즉, 일단 데이터를 해시해 놓으면 브루트 포스 공격을 하지 않는 한 해시 다이제스트를 크래킹할 수 없습니다. SHA 알고리즘의 작동에 대해서는 아래 이미지를 참조하기 바랍니다. SHA는 메시지의 .. 2023. 3. 16.
[javascript] 자바스크립트 TTS (Text to Speech) 참고: https://www.assemblyai.com/blog/javascript-text-to-speech-easy-way/ 앱을 만들 때 접근성, 편의성 또는 기타 이유로 텍스트의 음성 변환 기능을 구현할 수 있습니다. 이 포스트에서는 JavaScript의 내장 Web Speech API를 사용하여 매우 간단한 TTS 애플리케이션을 만드는 방법을 알아보겠습니다. 1. 기본 설정 먼저 index.html 이라는 HTML 파일과 script.js 라는 자바스크립트 파일을 사용하여 기본적인 애플리케이션을 설정하겠습니다. HTML 파일 index.html은 JavaScript 파일과 함께 기능을 추가할 애플리케이션의 구조를 정의합니다. 애플리케이션의 제목 역할을 하는 요소, 말하고 싶은 텍스트를 입력하는 .. 2023. 3. 16.
[javascript] 자바스크립트 스크롤 캔버스 애니메이션 (애플 홈페이지) 참고: https://css-tricks.com/lets-make-one-of-those-fancy-scrolling-animations-used-on-apple-product-pages/ 애플은 제품 페이지에 적용한 매끈한 애니메이션으로 잘 알려져 있습니다. 예를 들어, 화면에서 스크롤하면 MacBook이 열리고 아이폰이 회전하면서 하드웨어를 보여주고 소프트웨어를 시연하며 제품이 어떻게 사용되는지에 대한 대화형 이야기를 들려줍니다. 여러분이 보는 대부분의 효과들은 HTML과 CSS로만 만들어지지 않습니다. 그럼 뭘까요? 알아내기 조금 어려울 수도 있습니다. 브라우저의 DevTools를 사용하더라도 요소뿐이기에 답을 찾기 힘듭니다. 이 효과 중 하나를 자세히 살펴보고 어떻게 만들어졌는지 알아보겠습니다. .. 2023. 3. 15.
[javascript] 자바스크립트 문자열 찾기 참고: https://blog.ossph.org/bite-sized-javascript-string-search/ JavaScript는 웹 개발에 광범위하게 사용되는 인기 있는 프로그래밍 언어입니다. 웹 개발에서 가장 중요한 작업 중 하나는 문자열 검색인데 JavaScript에서는 문자열을 검색하는 다양한 방법을 제공하여 개발자가 더 쉽게 문자열을 검색할 수 있도록 해줍니다. 이 포스트에서는 예제와 함께 JavaScript에서 문자열을 검색하는 다양한 방법을 알아보겠습니다. String.prototype.indexOf() indexOf() 메소드는 문자열 내에서 하위 문자열을 검색하는 데 사용합니다. 하위 문자열을 처음 발견한 위치의 인덱스를 리턴하거나, 하위 문자열이 없는 경우 -1을 리턴합니다. 메소.. 2023. 3. 15.
[javascript] 자바스크립트 배열 중복 제거 참고: https://www.javascripttutorial.net/array/javascript-remove-duplicates-from-array/ 이 포스트에서는 JavaScript의 배열에서 중복된 항목을 제거하는 방법을 알아보겠습니다. 1. Set를 사용하여 배열에서 중복 제거 Set 객체는 고유한 값의 집합을 가집니다. 배열에서 중복 항목을 제거하려면: 먼저 중복된 배열을 Set로 변환합니다. 새 Set는 중복 요소를 암묵적으로 제거합니다. 그다음 Set를 다시 배열로 변환합니다. 다음 예제에서는 Set를 사용하여 배열에서 중복 항목을 제거합니다: let chars = ['A', 'B', 'A', 'C', 'B']; let uniqueChars = [...new Set(chars)]; con.. 2023. 3. 14.
[알고리즘] MD5 해시 알고리즘 이란? 참고: https://www.avast.com/c-md5-hashing-algorithm 자바스크립트 MD5 해시 생성하기 MD5 란? MD5 (message-digest algorithm)는 콘텐츠 검증 및 디지털 서명뿐만 아니라 메시지 인증에 사용되는 해시 알고리즘입니다. MD5는 보낸 파일과 받은 파일이 일치하는지 확인하는 해시 함수를 기반으로 합니다. 이전에는 MD5가 데이터 암호화에 사용되었지만, 현재는 주로 인증에 사용됩니다. MD5는 어떻게 작동하는가? MD5는 수학적 해시 알고리즘을 통해 전체 파일을 읽어 원본 파일과 일치하는 서명을 생성합니다. 이렇게 하면 수신된 파일이 전송된 원본 파일과 일치하는지 인증할 수 있으므로 올바른 파일이 필요한 위치에 있는지 확인할 수 있습니다. MD5 해시.. 2023. 3. 13.
[javascript] 자바스크립트 두 좌표 사이 거리구하기 참고: https://javascript.plainenglish.io/javascript-algorithm-distance-between-points-7fe0026857e3 이 포스트에서는 x와 y 좌표로 정의된 두 점 사이의 거리를 계산하는 함수를 만들어보겠습니다. 거리 계산 먼저 x1, y1, x2, y2 네 개의 매개변수를 받는 getDistance라는 함수를 만들어 보겠습니다. 두 점 (x1, y1)과 (x2, y2)의 좌표가 주어집니다. 이 함수의 목적은 두 점 사이의 거리를 반환하는 것 입니다. 이 두 점 사이의 거리를 구하기 위해 다음 공식을 사용합니다: dx는 두 x1, x2의 거리 차이이고 dy는 y1, y2의 거리 차이 입니다. 다음은 함수 사용 예제입니다: getDistance(100.. 2023. 3. 12.
[알고리즘] 해시(hash) 알고리즘 이란? 참고: https://www.okta.com/identity-101/hashing-algorithms/ 해시 알고리즘은 데이터를 왜곡하여 읽을 수 없게 만드는 수학 함수입니다. 해시 알고리즘은 단방향 프로그램이라 다른 사람이 텍스트를 해독하거나 디코드할 수 없는 점이 해시의 키포인트입니다. 해시는 유휴 데이터를 보호하므로, 다른 사용자가 서버에 액세스하더라도 저장된 항목을 읽어낼 수 없습니다. 또한 작성자가 데이터를 만든 후 데이터가 조정되거나 변경되지 않았다는 것을 증명하는 데 도움을 줄 수 있습니다. 때로는 해시를 사용해 대량의 데이터를 이해할 수 있도록 도와줍니다. 해시 알고리즘이란 무엇인가? 수십 개의 서로 다른 해시 알고리즘이 존재하며 모두 조금씩 다르게 작동하지만 사용자는 그저 데이터를 입력할.. 2023. 3. 12.

티스토리툴바