본문 바로가기

javascript144

[javascript] 자바스크립트 객체 속성 지우기 (delete) 참고: https://builtin.com/software-engineering-perspectives/javascript-delete JavaScript에서 delete 연산자는 객체의 속성을 삭제합니다. 실제로 속성을 삭제한 후에는 해당 속성에 접근할 수 없으며 접근하면 undefined를 반환합니다. delete 연산자가 속성의 제거를 성공하면 true를, 실패하면 false를 리턴합니다. 이는 객체의 속성에만 영향을 미치고 변수나 함수 이름에는 영향을 주지 않습니다. delete 연산자를 미리 정의된 JavaScript 객체인 window, Math, Date 같은 객체의 제거에 사용하면 안됩니다. 이는 응용프로그램을 중단시킬 수 있습니다. 객체 속성 삭제 delete 연산자는 JavaScript.. 2023. 6. 7.
[javascript] 자바스크립트 온라인/오프라인 확인 (navigator.onLine) 참고: https://dev.to/nialljoemaher/detecting-if-a-user-is-online-offline-with-javascript-3bcc 매일 인터넷이 빵빵한 사무실에서 일하는 개발자로서 인터넷이 되는 것은 당연한 일이고 localhost는 가장 빠른 사이트가 됩니다. 하지만 많은 사람들이 간과하고 있는 것이 무엇이냐면 모든 인터넷 환경이 일관적으로 좋지는 않다는 것 입니다. 이 포스트에서는 사용자가 인터넷에 연결되어 있는지 확인하고 연결이 끊어지거나 다시 연력되는 것을 감지하여 인터넷 상태에 따라 적절히 UI를 업데이트 하는 방법을 알아보겠습니다. 기본 코드 index.html: Hello style.css: body { background-color: #555; } .app.. 2023. 6. 1.
[javascript] HTML 버튼 클릭 참고: https://www.w3docs.com/snippets/html/how-to-make-button-onclick-in-html.html HTML 요소의 onclick 속성은 모든 브라우저에서 지원하는 이벤트 속성입니다. 이는 사용자가 버튼을 클릭하면 발생합니다. onclick 버튼을 만들려면 요소에 onclick 이벤트 속성을 추가하면됩니다. window.location 객체의 URL 바꾸기 버튼 요소의 onclick은 사용자가 버튼을 클릭했을 때 스크립트를 실행합니다. 버튼을 클릭하면 웹사이트를 이동하는 예제를 통해 이를 알아보겠습니다: Click Here 위의 코드에서는 버튼 요소의 onclick 속성에 window.location의 URL을 변경하는 스크립트를 넣었습니다. button on.. 2023. 5. 31.
[javascript] 자바스크립트 이벤트 리스너 등록 (addEventListener) 참고: https://www.freecodecamp.org/news/javascript-addeventlistener-example-code/ JavaScript의 addEventListener() 메소드를 사용하면 버튼을 클릭하여 이벤트가 발생할 때 호출할 함수를 설정할 수 있습니다. 이 포스트에서는 addEventListener()를 사용하는 방법을 알아보겠습니다. 이벤트와 이벤트 핸들러의 이해 사용자 또는 브라우저가 페이지를 조작하면 이벤트가 발생합니다. 이를 사용해 웹 페이지 요소를 동적으로 변경할 수 있으므로 이벤트는 중요한 역할을 맡고있습니다. 예를 들어 브라우저가 document 로딩을 완료하면 load 이벤트가 발생하고 사용자가 버튼을 클릭하면 click 이벤트가 발생합니다. 이벤트는 한 .. 2023. 5. 31.
[javascript] 자바스크립트 객체 디스트럭처링 (destructuring) 참고: https://dmitripavlutin.com/javascript-object-destructuring/ 객체 디스트럭처링은 객체에서 속성을 가져오고 변수에 바인딩하는 JavaScript의 유용한 기능입니다. 또한 디스트럭처링은 코드 한 줄로 여러 속성을 추출하고 중첩된 객체의 속성에 접근할 수 있으며 속성이 존재하지 않을 경우 기본 값을 할당할 수 있습니다. 이 포스트에서는 JavaScript에서 디스트럭처링을 사용하는 방법을 알아보겠습니다. 1. Destructuring의 필요성 객체의 일부 속성을 가져오고 싶을 때 ES2015 이전 환경에서는 다음과 같은 코드를 작성해야 합니다: var hero = { name: 'Batman', realName: 'Bruce Wayne' }; var na.. 2023. 5. 30.
[javascript] 자바스크립트 배열 합치기 (concat) 참고: https://www.samanthaming.com/tidbits/49-2-ways-to-merge-arrays/ 다음 두 가지 예제는 배열을 합치고 새 배열을 반환하는 코드입니다. 스프레드 연산자가 사용하기 편하지만 오래된 브라우저(ES6를 지원하지 않는) 까지 지원해야 하는 경우 Array.concat()을 사용해야 합니다. const cars = ['🚗', '🚙']; const trucks = ['🚚', '🚛']; // Method 1: Concat const combined1 = [].concat(cars, trucks); // Method 2: Spread const combined2 = [...cars, ...trucks]; console.log(combined1); console.lo.. 2023. 5. 30.
[javascript] 자바스크립트 스프레드 연산자 (spread operator) 참고: https://www.programiz.com/javascript/spread-operator 이 포스트에서는 JavaScript의 스프레드 연산자를 예제와 함께 알아보겠습니다. 스프레드 연산자는 JavaScript ES6에서 사용할 수 있는 새로 추가된 기능입니다. 스프레드 연산자 (spread operator) 스프레드 연산자(...)는 배열같은 객체의 요소를 전개하거나 펼칩니다. 예를 들면: const arrValue = ['My', 'name', 'is', 'Jack']; console.log(arrValue); console.log(...arrValue); 위의 예제에서 다음의 코드 "console.log(...arrValue)"는 "console.log('My', 'name', 'is'.. 2023. 5. 29.
[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] 자바스크립트 화폐 단위(통화) 표시 (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.
[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.

티스토리툴바