본문 바로가기

javascript144

[javascript] 자바스크립트 문자열 뒤집기 (reverse string) 참고: https://sarahchima.com/blog/reverse-a-string/ 문자열 뒤집기 문제는 쉽게 접할 수 있는 알고리즘 문제입니다. 이 포스트에서는 문자열 뒤집기 알고리즘에 대해 네 가지 JavaScript 솔루션을 알아보겠습니다. 솔루션 1. 배열의 reverse() 메소드 사용하기 Array.reverse() 메소드 덕에 큰 스트레스 없이 배열을 뒤집을 수 있습니다. reverse() 메소드는 배열을 그 자리에서 뒤집습니다. 말 그대로 원본 배열의 첫 번째 요소가 마지막이 되고 마지막 요소가 첫 번째로 바뀝니다. 우리는 문자열로 작업하고 있기 때문에 split() 메소드를 사용하여 문자열을 배열로 변환하고 reverse() 메소드를 사용하여 배열을 뒤집은 다음 join() 메소드를.. 2023. 5. 16.
[javascript] 자바스크립트 배열의 모든 값 더하기 (for, forEach, reduce) 참고: https://www.freecodecamp.org/news/how-to-add-numbers-in-javascript-arrays/ JavaScript의 배열은 하나의 변수에 여러개의 값을 순서대로 저장해주고 다양한 방법으로 해당 값을 조작할 수 있게 해주는 객체입니다. 이 포스트에서는 여러 가지 방법으로 주어진 배열에 있는 모든 숫자의 합계를 계산하는 방법을 알아보겠습니다. 다음 방법을 사용해 배열에 있는 모든 숫자의 합계를 찾는 방법을 알아보겠습니다: for loop forEach() 메소드 reduce() 메소드 JavaScript의 for 루프를 사용하여 배열의 합 계산하기 배열에 있는 모든 숫자의 합을 계산하는 가장 간단한 방법은 for 루프를 사용하는 것 입니다. 이는 반복을 n 번 .. 2023. 5. 16.
[javascript] 자바스크립트 parseFloat 사용 방법 (숫자 변환) 참고: https://flexiple.com/javascript/parsefloat-javascript/ 이 포스트에서는 JavaScript parseFloat() 함수의 문법, 사용법, 예제를 알아보겠습니다. parseFloat()는 문자열을 받아 부동 소수점 숫자로 변환하는 함수입니다. 매개변수에 숫자 값이 포함되어 있지 않거나 문자열의 첫 번째 문자가 숫자가 아니면 NaN 즉, 숫자가 아님을 반환합니다. 이 함수는 숫자가 아닌 문자를 만나는 지점 까지 구문을 분석하여 부동 소수점 숫자를 반환합니다. 문법과 설명 parseFloat(string); 매개변수: 이 함수는 위에서 언급한 숫자 형태의 문자열 한 개를 매개변수로 받습니다. 리턴 값: 부동 소수점 숫자를 리턴하고 매개변수의 첫 번째 문자를 숫.. 2023. 5. 15.
[javascript] 자바스크립트 console.trace (stack trace) 참고: https://dotnettutorials.net/lesson/javascript-console-trace-method/ 이 포스트에서는 JavaScript의 console.trace() 메소드의 사용 방법을 알아보겠습니다. console.trace() 메소드 함수나 코드 조각 디버깅은 우리가 항상 직면하는 문제입니다. 이 때 코드의 실행 흐름을 쉽게 이해하기 위해 console.trace() 메소드를 사용할 수 있습니다. console.trace() 메소드는 콘솔에서 코드가 어떻게 실행되는지와 코드 흐름을 알 수 있는 stack trace를 출력하는 데 사용합니다. 이러한 console.trace() 메소드는 호출 시점에 존재하는 call stack을 로깅합니다. 이로서 코드의 다른 위치에서 호.. 2023. 5. 12.
[javascript] 자바스크립트 console.table() 참고: https://dev.to/nehasoni__/power-of-console-table-in-javascript-18n0 의심의 여지 없이 console.log()는 매우 유용하고 빠르고 간단한 디버그 방법입니다. 대부분의 사람들이 JavaScript 코드를 디버그하기 위해 console.log()를 사용하고 있습니다. 이 포스트에서는 console.table()을 활용하여 JavaScript 코드를 보다 효율적으로 디버깅하는 팁을 공유하려고 합니다. console.table() 이란? console.table()을 사용하면 배열과 객체를 테이블 형식으로 콘솔에 출력할 수 있습니다. 데이터를 표의 형식으로 보여주는 것은 매력적인 요소입니다. 즉, 데이터에 대한 더 많은 통찰력을 얻을 수 있고 코드.. 2023. 5. 12.
[javascript] 자바스크립트 실행 시간 계산 (console.time) 참고: https://www.geeksforgeeks.org/node-js-console-time-method/ console.time() 메소드는 코드나 함수 실행에 걸리는 시간을 계산할 때 타이머로 사용할 수 있습니다. console.timeEnd() 메소드는 타이머를 중지하고 경과 시간을 밀리초 단위로 콘솔에 출력합니다. 이 타이머는 밀리초 미만의 정확도를 가집니다. 문법: console.time(label); 매개변수: 이 메소드는 label 이라는 하나의 매개변수를 받으며 매개변수를 입력하지 않으면 default label이 자동으로 지정됩니다. 레이블은 코드의 기능이나 코드 조각에 따라 다르게 설정할 수 있습니다. 아래 예제는 console.time() 메소드의 사용 방법을 보여줍니다. 예제 .. 2023. 5. 12.
[javascript] 자바스크립트 파일 업로드 (form post) 참고: https://austingil.com/upload-files-with-javascript/ 이 포스트에서는 JavaScript를 사용해 파일 업로드 요청을 만들어 보겠습니다. 또한 파일에 접근하는 방법, HTTP 요청을 생성하는 방법, 이를 재사용 가능하게 하는 방법을 알아보겠습니다. 이벤트 핸들러 설정 File Upload 사용자의 파일에 접근하려면 요소에 type 속성을 file로 지정해야합니다. 파일 업로드를 위해 HTTP request를 만들려면 요소를 사용해야 합니다. JavaScript는 항상 그렇지만 파일에 접근하려면 사용자의 파일 입력이 있어야합니다. 하지만 HTTP 요청은 브라우저가 form 없이 Fetch API를 사용하여 만들어낼 수 있습니다. 하지만 다음과 같은 이유로 여전.. 2023. 5. 12.
[javascript] 자바스크립트 getBoundingClientRect (size, position) 참고: https://www.golinuxcloud.com/javascript-getboundingclientrect/ JavaScript의 getBoundingClientRect() 메소드는 웹페이지 요소의 위치와 크기를 알아내고자 할 때 사용합니다. 이는 뷰포트(웹 페이지의 보이는 부분)에서 요소의 위치와 크기를 가져옵니다. 리턴 값으로 다음과 같은 속성을 반환합니다. left: 뷰포트의 왼쪽에서 요소의 왼쪽 부분까지의 거리 top: 뷰포트의 위쪽에서 요소의 위쪽 까지의 거리 right: 뷰포트의 오른쪽와 요소의 오른쪽 사이 거리 bottom: 뷰포트의 아래쪽과 요소의 아래쪽 거리 width: pixel 단위의 요소의 가로 크기 height: pixel 단위 요소의 세로 크기 This is some .. 2023. 5. 10.
[javascript] 자바스크립트 요소 삽입 insertBefore 참고: https://www.golinuxcloud.com/insertbefore-javascript/ insertBefore() 라는 DOM 메소드가 있습니다. 이를 사용하면 기존 요소 앞에 새로운 요소를 삽입할 수 있고 올바르게 사용하기 위해서는 다음 세가지를 지정해야합니다. 삽입하고자 하는 새로운 요소 위치를 지정해 줄 기존 요소 두 요소의 부모 요소 JavaScript insertBefore() 문법 다음은 문법입니다: parentElement.insertBefore(newElement,targetElement) 새 요소 삽입 시 부모 요소가 뭔지 모를 때도 있지만 몰라도 괜찮습니다. 왜냐하면 타겟 요소의 parentNode 속성을 사용하면 되기 때문입니다. 모든 요소 노드의 부모는 반드시 다른 .. 2023. 5. 9.
[javascript] 자바스크립트 배열 정렬 (array sort) 참고: https://www.javascripttutorial.net/javascript-array-sort/ 이 포스트에서는 JavaScript Array의 sort() 메소드로 숫자의 배열, 문자열의 배열, 객체의 배열을 정렬하는 방법을 알아보겠습니다. JavaScript Array sort() 메소드 sort() 메소드를 사용하면 배열의 요소를 알맞은 자리에 정렬할 수 있습니다. sort() 메소드는 정렬된 배열을 리턴하기도 하지만 원본 배열의 요소 위치도 변경합니다. sort() 메소드는 기본적으로 작은 값 부터 큰 값 까지 오름차순으로 정렬하고 이 때 요소를 문자열로 캐스팅여 문자열 비교를 통해 순서를 결정합니다. 다음의 예제를 확인해 보겠습니다: let numbers = [0, 1, 2, 3,.. 2023. 5. 4.
[javascript] 자바스크립트 랜덤으로 배열 섞기 (shuffle array) 참고: https://sabe.io/blog/javascript-shuffle-array 대부분의 상황에서 배열의 순서는 중요하게 여겨지며 배열이 그렇게 나열된 데는 각자 이유가 있습니다. 하지만 어떤 경우에는 배열의 요소를 무작위로 섞어 새 위치에 나열하도록 해야할 때가 있습니다. 이 포스트에서는 JavaScript로 배열의 요소를 쉽게 섞는 방법을 알아보겠습니다. JavaScript로 배열을 섞는 방법 배열을 섞는 가장 쉬운 방법은 sort() 메소드를 사용하는 것 입니다. sort() 메소드는 콜백 함수를 매개변수로 받습니다. 이 콜백 함수는 비교할 두 개의 요소를 매개변수로 사용하고 이 콜백 함수의 결과로 순서를 결정할 수 있도록 합니다. 이 콜백 함수의 리턴 값이 음수면 첫 번째 요소가 두 번째.. 2023. 5. 3.
[javascript] 자바스크립트 카운드다운 타이머 (countdown timer) 참고: https://dev.to/code_mystery/simple-countdown-timer-using-javascript-1jab JavaScript 카운트 다운 타이머는 사이트를 최신 상태로 유지 하기 위해 다양한 전자상거래 사이트에서 사용되고 있습니다. 우리는 다양한 유형의 전자 상거래 사이트에서 제품이나 제안이 도착하기 전 일종의 카운드다운이 시작되는 것을 볼 수 있습니다. 이 포스트에서는 간단한 JavaScript 코드를 사용하여 카운트다운 타이머를 만들어보겠습니다. TL;DR 전체 소스코드와 데모는 codepen에서 확인할 수 있습니다. See the Pen countdown timer by shinyks (@shinyks) on CodePen. 디지털 시계를 만드는 방법을 알고있다면 이.. 2023. 5. 3.
[javascript] 자바스크립트 타자기 효과로 글쓰기 참고: https://medium.com/@mignunez/how-to-easily-create-a-typewriter-effect-with-javascript-1e1d9ca05b59 TL;DR 전체 코드와 데모를 다음 codepen에서 확인할 수 있습니다. See the Pen typewriter by shinyks (@shinyks) on CodePen. HTML 타자기 효과를 내기 위해 필요한 것은 메시지를 표시할 요소만 있으면 됩니다. CSS 먼저 문장의 마지막에 보일 깜빡이 효과를 만듭니다. 필수는 아니지만 타자기 효과를 더욱 사실적으로 보이게 해주기 때문에 적극 권장합니다. 깜빡이는 0.5 초 마다 opacity를 0으로 설정하는 애니메이션을 사용합니다. span{ animation: blin.. 2023. 5. 2.
[javascript] 자바스크립트 섭씨를 화씨로 변환 참고: https://medium.com/@DylanAttal/convert-celsius-to-fahrenheit-in-javascript-b6b76b47c4f0 온도를 섭씨에서 화씨로 변환하는 것은 흔히 하는 계산입니다. 이는 알고리즘을 공부할 때 시작하기 좋은 예제입니다. 왜냐하면 섭씨에서 화씨로 변환하는 것은 매우 명확한 단계가 있기 때문입니다. 알고리즘 섭씨에서 화씨로 변환하는 알고리즘은 섭씨에 9/5를 곱하고 32를 더하는 것 입니다. 구체적으로 섭씨를 나타내는 celsius 변수가 주어지고 이 변수를 이용해 fahrenheit 변수에 섭씨에 해당하는 화씨를 할당합니다. 위에서 언급한 알고리즘을 사용하여 섭씨 온도를 화씨 온도로 변환하면 됩니다. 함수와 리턴 값에 대해서는 향후 다룰 것 이므로.. 2023. 5. 2.
[javascript] 자바스크립트 querySelector vs getElementById 참고: https://careerkarma.com/blog/javascript-queryselector-vs-getelementbyid/ querySelector나 getElementById 메소드를 사용하면 둘 다 JavaScript Document Object Model (DOM)에서 요소를 검색할 수 있습니다. 그렇지만 각각의 메소드에는 고유한 사용 방법이 따로 있습니다. 이 포스트에서는 querySelector 및 getElementById의 일반적인 사용 사례를 알아보겠습니다. 또한 이 두가지 방법을 비교하고 각각의 작동 방식에 대한 예시를 알아보겠습니다. querySelector 란? JavaScript querySelector() 메소드를 사용하면 CSS 선택자를 사용하여 DOM 또는 웹 페.. 2023. 5. 2.
[javascript] 자바스크립트 다운로드 링크 만들기 참고: https://levelup.gitconnected.com/how-to-download-with-javascript-1777ec0457eb JavaScript에서 파일을 다운로드하는 방법은 여러가지가 있습니다. 이는 단일 파일을 다운로드하거나 여러 파일을 일괄 다운로드할 수 있습니다. 이 포스트에서는 이 두가지 방법을 모두 알아보겠습니다. 다운로드 링크 만들기에는 두 가지 방법이 있습니다: 단일 파일 다운로드 하기 여러 파일 다운로드 하기 단일 파일 다운로드 링크 만들기 현재 이미지가 있고 이 이미지를 다운로드 할 수 있도록 링크를 제공하고 싶다고 가정해 보겠습니다. 이 예시를 위해 링크로 만들 이미지를 만들겠습니다. 이는 오직 예시를 위한 것이며 실제로는 필요 없을 수도 있습니다. functio.. 2023. 5. 1.
[javascript] 자바스크립트 툴팁 (tooltip) 참고: https://stackdiary.com/hover-tooltip-javascript/ 이 포스트에서는 JavaScript의 addEventListener 메소드를 활용해 선택한 요소에 대한 툴팁(hover effect)을 만드는 방법을 알아보겠습니다. 이는 attr() 속성을 사용하여 CSS로도 만들 수 있습니다. .addEventListener()는 다양한 DOM 이벤트를 모니터링한 다음 해당 이벤트 타입에 따라 작업을 수행합니다. 이 글에서는 mouseover 및 mouseleave 이벤트에 중점을 두겠습니다. 다음은 결과물 확인을 위한 codepen 입니다. See the Pen tooltip by shinyks (@shinyks) on CodePen. 코드는 상당히 간단합니다. getEl.. 2023. 4. 26.
[javascript] 자바스크립트 로딩 버튼 만들기 참고: https://dev.to/dcodeyt/create-a-button-with-a-loading-spinner-in-html-css-1c0h 이 포스트에서는 HTML과 CSS를 사용하여 클릭했을 때 로딩 이미지가 나타나는 버튼을 만들어보겠습니다. 소스코드 & 미리보기 전체 소스코드를 미리 보려면 다음 codepen에서 확인할 수 있습니다. See the Pen loading button by shinyks (@shinyks) on CodePen. HTML 버튼에 대한 HTML 작성부터 시작하겠습니다. 이는 매우 간단합니다. 먼저 클래스가 button인 요소를 만들고 그 안에 넣을 텍스트로 을 사용합니다. Save Changes 이게 HTML의 전부입니다. 이제 다음의 CSS로 넘어가겠습니다. CS.. 2023. 4. 26.
[javascript] 자바스크립트 scroll to top 버튼 만들기 참고: https://w3collective.com/scroll-to-top-button-javascript/ 이 포스트에서는 JavaScript를 사용하여 화면을 맨 위로 스크롤하는 버튼을 만들어 보겠습니다. 이 버튼을 사용하면 사용자가 아래로 스크롤 했다가 빠르게 페이지 상단으로 돌아갈 수 있으므로 콘텐츠 페이지가 긴 모바일 페이지를 만들 때 특히 유용합니다. 먼저 JavaScript 코드를 실행할 scrollTop 함수를 생성하겠습니다. const scrollTop = function () { // JavaScript 코드 위치 }; scrollTop(); 다음으로 scrollTop 함수 안에서 HTML 버튼을 생성하겠습니다. const scrollTop = function () { const sc.. 2023. 4. 25.
[javascript] 자바스크립트 SHA-256 해시 생성하기 참고: https://www.debugpointer.com/javascript/create-sha256-hash-in-javascript 암호화 및 해싱은 네트워크 보안 모듈의 기반 역할을 했습니다. 가장 많이 사용되는 해시 알고리즘은 다이제스트 크기가 256비트인 SHA(Secure Hash Algorithm) 또는 SHA 256 입니다. 다양한 변형이 있지만 SHA 256이 실제 응용 프로그램에서 가장 많이 사용되었습니다. SHA-256은 SHA 2 알고리즘 제품군의 일부이며 SHA는 Secure Hash Algorithm을 나타냅니다. 이는 보다 쉽게 크랙되는 SHA 1 제품군의 후속으로 도입하기위해 NAS와 NIST의 공동 노력이 있었습니다. SHA 2는 2001년에 발표되었으며 그 이후로 계속 .. 2023. 4. 25.

티스토리툴바