그럼에도 불구하고

IntersectionObserver API에 대해 알아보겠습니다. 🧑🏻‍💻 IntersectionObserver API IntersectionObserver는 웹 API 중 하나로, 요소의 가시성 여부를 비동기적으로 감지하는 기능을 제공합니다. 이를 통해 무한 스크롤, 화면 리사이징, 이미지 로딩 지연, 트래킹 및 애니메이션 효과 등에서 유용하게 활용됩니다 Intersection Observer의 주요 개념과 사용법을 설명해 드리겠습니다. 📌 사용법 1. InterSection Observer 생성 const observer = new IntersectionObserver(callback, options); Intersection Observer를 생성하려면 콜백 함수(callback)와 옵션(opti..

오늘은 정규 표현식으로 특정 문자를 검색해 보자 [ 정규 표현 패턴의 표기 ] 문자열의 패턴은 내용의 앞뒤에 /를 삽입한다. /패턴/ 대표적인 패턴 패턴 의미 x 문자 x xyz 문자열 xyz [xyz] x, y, z 중 하나의 문자 [a-z] a ~ z 중 하나의 문자. [a-f]. [A-Za-z] 방식도 가능 [^xyz] x, y, z 외 하나의 문자 [^a-z] a ~ z 외 하나의 문자 abc|xyz 문자열 abc 혹은 xyz {숫자} 반복 횟수 ^x 시작 문자 x x$ 종료 문자 x . 하나의 문자(줄바꿈 코드 제외) x* 0개 이상 계속되는 x* \ 다음에 오는 문자를 이스케이프(escape) 처리 \d 숫자 [0-9] \D 숫자가 아닌 문자 [^0~9] \w 영문, 숫자, 언더바 [A-Za-..

day/ night mode를 만들어보자 [ 조건 ] 1. day / night mode를 만들 수 있는 버튼은 1개만 사용하자 2. 버튼을 누르면 body의 backgroundColor과 fontColor를 해당 모드에 맞게 바꾸자 3. 해당 모드에 맞는 버튼의 value를 변경하자 HTML 삽입 미리보기할 수 없는 소스 code day mode / night mode 핵심 [ element.setAttribute() ] Syntax : element.setAttribute(name, value) Parameters Parameter 설명 name 필수요건 속성의 이름 value 필수요건 새로운 속성의 값 ※ 주의사항 요소에 값이 있는 style 속성을 추가할 수 있지만 style 속성의 다른 속성을 ..

오늘은 데이터 타입에 대해 알아보자 데이터 타입은 값의 종류를 말한다. 자바스크립트의 모든 값은 데이터 타입을 갖는다. 자바스크립트(ES6)는 7개의 데이터 타입을 제공한다. 7개의 데이터 타입은 원시 타입(primitive type)과 객체 타입(object/reference type)으로 분류할 수 있다. 구분 데이터 타입 설명 원시타입 숫자(number) 타입 숫자. 정수와 실수 구분 없이 하나의 숫자 타입만 존재 문자열(string) 타입 문자열 불리언(boolean) 타입 논리적 참(true)과 거짓(false) undefined 타입 var 키워드로 선언된 변수에 암묵적으로 할당되는 값 null 타입 값이 없다는 것을 의도적으로 명시할 때 사용하는 값 심벌(symbol) 타입 ES6에 추가된 ..

오늘은 표현식과 문에 대해 알아보자 어떻게 보면 당연할 수도 있다고 생각해 간과할 수 있는 내용이지만, 굉장히 중요하다고 생각한다. [ 값 ] 값(value)은 식(표현식 expression)이 평가(evaluation)되어 생성된 결과를 말한다. 평가란, 식을 해석해서 값을 생성하거나 참조하는 것을 의미한다. 다음 예제를 살펴보자. 10 + 20; // 30 // 10 + 20은 평가되어 숫자 값 30을 생성한다. 모든 값은 데이터 타입을 가지며, 메모리에 2진수, 즉 비트의 나열로 저장된다. 메모리에 저장된 값은 데이터 타입에 따라 달리 해석될 수 있다. 예를 들어, 메모리에 저장된 값 0100 0001을 숫자로 해석하면 65지만, 문자로 해석하면 'A'이다. 변수는 하나의 값을 저장하기 위해 확보한..

오늘은 JavaScript의 변수에 대해 알아보자. [ 변수란 무엇인가? ] 애플리케이션은 데이터를 다룬다. 아무리 복잡한 애플리케이션이라 해도 데이터를 입력(input) 받아 처리하고, 그 결과를 출력(output)하는 것이 전부다. 변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다. 변수란 무엇인지 그리고 왜 필요한지 살펴보자. 10 + 20 컴퓨터는 사람을 모델로 디자인되었기 때문에 사람과 유사하게 동작한다. 먼저 사람은 위 식을 어떻게 계산하는지 생각해보자. [ 사람 ] 사람이 위 식을 계산하려면 10, 20, +라는 기호의 의미를 알고 있어야 하며, 10 + 20이라는 식의 의미도 해석할 수 있어야 한다. 사람이 10 + 20이라는 식의 의미를 해석하면 + 기호의 의미대로 덧셈을 ..