그럼에도 불구하고

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

자바스크립트 내에서 유효성 검사를 할 때 흔히 타입 검사를 하고는 합니다. 타입 검사에 대해 알아보겠습니다. HTML 삽입 미리보기할 수 없는 소스 위의 결과 값, 모두 납득이 가시나요? [ PREMITIVE vs REFERENCE ] PREMITIVE value의 경우 typeof로 잘 구분할 수 있지만 REFERENCE value의 경우는 typeof로 구분하기가 어렵습니다. 자바스크립트는 동적으로 변하는 언어이기 때문에 타입도 동적입니다. 이로 인해 동적인 타입까지 검사하기가 어려워서 주의를 해야 합니다. 따라서 REFERENCE value를 검사할 때는 typeof 보다는 instanceof를 사용하는 것이 객체를 확인하는 데 있어 더 용이합니다. 하지만 instanceof도 완벽하게 검사를 해내..

importNode()에 대해 알아보자 [ importNode() ] 현재 문서가 아닌 외부 문서의 노드를 복사하여 현재 문서에 넣을 수 있도록 해준다. var node = document.importNode(externalNode, deep); ● node : 문서에 추가될 새로운 노드를 말한다. 새로운 노드가 문서 트리에 추가되기 전까지, 새로운 노드의 parentNode는 null이다. ● externalNode : 다른 문서에서 가져올 노드를 말한다. ● deep : 불리언 타입을 가지며, 다른 문서에서 노드를 가져올 때 노드의 자식 요소들을 포함하여 가져올 것인지에 대한 여부를 결정한다. 실제 사용한 예제를 보자 index.html HTML 삽입 미리보기할 수 없는 소스 app.css HTML ..

Drag & Drop 이용하여 이미지를 올려보자 HTML 이미지를 올려주세요 업로드한 이미지 CSS 더보기 body { display: block; overflow: scroll; width: 100%; height: 100vh; } .file-zone { background-color: rgba(0, 0, 0, 0.1); box-sizing: border-box; display: flex; justify-content: center; align-items: center; width: 100%; height: calc(100% - 400px); transition: 0.1s all ease-out; } .file-zone.on { background-color: rgba(97, 131, 209, 0.9)..

제곱 함수를 구하는 코드를 짜 보자 조건 1. prompt로 입력받는 두 개의 값 중 하나라도 1보다 작은 값을 받을 경우 다시 받는다. 2. 두 개의 값을 받을 때 함수를 사용한다. 3. 1 이상의 자연수를 받았다면 최종적으로 구하는 제곱 함수를 alert로 띄워준다. code 결과: HTML 삽입 미리보기할 수 없는 소스 개선점 1 checkNum() 함수는 오로지 파라미터 값이 1 이상인 자연수를 판단하는 기능을 하는 것만이 아닌, 새롭게 값을 받고 있다. ( 함수는 하나의 기능만 수행하게 바꾸기 위해 새로운 함수를 사용한다. ) code 결과 HTML 삽입 미리보기할 수 없는 소스 개선점 2 위의 코드는 함수 선언문으로 함수를 정의했다. 함수 선언문으로 정의된 함수는 자바스크립트 엔진이 스크립트가..

오늘은 Immutability와 mutable에 대해 알아보자 [ Immutability(변경 불가성)] Immutability(변경 불가성)는 객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴을 의미한다. Immutability은 함수형 프로그래밍의 핵심 원리이다. 객체는 참조(reference) 형태로 전달하고 전달받는다. 객체가 참조를 통해 공유되어 있다면 그 상태가 언제든지 변경될 수 있기 때문에 문제가 될 가능성도 커지게 된다. 이는 객체의 참조를 가지고 있는 어떤 장소에서 객체를 변경하면 참조를 공유하는 모든 장소에서 그 영향을 받기 때문인데 이것이 의도한 동작이 아니라면 참조를 가지고 있는 다른 장소에 변경 사실을 통지하고 대처하는 추가 대응이 필요하다. 의도하지 않은 객체의 변경이..

오늘은 Pass by Reference와 Pass by Value에 대해 알아보자 [ Pass by Reference ] object type을 객체 타입 또는 참조 타입이라고 한다. 참조 타입이란 객체의 모든 연산이 실제 값이 아닌 참조 값으로 처리됨을 의미한다. 원시 타입은 값이 한번 정해지면 변경할 수 없지만(immutable), 객체는 프로퍼티를 변경, 추가, 삭제가 가능하므로 변경 가능(mutable)한 값이라 할 수 있다. 따라서 객체 타입은 동적으로 변화할 수 있으므로 어느 정도 메모리 공간을 확보해야 하는지 예측할 수 없기 때문에 런타임에 메모리 공간을 확보하고 메모리의 힙 영역(Heap Segment)에 저장된다. 이에 반해 원시 타입은 값(value)으로 전달된다. 즉, 복사되어 전달되..

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이라는 식의 의미를 해석하면 + 기호의 의미대로 덧셈을 ..

JSON에 대해 알아보자 [ JSON 이란? ] JSON은 JavaScript Object Notation의 약자로 name - value 한쌍으로 이루어진 네트워크를 통해 데이터를 주고받는 데 자주 사용되는 경량의 데이터 형식이다. JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 특히 용량이 적어서, 최근에는JSON이 XML을 대체해서 데이터 전송 등에 많이 사용된다. JSON은 XML의 대안으로서 좀 더 쉽게 데이터를 교환하고 저장하기 위해 고안되었다. 또한, JSON은 텍스트 기반이므로 어떠한 프로그래밍 언어에서도 JSON 데이터를 읽고 사용할 수 있다. ※ XML이란? XML은 EXtensible Markup Language의 약자이다. 이런 XML은 HTML과 매우 비슷한 문자 기반의 마크업..