Topic

자바스크립트

A collection of 197 posts
자바스크립트

[Javascript] innerHTML, innerText, textContent 의 차이

자바스크립트로 HTML 문서 안의 내용을 가져오거나 적용할 수 있는 속성은 3가지가 있습니다. 어떤 것은 자주 사용하기 때문에 비교적 잘 알지만, 어떤 것은 또 전혀 잘못 알고 있는 것들도 있습니다. 원하는 데이터를 가져오려면 가져오는 데이터에 어떤 차이가 있는지 분명히 구분할 수 있어야 합니다. 조금 극단적인 다음 HTML 내용을 기준으로 각각의 속성이
4 min read
자바스크립트

[Javascript] 소수점 반올림, 그리고 부동소수점 보정 - Math.round(1.005 * 100)/100 == 1.01 은 true 인가?

부동소수점의 이해 자바스크립트에서 다음 계산 결과는 얼마일까요? 0.2 - 0.3 + 0.1 유사한 결과를 표시하는 계산식이 많이 있지만 의도하는 결과는 동일합니다. 답부터 말하면 다음과 같습니다. 2.7755575615628914e-17 지수로 표현되어 있어서 숫자가 커보이지만 아주 아주 작은 숫자, 정확하게는 아주 작은(0에 가까운) 부동소수점 숫자입니다. 우리의 상식으로는 0이어야 하지만 0이
9 min read
자바스크립트

[Javascript] HTML 내용의 글자 수 카운팅과 글자 수 자르기

폼 입력 필드인
5 min read
자바스크립트

[Javascript] ES6 프록시(Proxy)와 핸들러(Handler) 기초 - 프록시, 핸들러, 리플렉트, 리시버의 개념 알기

프록시(Proxy) 프록시는 특정 객체를 감싸서 객체에 적용되는 동작을 가로채 특정 작업을 수행하거나, 동작을 다시 객체에게 전달하는 역할을 하는 객체입니다. 쉽게 중간 다리 역할을 하는 중계상? 같은 객체입니다. 프록시 객체는 3가지 중요한 필수 요소가 있습니다. 타겟: 프록시는 먼저 감쌀 객체가 필요합니다. 이 대상 객체를 타겟이라고 합니다. 핸들러: 프록시가 타겟 객체에
14 min read
자바스크립트

[Javascript] 함수에도 길이가 있다 - 123['toString'].length + 123의 결과값은?

인터넷에 많이 알려진 코딩 문제 중의 하나입니다. 객체의 속성과 메서드에 접근하는 방법에 대한 이해를 어느 정도까지 하고 있는 것을 파악하기 위한 개미지옥 문제입니다. 실무에서 이런 코딩을 하지는 않습니다. 그리고 할일도 없습니다. 테스트를 위한 문제이고 보통 다음과 같은 패턴으로 질문을 합니다. 어차피 왜 이 값이 출력되는지 이해하지 못하면 의미가 없으므로 출력
8 min read
자바스크립트

최신 자바스크립트 문자열 바꾸기 메서드인 replaceAll() 사용하기

최근까지도 자바스크립트에는 다른 언어에서 지원되는 전역 문자열 바꾸기 기능이 없었습니다. 작년 그러니까 2021년이 되서야 ES2021(ES12) 표준 명세에 전역 문자열 바꾸기 메서드인 replaceAll() 이 추가되었습니다. 업데이트가 주기적으로 되는 대부분의 최신 웹 브라우저들은 이미 replaceAll() 메서드를 지원합니다. 개발자도구 콘솔에서 문자열에 replaceAll() 메서드를 적용해보면 지원하는지를 바로 확인할 수 있습니다. replaceAll() 메서드가 지원되지
9 min read
자바스크립트

[Javascript] 쿼리선택자의 종류와 차이점 - getElementById, getElementsByClassName, getElementsByTagName, querySelector, querySelectorAll

DOM에서 HTML 요소를 선택하는 방법은 5가지가 있습니다. getElement로 시작하는 getElementById(), getElementsByClassName(), getElementsByTagName() 3개의 메서드는 HTML 요소(Element), 또는 요소들을 반환합니다. getElementByClassName()과 getElementsByTagName()의 Elements에 주의해야 합니다. 요소를 선택하지만 "s"가 붙어 있습니다. 그러니까 선택 가능한 모든 요소들을 선택하는 것이고, 복수 개의 요소가 반환됩니다. 그래서 선택되어 반환되는 데이터 타입은 HTML
12 min read
자바스크립트

초보 개발자에게 필수인 초강력 자바스크립트 한줄 함수 TOP 10

1, 홀수/짝수 확인하기 2로 나눈 나머지 값이 0인지 아닌지를 판별해서 불리언을 리턴합니다. const isEven = num => num % 2 === 0; console.log(isEven(124)); //true console.log(isEven(57)); //false 2. 숫자인지 확인하기 인자 값을 실수로 변환한 결과가 숫자이고 유한 수이면 true를 반환합니다. const isNumber = num => !isNaN(parseFloat(num)) && isFinite(num)
3 min read
자바스크립트

속보형 무한 롤링 텍스트 배너 만들기

2023-02-24 업데이트 : 마우스 호버를 하면 롤링 배너가 멈췄다가, 마우스가 벗어나면 다시 롤링이 시작되는 이벤트 처리 추가(하단 소스파일 다운로드) ----------------------------------------------------------------- 작은 영역 안에 여러 개의 단문 텍스트를 무한 롤링해서 표현하는 배너를 이용하면 작은 웹페이지의 자투리 영역을 활용하거나 주목도가 높은 배너를 제작할 수 있습니다. 기본적으로 가로로 긴 문자열을 위, 또는 아래로
9 min read