Coding/javascript

모듈 여기서는 모듈의 개념적인(혹은 단편적인) 부분만 다루고 동적인 import가 주 내용입니다. 모듈에 대한 🔗자세한 내용은 여기를 참고해주세요. '모듈'이란? Module을 쉽게 설명하자면 하나의 재사용 가능한 부품을 의미한다고 보시면 됩니다. Module을 한 줄로 정의하자면, 파일 하나하나 특정 기능을 갖는 작은 코드 단위를 의미합니다.(분리된 파일 각각을 모듈이라고 부릅니다.) 즉, 프로그램을 구성하는 내부의 코드가 기능별로 나뉘어져있는 형태를 의미합니다. 호스트 환경(=자바스크립트가 구동되는 환경: 브라우저, nodejs 등)에 따라서 서로 다른 모듈화 방법이 제공되고 있습니다. 또한 한 번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 로직을 로드할 때 시간과 네트워크 트래픽을..

TL;DR getElementsByClassName과 querySelectorAll을 사용하면 DOM element를 선택하여 불러올 수 있다. 1. getElements* 로 시작하는 모든 메서드는 HTMLCollection을 반환하고, 2. querySelectorAll은 NodeList를 반환한다. 3. 일반적으로, getElementsByClassName이 더 빠르다고 한다.(단, anyNode가 아닌 document 객체를 대상으로 해야 함. 문서 노드가 아닌 다른 노드엔 호출할 수 없음.) 4. querySelector를 이용하는 게 더 편리하고 문법도 짧아서, getElementsBy* 메서드들을 잘 쓰지는 않는다고 합니다. 1. 기본적인 차이점 기본적인 차이점 사용법은 구체적으로 설명하지는..

