본문 바로가기

전체 글386

[javascript] 자바스크립트 화면 크기 얻기 (screen, window, page size) 참고: https://dmitripavlutin.com/screen-window-page-sizes/ 브라우저 창이 가로로 긴지 세로로 긴지 알아내기 위해 브라우저 창의 너비와 높이를 비교할 수 있습니다. 하지만 screen, window, page 같은 다양한 크기 값 때문에 서로 혼동하기 쉽습니다. 이 포스트에서는 이들의 크기가 어떻게 정의되는지, 어떻게 접근하는지를 알아보겠습니다. 1. Screen 1.1 Screen size screen size는 모니터나 모바일 화면의 가로와 세로 크기입니다. window.screen이 화면의 크기 정보를 가지고 있는 객체입니다. 다음은 화면의 가로, 세로 크기를 얻는 방법입니다: const screenWidth = window.screen.width; cons.. 2023. 5. 29.
[javascript] jquery-ui 드래그 앤 드롭 (drag and drop) 참고: https://www.elated.com/drag-and-drop-with-jquery-your-essential-guide/ 드래그 앤 드롭은 사용자가 웹 사이트와 상호 작용하는 매우 직관적인 방법입니다. 대부분의 사람들은 다음과 같은 작업에 드래그 앤 드롭을 사용합니다. 이메일 메시지를 특정 폴더로 이동할 때 목록의 항목 순서를 변경할 때 카드나 퍼즐 조각 같은 게임 내 객체 이동 크로스 브라우징 문제 때문에 순수 JavaScript 만으로 드래그 앤 드롭을 구현하기는 매우 어렵습니다. 하지만 최신 브라우저와 약간의 jQuery를 사용하면 간단히 구현할 수 있습니다. 이 포스트에서는 jQuery로 드래그 앤 드롭 인터페이스를 만드는 방법을 살펴보고 드래그 앤 드롭 예제인 숫자 카드 게임을 만들.. 2023. 5. 27.
[javascript] HTML 드롭다운 메뉴 만들기 (drop-down) 참고: https://www.freecodecamp.org/news/html-drop-down-menu-how-to-add-a-drop-down-list-with-the-select-element/ 드롭다운 메뉴는 다양한 웹 사이트, 응용프로그램, 웹 페이지에서 목록을 표시하기 위해 사용하고 있습니다. 이를 사용하여 네비게이션 메뉴, 양식 옵션 등을 만들 수 있습니다. 이러한 것 들을 보다보면 메뉴를 만드는게 얼마나 복잡할지 짐작할 수 있습니다. 사실 경우에 따라 조금 복잡한 경우도 있습니다. 드롭다운 메뉴는 사용자가 메뉴를 클릭하거나 마우스 커서를 올리면 아래로 쭉 펼쳐지는 옵션 목록입니다. 또한 이 메뉴는 사용자가 다시 클릭하거나 커서를 빼면 사라집니다. 이 포스트에서는 웹 페이지에 드롭다운 메뉴를 .. 2023. 5. 26.
[javascript] 자바스크립트 화폐 단위(통화) 표시 (Intl.NumberFormat) 참고: https://www.freecodecamp.org/news/how-to-format-number-as-currency-in-javascript-one-line-of-code/ API나 외부 리소스의 데이터를 받아 쓸 때 일정한 포멧으로 받을 것 입니다. 예를 들어 쇼핑몰을 만들고 있다면 가격에 대한 데이터는 일정한 포멧으로 전달해 줄 것 입니다. 이러한 가격 데이터는 "14340" 이나 다음 배열과 같은 일반적인 숫자일 것 입니다: const books = [ { "id": 001, "name": "Clean Code", "price": 10.99, }, { "id": 002, "name": "Introduction to Algorithms", "price": 1199, }, { "id": 00.. 2023. 5. 26.
[javascript] 자바스크립트 페이지 새로 고침 (reload) 참고: https://www.freecodecamp.org/news/javascript-refresh-page-how-to-reload-a-page-in-js/ JavaScript는 동적 웹 사이트나 대화형 애플리케이션을 만들 수 있는 다목적 프로그래밍 언어입니다. 웹 개발 작업에는 콘텐츠를 업데이트하거나 웹 페이지를 새로 고치거나 다시 로드하는 것이 있습니다. 이 포스트에서는 JavaScript로 페이지를 새로 고치는 다양한 방법을 알아보고 각 접근 방법에 대해 장단점을 알아보겠습니다. JavaScript로 페이지를 새로 고치는 이유는? 웹 페이지를 새로 고치는 작업은 다양한 시나리오에서 필요합니다. 예를 들어: Content Update: 웹 페이지의 콘텐츠가 동적이고 자주 변경되는 경우 최신 데이터.. 2023. 5. 25.
[javascript] 자바스크립트 배열 일부분 가져오기 (array slice) 참고: https://www.programiz.com/javascript/library/array/slice 이 포스트에서는 예제를 통해 JavaScript의 Array.slice() 메소드에 대해 알아보겠습니다. slice() 메소드는 배열의 일부를 shallow copy 하여 새 배열로 리턴합니다: const numbers = [2, 3, 5, 7, 11, 13, 17]; const newArray = numbers.slice(3, 6); console.log(newArray); slice() 문법 slice() 메소드의 문법은 다음과 같습니다: arr.slice(start, end); 여기서 arr은 일부를 가져올 원본 배열입니다. slice() 매개변수 slice() 메소드는 다음 매개변수를 받습.. 2023. 5. 24.
[javascript] 자바스크립트 현재 url 가져오기 (window.location) 참고: https://www.freecodecamp.org/news/how-to-get-the-current-url-with-javascript/ 동적 웹이나 대화형 웹 애플리케이션을 구축하려면 JavaScript로 작업하게 됩니다. 이 작업들 중에는 웹 페이지의 현재 url을 가져오는 것도 있을 것 입니다. 이 포스트에서는 JavaScript의 location 객체를 사용하여 현재 url을 가져오는 방법을 알아보겠습니다. location 객체 사용 방법 location 객체는 JavaScript의 내장 객체로 웹 페이지의 현재 url에 대한 정보를 제공합니다. 여기에는 url의 여러 부분에 접근하고 수정할 수 있는 다양한 속성이 포함되어있습니다. location 객체에 접근하려면 window.loca.. 2023. 5. 24.
[javascript] 자바스크립트 배열 삽입 (array insert) 참고: https://www.freecodecamp.org/news/insert-into-javascript-array-at-specific-index/ array는 JavaScript에서 매우 중요한 부분입니다. 배열을 통해 데이터 컬렉션을 저장하고 조작할 수 있습니다. 경우에 따라 배열의 특정 인덱스에 새 요소를 삽입해야 할 수도 있습니다. 이 작업을 수행하려면 push() 메소드 또는 splice() 메소드를 사용해야 합니다. 이 포스트에서는 위 두 가지 기술을 사용하여 배열의 특정 인덱스에 요소를 추가하는 방법을 자세히 알아보겠습니다. JavaScript 배열의 작동 방식 배열의 특정 인덱스에 삽입하는 방법에 대해 알아보기 전에 JavaScript의 배열을 간단히 살펴보겠습니다. 배열은 모든 데이.. 2023. 5. 23.
[javascript] 자바스크립트 배열 항목 위치 이동 (swap) 참고: https://www.freecodecamp.org/news/swap-two-array-elements-in-javascript/ JavaScript에서 배열 작업을 할 때 배열의 두 항목의 위치를 바꿔야 하는 경우가 있습니다. 예를 들면 두 값을 비교한 다음 조건이 참이면 스왑하는 버블 정렬 알고리즘 등이 있을 수 있습니다. 이 외에도 다양한 상황에서 배열의 요소를 스왑하는 경우가 있을 것 입니다. swap 이라는 용어의 의미를 아직 이해하지 못한 경우를 대비해 간단히 설명하겠습니다. 아래 이미지와 같이 숫자 배열이 있고 인덱스 0의 요소 12와 인덱스 1의 요소 -2의 위치를 바꾸고 싶을 때 두 값의 위치를 바꾸는 것을 swap 한다고 부릅니다. JavaScript로 이러한 유형의 작업 수행에.. 2023. 5. 23.
[javascript] 자바스크립트 좋아요 버튼 만들기 참고: https://www.tutorialspoint.com/how-to-toggle-between-a-like-dislike-button-with-css-and-javascript 토글 버튼은 기능을 켜고 끄거나 설정을 변경하는 것 처럼 많은 기능에 사용할 수 있습니다. 이 포스트에서는 CSS와 JavaScript를 사용하여 좋아요 버튼과 싫어요 버튼이 토글되는 프로그램을 작성해 보겠습니다. 이를 위해 HTML, CSS, JavaScript 세 개의 파일을 만들겠습니다. TL;DR 다음은 좋아요 토글 버튼 전체 스크립트입니다. See the Pen toggle like by shinyks (@shinyks) on CodePen. HTML (index.html) 버튼, 제목, 태그 등을 생성하려면 HT.. 2023. 5. 22.
[linux] 시스템 관리자를 위한 리눅스 명령어 참고: https://www.tutorialspoint.com/25-useful-linux-commands-for-system-administrators 리눅스는 대부분의 시스템 관리자가 서버 및 인프라 관리를 위해 사용하는 오픈 소스 운영체제 중 하나 입니다. 시스템 관리자로서 시스템을 효율적으로 관리하고 문제를 해결하려면 리눅스 명령어에 대한 이해는 필수입니다. 이 포스트에서는 시스템 관리자를 위한 25 가지 유용한 리눅스 명령어와 예제를 알아보겠습니다. ls - List Directory Contents ls 명령어는 디렉토리의 내용을 나열합니다. 기본적으로 현재 디렉토리의 파일과 디렉토리 목록을 나열합니다. 예제 - 현재 디렉토리 내의 모든 파일과 디렉토리를 나열하려면 다음 명령어를 사용합니다. .. 2023. 5. 21.
[javascript] 자바스크립트 배열 추가 (push) 참고: https://blog.hubspot.com/website/javascript-array-push JavaScript 개발자라면 배열로 작업하는 방법을 알아햐 합니다. 특히 많은 양의 데이터를 접해야한다면 더더욱 그렇습니다. JavaScript 내에서 배열은 단일 변수에 여러 개의 요소를 저장하는 용도로 사용합니다. 하지만 배열의 요소를 수동으로 추가한다면 시간이 많이 걸리고 복잡해집니다. 이런 경우 JavaScript 배열 push 메소드를 사용하면 됩니다. 이 포스트에서는 JavaScript 배열의 push 메소드를 사용하는 방법을 알아보겠습니다. JavaScript array push 란? 이미 여려개의 요소를 가지고 있는 배열이 있다고 가정해보겠습니다. 이 배열에 요소를 추가하고자 한다면 .. 2023. 5. 21.
[javascript] 자바스크립트 문자열 생략, 길이 제한 (truncate) 참고: https://www.freecodecamp.org/news/how-to-truncate-text-with-css-javascript/ CSS는 프로그래밍 툴킷에 포함할 수 있는 강력한 도구입니다. 이는 반응이 빠르고 매력적인 웹 사이트를 만들 수 있는 다양한 기능을 제공합니다. 가끔 일부 콘텐츠나 텍스트가 줄임표(...)로 생략됐거나 숨겨져 있는 것을 본 적 있을 것 입니다. 해당 기능을 어떻게 개발하는지 궁금하지 않나요? 이 포스트에서는 JavaScript와 CSS를 사용하여 여러 줄 자르기 및 생략하는 방법을 알아보겠습니다. text truncation 이란? CSS에서 text truncation은 추가적인 콘텐츠를 숨기고 줄임표(...)로 대체하여 문자열이 컨테이너에서 넘치치 않게 합니다.. 2023. 5. 19.
[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.

티스토리툴바