백고등어 개발 블로그

⚠️ import 를 브라우저에서 테스트해보다가 아래와 같은 문제를 만났다. ⚠️ 첫 번째 문제 아래와 같이 JS코드와 html을 구성했을 때, 발생한 에러입니다. index.html test1.js const a = 10; export default a; test2.js import foo from "./test1.js"; console.log(foo); 🤯 에러 발생 자… 직역하면 모듈 외부에서 import 문을 사용할 수 없다는 말입니다 뭔소리야… 간단하게 말하면 script 타입의 속성을 module로 명시하지 않아서 생긴 문제입니다 💡 첫 번째 문제 해결방법 아래와 같이 script 태그에 type=”module” 속성을 추가해줍니다. index.html 근데 바로 두 번째 문제가 발생합니다. ..

아래 글은 주홍철 저자의 "실시간 모니터링 시스템을 만들며 정복하는 MEVN" 책 내용의 일부분을 인용하여 작성하였습니다. 이터러블(Iterable) 이터러블은 일반적으로 어떤 요소들을 순회하며 쉽게 탐색할 수 있는 자료구조를 말합니다. 자바스크립트에서는 이터러블 프로토콜이라는 규칙을 준수한 객체를 말합니다.(즉, 해당 규칙을 준수하지않은 객체는 이터러블하다고 할 수 없습니다.) 그 규칙이란 어떤 객체가 Symbol.iterator 메서드를 가짐을 뜻합니다. 그 메서드는 next()라는 메서드를 가지고 있는 객체를 반환하고 해당 객체는 value와 done 프로퍼티를 가지고 있습니다. 대표적으로 배열은 Symbol.iterator 메서드를 가지고 있습니다. *다른말로 배열은 빌트인 이터러블(built-i..

객체 지향 프로그래밍(OOP) : 프로그램을 어떻게 설계해야 하는지에 대한 일종의 개념이자 방법론. 절차적 프로그래밍 (Procedural) 초기 프로그래밍 방식은 절차적 프로그래밍 방식이었습니다. 입력을 받아 명시된 순서대로 처리한 다음, 그 결과를 내는 것뿐이라는 생각이 지배적이었습니다. 즉, 프로그램 자체가 가지는 기능에 대해서만 신경을 썼지, 이 프로그램이 대체 어떤 데이터를 취급하는 것인가에는 그다지 관심이 없었던 것입니다. 절차적 프로그래밍의 문제점 조금만 복잡해져도 순서도로 나타내는 것이 거의 불가능할 정도로 꼬여서 유지보수가 어려울뿐만 아니라 다른사람이 들이 보고 이해하는 것이 불가능. 이 문제를 해결하기 위해 구조적 프로그래밍을 제안하였습니다. 프로그램을 함수단위로 나누고 함수끼리 호출하..

splice 메소드를 사용하여 배열의 요소를 제거할 때 아래와 같은 문제점을 보셨을 거에요 let arr = [1,2,3,4,5]; for(let i = 0; i < arr.length; i++) { arr.splice(i, 1); // 배열의 요소를 하나씩 제거 } // 결과 : [2,4]; 모든 요소가 제거 된 빈배열이 나올 것 같았지만 위와 같이 한 칸씩 건너뛰어서 요소를 제거한 배열이 결과로 나왔습니다 위의 코드에선 어떤일이 일어나길래 모든 요소가 제거되지 않았을까요?? 아래의 과정을 살펴보겠습니다 let arr = [1,2,3,4,5]; for(let i = 0; i < arr.length; i++) { arr.splice(i, 1); /* i = 0 일 때 arr.splice(0, 1) // ..

이벤트 : 웹 브라우저에서 웹 문서에 특별한 일이 있을 때 발생하는 신호 이벤트 핸들러 : DOM 객체에 할당되어 해당 객체의 이벤트 반응에 호출되어 처리되는 프로퍼티 이벤트 핸들러 역할 : 이벤트 발생 감지 -> 이벤트 감지 -> 지정된 자바스크립트 코드 또는 함수 호출 이벤트 종류 1. 마우스 관련 onclick // 마우스 클릭 감지 onmousedown // 마우스 단추 눌렸는지 감지 onmouseup // 눌려젔던 마우스 단추가 올려졌는지 감지 onmouseover // 커서가 특정 객체 위에 있는지 감지 onmouseout // 커서가 특정 객체에서 벗어났는지 감지 onmousemove // 마우스 커서 이동 감지 2. 로딩 관련 onload // 이미지 또는 화면 로딩이 완료됬는지 감지 on..

자바스크립트를 사용하면 DOM 의 모든 노드들을 생성, 수정, 삭제, 복사, 이동 할 수 있습니다. DOM 노드를 제어하는데 필요한 모든 속성과 메서드를 제공하기 때문에 메서드와 속성의 갯수가 많기 때문에, DOM 을 제어할 때 적절한 메서드를 사용해야 원하는 결과를 얻을 수 있습니다. 자바스크립트의 노드 제어를 위한 속성과 메서드들을 알아보겠습니다. 메서드, 속성 타입 설명 appendChild() DOM 메서드 선택한 엘리먼트의 자식 엘리먼트 중 마지막 엘리먼트 뒤에 추가함. DOM 메서드로 엘리먼트(노드) 객체만 사용 가능 붙인 노드 오브젝트가 반환됨. 노드 1개만 추가 수 있음. remove() DOM 메서드 현재 엘리먼트를 삭제. 삭제할 엘리먼트의 참조만 있으면 됨. 인터넷 익스플로러 미지원 r..

Rest Parameter 란? Rest Parameter는 나머지 인자들, 혹은 여분의 인자들이라는 뜻입니다. 함수를 정의할 때 마지막 인자 앞에 ...을 붙이면 해당 인자 다음에 오는 모든 나머지 인자들을 배열로 만듭니다. 즉, 위의 예시를 보면 3번째 인자인 c 인자 앞에 ...을 붙였으므로 'c', 'd', 'e' 이 3개의 항목이 c라는 이름의 배열로 만들어집니다. arguments 라는 속성이 함수의 모든 파라미터를 유사 배열로 가져오는 것과 비교하면 많은 차이점이 있습니다. Rest Parameter는 유사 배열이 아닌 진짜 배열로 만들어주기 때문에 isArray() 함수를 사용하면 true가 출력됩니다. 유사 배열이란? 자바스크립트에선 배열처럼 인덱스로 접근이 가능하고 length 프로퍼티..

클로저란? - 클로저는 외부함수의 변수에 접근할 수 있는 내부 함수를 뜻합니다 - 클로저 함수 안에선 세가지의 변수에 접근할 수 있습니다 - 지역 변수 - 해당 클로저 함수를 포함하는 외부 함수의 변수 - 전역 변수 - 클로저 함수는 외부 함수의 변수뿐만 아니라 매개변수에도 접근할 수 있습니다 - 아래와 같이 클로저 함수를 사용할 수 있습니다 - 그렇다면 이러한 클로저 함수를 어떻게 활용할 수 있을까요? 커링 이용 : 함수 하나가 n개의 인자를 받는 대신, n개의 함수를 만들어 각각 인자를 받게 하는 방법 캡슐화 이용 : 변수를 스코프 안쪽에 가두어 함수 밖으로 노출시키지 않는 방법 - 캡슐화란 중요한 데이터를 보존, 보호하는 것을 뜻합니다 템플릿 함수 이용 : html 태그 만들기

- 자바스크립트는 변수나 상수, 매개변수가 생성될 때 스코프가 정해집니다. - 이때 각 변수, 상수, 매개변수가 미치는 범위를 스코프라고 합니다. - 스코프에는 글로벌 스코프와 로컬 스코프가 존재합니다. 글로벌 스코프 VS 로컬 스코프 비교 - 스코프란 현재 접근할 수 있는 변수들의 범위를 뜻합니다. 글로벌 스코프 - 글로벌 스코프란 전역 변수 또는 함수를 뜻하기도 합니다. - 내부 스코프(함수의 내부 스코프 등..) 에서 전역 변수 또는 함수에 접근 할 수 있습니다 - 예를 들면 아래와 같습니다 - myName 변수는 글로벌 스코프를 갖는 전역 변수로 선언되었습니다 즉, 함수 내부에서도 myName 변수에 접근할 수 있습니다 로컬 스코프 - 로컬 스코프란 블록 또는 함수 내에서만 접근할 수 있는 변수이..