전체 글787

• 

  [JS]이미지가 로딩되었는지 체크하는 방법 이미지가 로딩되었는지 체크하는 방법 JavaScript에서 이미지를 가져와서 웹 페이지에 보여주는 방법은 간단합니다. 태그의 src 애트리뷰트에 이미지가 위치하는 url을 설정하면 됩니다. 예를 들어, 다음 메인 사이트의 로고 사진을 가져와서 보여주고 싶다고 가정합시다. 순서 1. 다음 메인 사이트로 이동한 다음 크롬 개발자 도구를 실행합니다. 순서 2. 요소 탭을 실행한 다음 좌측 상단의 아이콘을 클릭합니다. 순서 3. 로고 사진을 클릭합니다. 순서 4. 현재 소스를 복사한 다음 src 애트리뷰트에 설정합니다. JavaScript에서 이미지를 불러오는 방법은 간단하지만, 용량이 큰 이미지를 로드하는 경우 많은 시간이 걸릴 수 있으며 이미지를 DOM에 추가하는 과정에서 에러가 발생할 수 있습니다. 따라서.. JavaScript/Tip 2022. 12. 11.

• 

  [JS]이벤트 핸들러와 이벤트 리스너 이벤트 핸들러와 이벤트 리스너 JavaScript에서 이벤트는 사용자와 웹 페이지간의 상호작용입니다. 예를 들어 티스토리에서 좋아요 버튼을 클릭하거나 네이버 검색 창에서 엔터 키를 누르는 행위를 이벤트가 동작했다고 말합니다. JavaScript에서 이벤트가 발생했을 때, 개발자가 구현한 기능을 수행하도록 함수를 연결하는 것을 이벤트 핸들러 또는 이벤트 리스너라고 말합니다. 이벤트 핸들러와 이벤트 리스너는 비슷하면서도 다른 개념이며 이번 포스팅은 JavaScript에서 이벤트와 함수를 연결하는 방법 그리고 이벤트 핸들러와 이벤트 리스너의 차이점을 설명합니다. 이벤트 핸들러 이벤트 핸들러는 쉽게 설명하자면 addEventListener() 메서드를 사용하지 않고 이벤트와 함수를 연결하는 것입니다. 버튼에서 .. JavaScript/DOM 2022. 12. 10.

• 

  [JS]이벤트 흐름(Event Flow) 이해하기 이벤트 흐름(Event Flow) 이해하기 JavaScript에서 이벤트라는 개념은 간단하면서 복잡합니다. 특정 이벤트(클릭, 값 변경, 마우스 커서 이동 등)가 발생했을 때, 동작하는 이벤트 핸들러 함수를 구현하는 것은 간단하지만 이벤트가 발생하고 처리되는 과정은 생각보다 복잡하기 때문입니다. 이번 포스팅은 JavaScript에서 이벤트가 무엇이고 어떻게 동작하는지 설명합니다. 이벤트(Event) 이벤트는 웹 페이지를 사용하는 사용자에 의해 일어나는 사건입니다. 이벤트의 대표적인 예시로 버튼 클릭, 엔터 키 입력, 파일 드래그 앤 드롭이 존재합니다. 사용자가 로그인 화면에서 id와 password를 입력 후 엔터키를 입력하거나 로그인 버튼을 눌렀을 때, id와 password를 처리하는 기능은 개발자가.. JavaScript/DOM 2022. 12. 10.

• 

  [JS]insertAdjacentHTML 메서드로 HTML 요소 추가하기 insertAdjacentHTML 메서드로 HTML 요소 추가하기 JavaScript에서 HTML 요소를 추가할 수 있는 방법으로 innerHTML 프로퍼티가 존재합니다. 하지만 innerHTML은 생각보다 빠르게 동작하지 않으며 많은 위험 요소를 가지고 있습니다. 이번 포스팅은 innerHTML의 위험성과 JavaScript에서 HTML 요소를 추가할 수 있는 또 다른 방법인 insertAdjacentHTML() 메서드를 설명합니다. innerHTML의 위험성 HTML 요소를 가져온 다음 innertHTML 프로퍼티의 값을 변경하면 HTML 요소의 텍스트를 변경하거나 하위 노드를 추가할 수 있습니다. 아래는 id가 "list"인 요소를 가져온 다음 innerHTML 프로퍼티를 사용하여 두 개의 요소를 .. JavaScript/DOM 2022. 12. 10.

