본문 바로가기

dev/javascript158

[javascript] 자바스크립트 마우스 커서 모양 변경 참고: https://www.freecodecamp.org/news/how-to-make-a-custom-mouse-cursor-with-css-and-javascript/ 어떤 웹 사이트를 방문했는데 익숙한 화살표 모양의 마우스 커서가 아니라 멋진 커서가 표시되어 놀란적이 있습니까? 이는 실제 사용자의 경험을 향상시킬 수 있습니다. 이 포스트에서는 CSS와 JavaScript를 통하여 마우스 커서의 모양을 바꾸는 방법을 알아보겠습니다. CSS로 마우스 커서 커스터마이징 CSS를 사용하여 마우스 커서를 커스터마이징하는 것은 상당히 간단합니다. 왜냐하면 CSS에는 이미 이 작업을 하는 속성이 있기 때문입니다. 여기서 해야할 일은 각각의 속성이 어떤 기능이 있는지 확인하는 것 입니다. 프론트엔드 개발자라면 .. 2023. 5. 17.
[javascript] 자바스크립트 별점 주기 (star rating) 참고: https://dev.to/leonardoschmittk/how-to-make-a-star-rating-with-js-36d3 이 포스트에서는 HTML5, CSS3, JavaScript를 활용해 별점을 매기는 방법을 알아보겠습니다. 별 아이콘은 Font Awesome에서 가져왔고 HTML head에 CDN을 추가하면 됩니다. TL;DR 다음 codepen에서 전체 코드를 확인할 수 있습니다. See the Pen star rating by shinyks (@shinyks) on CodePen. 1. HTML 추가 위의 HTML 코드가 우리 앱의 뼈대가 됩니다. 이는 다음의 이미지와 같이 5 개의 빈 별로 이루어져있습니다. 2. 스크립트 추가 const ratingStars = [...documen.. 2023. 5. 17.
[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] HTML 웹 접근성 (Accessibility) 참고: https://www.codecademy.com/article/accessibility-and-html 시각 장애가 있는 대부분의 사용자는 screen reader를 사용하여 인터넷을 사용합니다. 이 포스트에서는 시각 장애가 있는 사용자가 콘텐츠에 접근할 수 있도록 하는 다양한 방법에 대해 알아보겠습니다. 들어가며 웹 페이지는 모든 사용자가 접근할 수 있도록 디자인해야 합니다. 특히, 웹 페이지의 시각적/동적인 특성이 시각 장애가 있는 사용자에게도 의미가 있는지 확인해야합니다. 대부분의 시각 장애인 또는 맹인 사용자는 screen reader의 도움으로 웹 페이지에 접근합니다. 스크린 리더는 웹 페이지의 HTML을 분석하여 콘텐츠를 큰 소리로 읽어주고 사용자의 명령에 따라 페이지를 탐색하고 링크 .. 2023. 5. 11.
[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] CSS responsive grid (flexbox) 참고: https://medium.com/@mignunez/how-to-create-a-responsive-image-grid-gallery-with-html-css-flexbox-1a4ea78f1ab3 이 포스트에서는 반응형 이미지 그리드를 만드는 방법을 알아보겠습니다. 개괄적인 아이디어는 내부에 세 개의 열이 있는 하나의 컨테이너를 만드는 것 입니다. 각 열에는 자체 이미지 세트를 넣습니다. 열 내부의 이미지 정렬은 flexbox로 합니다. 아래서 보다시피 이미지는 마법 처럼 정렬되는 것이 아니라 전략적으로 그렇게 보이도록 만들어진 것 입니다. TL;DR 모든 코드와 데모는 codepen에서 확인할 수 있습니다. See the Pen image gallery by shinyks (@shinyks) o.. 2023. 5. 2.
[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.

티스토리툴바