Coding

모듈 여기서는 모듈의 개념적인(혹은 단편적인) 부분만 다루고 동적인 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 은컴퓨터와 컴퓨터 혹은 컴퓨터와 다른 장비 사이에서 데이터 통신을 원활하게 하기 위해 필요한 통신 규약입니..

`IntersectionObserverCallback` 함수를 등록하다가 `CusTomEvent`생성자를 사용할 일이 있었습니다. 이벤트 객체와, 커스텀 이벤트 객체에 대해서는 이전에 정확히 몰랐던 내용이라 관련 내용을 정리해두었습니다. 여러 브라우저 이벤트 종류(자주 쓰는 것들) 이벤트(event)는 무엇인가 일어났다는 신호입니다. 모든 DOM 노드는 이런 신호를 만들어 냅니다. 참고로, 이벤트는 DOM에만 한정되지 않습니다. 아래에서는 주로 사용되는 DOM 이벤트를 적어두었습니다. 1. 마우스 이벤트 click 요소 위에서 마우스 왼쪽 버튼을 눌렀을 때(터치스크린이 있는 장치에서 탭 했을 때) 발생. contextmenu 요소 위에서 마우스 오른쪽 버튼을 눌렀을 때 발생 mouseover / mous..

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

1. 캡처링과 버블링 [실험하면서 보게 될 현상] 이벤트의 흐름을 간략하게 표시해주셨다. 일단 그런가보다 하고 넘어가자. 1-1. 캡처링 [ 실험할 html 코드 ] event propagation ⚪ 제일 안쪽 input 태그를 하나 눌렀을 뿐인데 그 input태그를 감싸고 있는 태그들의 이벤트 리스너들까지 전부 나오는 모습을 볼 수 있다. 이 때 순서를 잘 보자. 바깥쪽에서 안쪽으로, 즉, 부모로부터 자식방향으로 호출되는 방식을 ✔캡쳐링이라고 부른다. INPUT HTML capturing INPUT BODY capturing INPUT FIELDSET capturing INPUT INPUT target 1-2. 버블링 ⚪ 반대로 각 요소의 ✔ addEventListener 의 인자를 false로 바꾼..

💡 알고리즘 문제를 풀다가 분명히 완벽한 로직인데 왜 안되지 하면서 하나하나 콘솔을 찍어봤더니 뭐가 잘못 되었는지 알 수 있었다. 중첩배열에 대한 얕은 복사를 해서 원본의 요소까지 계속해서 바뀌고 있었던 것이다.(이걸 몰라서 코딩 시험 때 제출을 못 했다 ㅠ) 얕은 복사에만 익숙해져 있던 나였음을 깨달았다. 깊은 복사를 하는 방법을 숙지하고자 이 글을 쓰게 되었다. 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) // >>>..

💡 항해99 문제 현황판에서 구현하지 못해서 보고 풀은 유일한 문제....다. 다른 사람의 풀이를 보면서 가장 좋아보이는 풀이를 가져왔다. 처음 풀 때 특별한 규칙이 있나 뚫어져라 쳐다보는데 시간을 썼다. 특별한 규칙으로 푸는 게 아니었다. 뭔가 익숙해져야 바로 보일 듯한 문제인 것 같다. 풀이 방법은 간단하다. 마치 x,y 좌표 이동 하듯이 배열로 키패드 배열을 구성하였다. 배열 간 이동 시 인덱스가 달라지므로 그만큼 차이가 나고, 마찬 가지로 배열 내의 요소끼리의 인덱스도 다 다르므로 이동 시 또 그만큼 차이가 난다. 즉, [배열 간 인덱스 차이, 배열 내부 요소간 인덱스 차이] 가 문제를 해결할 수 있는 키이다. (이것을 보고 처음에 마치 x,y 좌표 같다고 생각이 들었다.) function sol..