• 

  [JavaScript]두 객체를 합치는 방법 두 객체를 합치는 방법 이번 포스팅은 JavaScript에서 두 객체를 합치기 위해 알아야 할 모든 내용을 설명합니다. Object.assign() Object.assign() 메서드를 사용하여 두 개 이상의 객체를 합칠 수 있습니다. Object.assign() 메서드는 객체의 열거 가능한 프로퍼티를 복사 후 새로운 객체에 붙여 넣습니다. Object.assign(target, source1, source2, ..., sourceN); 매개변수 target: 두 개 이상의 객체가 합쳐진 객체입니다. source1, source2, ..., sourceN: 합쳐지는 객체들입니다. 반환 결과 합쳐진 객체를 반환합니다. const A = { name: 'John', age: 20, job: 'develope.. JavaScript/Tip 2022. 12. 9.

• 

  [JavaScript]아스키코드 및 유니코드 변환 방법 아스키코드 및 유니코드 변환 방법 아스키코드와 유니코드는 다른 개념이지만 처음 128개(0~127)의 코드는 동일합니다. 이번 포스팅은 JavaScript에서 아스키코드 및 유니코드로 변환하는 방법을 소개합니다. charCodeAt() - 문자를 코드로 변환 문자를 아스키코드로 변환하려면 charCodeAt() 메서드를 사용합니다. charCodeAt() 메서드는 문자열에서 호출할 수 있으며 특정 위치의 UTF-16 코드를 나타내는 0부터 65535 사이의 정수를 반환합니다. str.charCodeAt(index); 매개변수 index: 문자열의 특정 위치(인덱스)이며 생략하는 경우 0을 기본값으로 사용합니다. 반환 결과 주어진 위치(인덱스)의 UTF-16 코드를 반환하며 0부터 65535 사이의 정수가.. JavaScript/Tip 2022. 12. 9.

• 

  [Google]개발자가 구글링하는 방법 개발자가 구글링하는 방법 인터넷에는 수많은 정보가 존재하지만 내가 원하는 정보를 찾는 것은 쉽지 않습니다. 개발자는 하루의 절반을 Google에서 원하는 정보(API 문서, 에러 해결, 프레임워크 등)를 찾기 위해 노력합니다. 다행스럽게도 Google은 검색 결과에 대한 정확한 결과를 제공하기 위해 다양한 기능을 제공합니다. 이번 포스팅은 개발자가 필수적으로 알아야 하는 구글링 방법을 소개합니다. 특정 키워드 및 문장 포함 특정 키워드 및 문장이 포함된 검색 결과를 얻고 싶다면 따옴표(")를 사용합니다. 따옴표를 사용하면 Google은 해당 키워드와 가장 적합한 정보를 제공합니다. 예를 들어, "how to split string in javascript"를 검색하면 키워드와 관련된 검색 결과를 제공합니.. 기타 2022. 12. 8.

• 

  [JavaScript]style 프로퍼티 설정 및 가져오기 style 프로퍼티 설정 및 가져오기 이번 포스팅은 JavaScript에서 HTML 요소에 적용된 style 애트리뷰트를 설정 및 가져오는 방법을 소개합니다. 특정 css 프로퍼티 가져오기 태그는 세 가지 css 프로퍼티인 font-size, color, background-color를 가지고 있습니다. style 애트리뷰트의 css 프로퍼티의 이름은 하이픈(-)이 포함되어 있습니다. 따라서, JavaScript에서 css 프로퍼티를 가져오려면 대괄호 표기법을 사용하거나 JavaScript에서 지원하는 프로퍼티를 사용합니다. const inputNode = document.getElementById("input-text"); // JavaScript에서 지원하는 프로퍼티 console.log(inputN.. JavaScript/DOM 2022. 12. 8.

• 

  [JavaScript]현재 페이지 새로고침하는 방법 현재 페이지 새로고침하는 방법 이번 포스팅은 JavaScript에서 현재 페이지를 새로고침할 수 있는 두 가지 방법을 소개합니다. location.reload() 첫 번째 방법으로 location 객체에서 제공하는 reload() 메서드를 사용하는 것입니다. location은 전역 객체인 window의 프로퍼티이므로 아래 두 가지 방법으로 reload() 메서드를 호출할 수 있습니다. location.reload(); window.location.reload(); 매개변수 존재하지 않습니다. 반환 결과 존재하지 않습니다. history.go() 두 번째 방법으로 history 객체에서 제공하는 go() 메서드를 사용하는 것입니다. history는 전역 객체인 window의 프로퍼티이므로 아래 두 가지 방.. JavaScript/Tip 2022. 12. 8.

• 

  [JavaScript]location 객체 사용 방법 location 객체 사용 방법 location 객체란 현재 활성화된 웹 페이지의 URL 정보를 포함하는 window 객체의 프로퍼티입니다. location 객체는 전역 객체이면서 window 객체의 프로퍼티이므로 window.location 또는 location으로 호출할 수 있습니다. location 객체의 프로퍼티 현재 접속한 웹 페이지의 URL이 아래와 같습니다. https://codesandbox.io/s/js-example-forked-8shrxm?file=/src/index.js 아래 스크린샷은 위 URL 정보를 가지는 location 객체의 프로퍼티입니다. ※ username, password 프로퍼티는 더 이상 사용되지 않는 프로퍼티이므로 설명하지 않습니다. href 전체 URL이 포함된.. JavaScript/Tip 2022. 12. 7.

• 

  [JavaScript]style 애트리뷰트(Attribute) 제거하는 방법 style 애트리뷰트(Attribute) 제거하는 방법 이번 포스팅은 JavaScript에서 style 애트리뷰트를 제거할 수 있는 몇 가지 방법을 소개합니다. removeProperty() - 특정 프로퍼티 제거 HTML 요소의 style 애트리뷰트(Attribute)는 세미콜론(;)을 사용하여 여러 값을 설정할 수 있습니다. 아래 HTML 마크업 문서의 태그는 세 가지 css 프로퍼티인 font-size, color, background-color를 가지고 있습니다. JavaScript에서 특정 css 프로퍼티만 제거하고 싶은 경우 style 프로퍼티의 removeProperty() 메서드를 사용합니다. const result = selectedNode.style.removeProperty(css);.. JavaScript/DOM 2022. 12. 7.

• 

  [JavaScript]HTML 애트리뷰트(Attribute)가 존재하는지 확인하는 방법 HTML 애트리뷰트(Attribute)가 존재하는지 확인하는 방법 이번 포스팅은 JavaScript에서 HTML 요소에 애트리뷰트가 존재하는지 확인하는 방법을 소개합니다. hasAttribute() - 특정 애트리뷰트가 존재하는지 선택한 요소에서 특정 애트리뷰트가 존재하는지 확인하려면 hasAttribute() 메서드를 사용합니다. const isAttribute = selectedNode.hasAttribute(name); 매개변수 name: 특정 애트리뷰트의 이름을 문자열로 전달합니다. 반환 결과 매개변수로 전달된 특정 애트리뷰트가 존재하면 true를 반환하고 그렇지 않으면 false를 반환합니다. 아래는 id가 "input-text"인 HTML 요소를 선택한 다음 hasAttribute() 메서드로.. JavaScript/DOM 2022. 12. 7.