1. var와 let 선언자의 스코프varvar 변수 선언자는 함수 스코프입니다.함수 내부에 선언하면 밖에서 참조할 수 없다/** * var를 함수 내부에 선언하면, 외부에서 참조가 불가능하다. */function varTest() { var globalVar = "전역"; console.log(globalVar); // 전역}varTest();console.log(globalVar); // ReferenceError: globalVar is not defined var를 함수가 아닌 if와 for 안에서 사용한다면, 스코프 밖에서 사용이 가능하다./** * var를 함수가 아닌 if와 for 안에서 사용한다면, 스코프 밖에서 사용이 가능하다. */if(true){ var varVar = 1;}co..

Map과 Set을 자주 쓰면서 spread syntax와 Array.from 을 쓰다가 iterator가 반복이 끝난, 일명 iterator consumption이라는 현상을 겪게 되었는데, 그 원인을 잘 파악하지 못했다고 생각하여 iterable과 iterator에 대해서 공부 후 기록해둡니다. 이 글에서는 iterator consumption이 왜 발생했는지 풀어나가는 과정에서 알아야 할 것들을 간단히 정리했으며 이터러블(iterable)에 대한 자세한 개념과 원리는 🔗이 글을 참고하면 됩니다. 1. Iteration protocol 먼저 protocol 에 대해서 정리해봅시다. protocol 은컴퓨터와 컴퓨터 혹은 컴퓨터와 다른 장비 사이에서 데이터 통신을 원활하게 하기 위해 필요한 통신 규약입니..

1. 웹 통신이란? 웹 통신은 서버(웹 서버)와 클라이언트(웹 브라우저)간의 대화이다. 2. 웹 통신은 약속(=프로토콜)이다. 약속을 프로토콜(protocol)이라고 한다. 웹에서 서버와 클라이언트간 주고받은 상호간의 약속(프로토콜)을 HTTP 프로토콜이라고 한다. 프론트엔드 개발을 하는 사람이면 반드시 이 약속을 알아야만 더 깊은 수준의 개발을 할 수 있다. 2-1. 요청(Request)과 응답(Response) 서버와 클라이언트가 서로 데이터를 주고 받기(대화하기)위해서는 항상 '요청(request)'을 해야 하고, 그에 따른 '응답(response)'을 준다. 보통 클라이언트가 대화를 시도하고, 서버는 요청을 받아 그에 따른 응답을 주는 쪽을 의미한다. 2-2. URL에 대해서 protocol do..

💡 알고리즘 문제를 풀다가 분명히 완벽한 로직인데 왜 안되지 하면서 하나하나 콘솔을 찍어봤더니 뭐가 잘못 되었는지 알 수 있었다. 중첩배열에 대한 얕은 복사를 해서 원본의 요소까지 계속해서 바뀌고 있었던 것이다.(이걸 몰라서 코딩 시험 때 제출을 못 했다 ㅠ) 얕은 복사에만 익숙해져 있던 나였음을 깨달았다. 깊은 복사를 하는 방법을 숙지하고자 이 글을 쓰게 되었다. 1. 얕은복사 ⚪ 첫 번째 케이스에서는 연결이 끊어진 복사 상태가 된다. 하지만 이도 얕은 복사의 일종이다. let ar1 = ['1','2','3','4','5','6'] let ar2 = [...ar1] ar2[0] = 7 console.log(ar1) console.log(ar2) [ '1', '2', '3', '4', '5', '6' ..

💡 GPT 센세한테 오늘 배운 것 regular for문은 인덱스를 통해서 원본을 수정할 수 있다는 점은 알고 있었고, for of는 요소 하나하나를 loop 변수로 지정하기 때문에 이를 바꾸면 원본에도 영향이 갈 것이라고 착각하고 있었다. 하지만 틀린 생각이었다. ✔ for ... of ... 내부에서 선언한 loop 변수를 바꿨다고 원본요소를 바꿀 수는 없다.(원본요소에는 아무 영향이 없다.) // n * n 배열 생성 let n = 5 let a = new Array(n) // console.log(a) // [ ] for(let b of a){ b = new Array(n) // 이건 loop 변수인 b에 할당하는 것이지. a 배열을 업데이트 하지 않음. } console.log(a) // >>>..

💡 제가 기존에 잘 알지 못 했던 ES5와 달라진 ES6문법 몇 가지를 정리해두었습니다. ES6 신문법 전체를 다루는 것이 아닙니다. let , const 이런 내용은 글에서 다루지 않습니다. 0. ES가 대체 뭔가? 💡 ES란 ECMA Script의 약자입니다. 자바스크립트는 1990년대 Netscape 회사의 Brendan Eich 라는 사람에 의해 최초 개발되었습니다. 자바스크립트가 잘 되자, MS에서 Jscript라는 언어를 개발해 IE에 탑재하였는데, 이 두 스크립트가 너무 제각각이라, 표준이 필요하게 되었습니다. 이 표준을 위해 자바스크립트를 ECMA(European Computer Manufactures Association)라는 정보와 통신시스템의 비영리 표준 기구에 제출하였고 표준에 대한..

💡 앞에서 배운 javascript 문법보다 쉬운 편에 속한다. 왜냐하면 이미 렉시컬 환경과 스코프(식별자에 대한 유효범위)에 대해서 알고 있다면 이해가 쉽기 때문이다. 렉시컬 스코프와 클로저를 연달아서 이해하는 것이 좋다. 1. 렉시컬 스코프와 클로저 (1) 렉시컬 스코프 ✔ 렉시컬 스코프의 개념 JS엔진은 함수를 어디서 ‘호출했는지’가 아니라 함수를 어디에 ‘정의했는지’에 따라 상위 스코프를 결정한다. 다시 말하면, “외부 렉시컬 환경에 대한 참조”에 저장할 참조값, 즉, 스코프는 함수를 호출할 때가 아니라 함수를 어디서 선언했는지에 따라 결정된다. 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 결정된다는 뜻이다. 이것이 바로 '렉시컬 스코프'다. 스코프에 대한 ..

💡 알고 있던 개념이긴 하지만 알고리즘 문제를 풀다가 parseInt()가 문자타입 지수형태를 거른다는 것을 처음 알게 되어서 다시 정리해야겠다는 생각이 들어서 적어둔다. Number와 parseInt 중에서 아무거나 썼는데 잘 골라서 써야겠다. 1. Number() 얘는 그냥 문자(지수 e 제외)가 보이면 NaN 출력한다. ✔ 지수 형태도 잘 계산해서 출력해준다. ✔ Number는 사실 크게 주의할 점은 없고, Number를 사용한 대상은 아무리 변환이 되지 않은 NaN이 출력되는 문자더라도 일단 typeof를 사용하면 number 타입으로 나온다는 것이다. ✔ isNaN을 써서 거르도록 하자. let string = "hi there" let num = "12345" let numStart = "12..