JavaScript/Tip26

• 

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

• 

  [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.

• 

  [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]대화 상자 - alert, prompt, confirm JavaScript의 대화 상자 이번 포스팅은 JavaScript에서 제공하는 세 가지 대화 상자인 alert(), prompt(), confirm() 메서드 사용 방법을 설명합니다. alert() alert() 메서드는 웹 브라우저에서 경고 창을 사용자에게 표시하며, "확인" 버튼 또는 "ESC" 키를 누를 때까지 스크립트 실행이 일시 중지됩니다. alert() 메서드는 전역 함수이므로 window 객체를 통해 호출하거나 직접 호출할 수 있습니다. // window 객체를 통해 호출하는 경우 window.alert('경고 창입니다.'); // 직접 호출하는 경우 alert('경고 창입니다.'); 아래는 간단한 HTML 마크업 문서이며 "alert()" 버튼을 클릭하면 경고 창이 표시됩니다. alert(.. JavaScript/Tip 2022. 12. 6.

• 

  [JavaScript]Target과 CurrentTarget 차이점 Target과 CurrentTarget 차이점 Target과 CurrentTarget은 DOM Event Interface의 프로퍼티라는 공통점을 가지고 있지만, 이 두 개의 프로퍼티는 결코 동일한 프로퍼티가 아닙니다. 이번 포스팅은 DOM Event Interface의 프로퍼티인 Target과 CurrentTarget 차이점을 소개합니다. 이벤트 이 둘의 차이점을 설명하기 전에 JavaScript에서 이벤트가 무엇이며 어떻게 동작하는지 이해해야 합니다. 웹 사이트를 사용하는 사용자가 HTML 요소에 대한 사건을 일으키는 행위를 이벤트(Event)라고 말합니다. HTML 요소에 대한 사건은 다음과 같은 행위입니다. - 로그인 버튼을 클릭 - 로그인하기 위해 아이디를 입력 - 검색창에 검색 키워드를 입력 .. JavaScript/Tip 2022. 11. 8.

• 

  [JavaScript]div 태그에서 텍스트 입력하는 방법 div 태그에서 텍스트 입력하는 방법 이번 포스팅은 input, textarea 태그를 사용하지 않고 div 태그에서 텍스트를 입력할 수 있는 방법을 소개합니다. contenteditable 속성 div 태그에 텍스트를 입력할 수 있는 방법은 contenteditable 속성을 true로 설정하는 것입니다. div 태그의 contenteditable 속성을 true로 설정하고 텍스트를 입력하면 다음 스크린샷처럼 파란색 테두리가 활성화되고 텍스트를 입력할 수 있습니다. 파란색 테두리를 비활성화하려면 div 태그의 스타일에 outline을 none으로 설정합니다. 텍스트 가져오는 방법 div 태그에는 onChange 이벤트가 존재하지 않으므로 div 태그에 입력한 텍스트를 가져오려면 jQuery를 사용하거나.. JavaScript/Tip 2022. 11. 8.

• 

  [JavaScript]콘솔 로그 스타일 적용하는 방법 콘솔 로그 스타일 적용하는 방법 콘솔(console)은 애플리케이션 개발 프로세스에서 매우 유용합니다. 주로 변수에 할당된 값을 확인하거나 연산 결과를 확인하기 위한 용도로 사용합니다. JavaScript에서는 console.log() 메서드를 사용하여 콘솔에 특정 데이터를 출력할 수 있으며, 출력 결과에 스타일을 적용할 수 있습니다. 예를 들어, 티스토리 접속 후 크롬 개발자 도구의 콘솔 탭을 들어가면, 스타일이 적용된 문자열을 볼 수 있습니다. console.log() 메서드 출력 결과에 스타일을 적용한다고 개발 프로세스에 큰 영향은 없지만, 특정 웹 사이트에 대해 특별함을 각인시킬 수 있습니다. 물론, 개발자 한정이겠지만요... 이번 포스팅은 console.log() 메서드 출력 결과에 스타일을 적.. JavaScript/Tip 2022. 10. 13.

• 

  [JavaScript]URLSearchParams 객체 사용 방법 URLSearchParams 객체 사용 방법 Query String이란 URL에서 물음표(?)부터 시작하는 문자열입니다. 주로 검색 기능이 있는 웹 사이트에서 검색 키워드를 Query String으로 설정합니다. 제가 개발 자료를 참고하는 stackabuse 사이트에서 url이란 키워드를 검색하면, URL은 다음과 같습니다. https://stackabuse.com/search/?q=url 위에서 언급했듯이 Query String은 물음표(?)부터 시작하므로 해당 URL의 Query String은 q=url입니다. JavaScript 개발자는 위 예시와 같은 URL에서 Query String 추출 후 원하는 정보를 가져와야 하는 상황이 발생할 수 있는데, JavaScript는 친절하게도 복잡한 Query.. JavaScript/Tip 2022. 10. 10.

• 

  [JavaScript]URL 객체 생성 및 파싱하는 방법 URL 객체 생성 및 파싱하는 방법 이번 포스팅은 JavaScript에서 URL 객체 생성 및 파싱하는 방법을 소개합니다. URL 객체 생성자 JavaScript에서 URL 객체는 new 키워드와 URL() 생성자 함수를 사용하여 생성할 수 있습니다. const url = new URL(url [, base]); url - 절대 또는 상대 URL입니다. - 생략할 수 없습니다. base - 첫 번째 매개변수가 상대 URL인 경우 두 번째 매개변수는 절대 URL입니다. - 첫 번째 매개변수가 절대 URL인 경우 생략할 수 있습니다. - 첫 번째 매개변수가 상대 URL인데, 두 번째 매개변수를 생략하면 TypeError가 발생합니다. 다음 예제는 동일한 URL을 절대 URL과 상대 URL 방식으로 URL 객.. JavaScript/Tip 2022. 10. 9.

• 

  [JavaScript]금액 포맷 방법 금액 포맷 방법 JavaScript에서 숫자를 금액으로 포맷해야 하는 상황은 자주 발생합니다. 숫자를 금액을 포맷하는 방법으로 개발자가 직접 하드 코딩하거나 정규 표현식(Regex), toLocaleString() 메서드를 사용할 수 있지만, Intl.NumberFormat() 메서드를 사용하여 더 쉽게 포맷할 수 있습니다. 이번 포스팅은 Intl.NumberFormat() 메서드를 사용하여 JavaScript에서 금액을 포맷하는 방법을 소개합니다. Intl.NumberFormat() 메서드 Intl.NumberFormat() 메서드는 기본적으로 PC에 설정된 기본 locale 형식으로 숫자를 포맷합니다. 예를 들어, PC에 설정된 locale이 한국인 경우 세 자리마다 콤마를 찍습니다. var num .. JavaScript/Tip 2022. 10. 9.