MDN
-
[SVG] viewBox개발/Web 2022. 8. 2. 13:07
다음 예제에서 svg를 그릴 영역을 컨테이너라고 하겠습니다. 크기 width 300px, height: 300의 노란색 영역이 컨테이너가 될 겁니다. const App = () => ( ); export default App; viewBox 0 0 200 200에서 앞에 두 요소는 min-x, min-y로 시작점을 의미합니다. 뒤의 두 요소는 width, height입니다. 설명 원의 1/4만 2 사분면에 나와 있습니다. 원의 중심인 cx, cy 속성을 따로 지정해주지 않았으므로 0입니다. 원의 중심이 컨테이너의 (0, 0)에 위치합니다. 크기는 어째서 절반이 나왔을까요. 컨테이너의 크기는 분명 300px * 300px이고 원의 반지름을 100으로 했는데, 출력된 원의 반지름은 150px입니다. view..
-
[Clouser] 아주 아주 간단한 클로저 기본개발/Javascript 2022. 7. 8. 16:04
언제부턴가 개념을 직접 설명하기 보다는 잘 정리된 공식 문서나 교재를 보는 게 낫다는 생각이 드네요. * https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures * 인사이드 자바스크립트 실행 컨텍스트니 하는 개념들은 위의 내용들을 참조하는 게 나을 것 같습니다. 여기에서 간단하게 말하고 싶은 건 따로 있습니다. 고차함수가 클로저를 반환할 때마다 실행 컨텍스트가 다르다는 것입니다. 그러므로 아래의 코드를 이해할 수 있습니다. const getCounter = () => { const count = () => { result.total += 1; }; let result = { count, total: 0, }; return result; }; cons..
-
[JavaScript]중복 제거(feat. Set의 한계)개발/Javascript 2022. 6. 21. 17:20
다음 배열 안에 있는 두 객체는 사실상 같다고 볼 수 있습니다. const array = [ { name: "kim", age: 33, }, { age: 33, name: "kim", }, ]; 프로퍼티의 순서만 다를 뿐이지 프로퍼티의 이름과 데이터가 같기 때문입니다. Set을 이용한 중복 제거가 되지 않습니다. const array = [ { name: "kim", age: 33, }, { age: 33, name: "kim", }, ]; console.log(new Set(array)); // Set(2) { { name: 'kim', age: 33 }, { age: 33, name: 'kim' } } 배열의 findIndex 함수는 판별함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다..
-
[JavaScript] "Illegal invocation" errors개발/Javascript 2022. 5. 31. 03:14
"Illegal invocation" 오류는 함수 호출과 관련해서 발생합니다. JavaScript에서 this는 상황에 따라 달라지는데, 호출되는 함수가 동작 과정에서 this를 참조하고 있을 때 this가 참조하는 객체가 달라지면 문제가 됩니다. 다음 예제를 살펴봅시다. const $ = document.querySelector; $("#root"); // TypeError 언뜻 보면 문제가 없을 것 같지만, 살펴봅시다. document 객체의 메소드의 this는 document 객체를 가리킵니다. document 객체의 메소드에서 다른 메소드나 객체에 접근할 때 this가 필요합니다. 만약 this가 가리키는 객체가 document가 아니게 된다면 동작을 제대로 수행할 수 없기 때문에 오류를 발생시키..
-
firstChild vs firstElementChild개발/Javascript 2022. 1. 30. 02:42
위와 같은 DOM 구조가 있다고 할 때 ul은 div의 firstChild일까요 firstElementChild일까요? 이름에서 대략적으로 유추할 수 있듯이 firstElementChild입니다. 각 태그가 Element이거든요. firstChild의 경우 Element를 포함한 모든 Node를 가리킵니다. 와 사이에는 공백(whitespace)가 존재하며 공백은 #text 노드를 만들기 때문에 firstChild를 출력해보면 #text가 나타납니다.