요모조모

🍴 콜백 함수: 특정 작업이 완료된 후 호출되는 함수.자바스크립트의 비동기 작업에서 콜백 함수를 통해 작업 완료 후의 처리를 정의함.주로 시간 지연 함수(setTimeout), I/O 작업, 네트워크 요청 등의 비동기 작업에 사용됨.단점콜백 헬(Callback Hell)비동기 작업이 중첩되어 코드의 가독성과 유지보수성이 떨어짐function step1(callback) { setTimeout(() => { console.log("1단계 완료"); callback(); }, 1000);}function step2(callback) { setTimeout(() => { console.log("2단계 완료"); callback(); }, 1000);}function step3(c..

🍰 요즘... 어렵다.🍴 AJAX(Asynchronous JavaScript And XML): 웹 애플리케이션이 서버와 비동기적으로 소통할 수 있게 해주는 기술.웹 페이지 전체를 다시 로드X -> 서버와 데이터 주고 받음핵심 요소XMLHttpRequest 객체: 브라우저 내에서 서버와의 HTTP 요청을 만들고 처리하는 데 사용됨.DOM: HTML 문서의 구조화된 표현 제공. 자바스크립트가 문서의 내용을 동적으로 변경할 수 있게 함.XML(or JSON): 서버와 데이터 교환 형식으로 XML이나 JSON 사용.AJAX의 작동 원리사용자 이벤트 발생: 사용자가 웹 페이지에서 어떤 작업을 수행 (예: 버튼 클릭).XMLHttpRequest 객체 생성: JavaScript를 통해 XMLHttpRequest ..

🍰 요즘은 그냥... 수업으로 한 방에 이해하는 건 이미 포기했다. 이번 주는 뭘 했는 지 흔적만 남기는 것에 의의를 두기로...🍴 jQueryhttps://jquery.com/ jQueryWhat is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.jquery.com 🍴 Swiperhttps://swiper..

🍰 지금도 더워서 선풍기 틀고 버티는데, 더 더워지면 어떡하나 걱정이다. 작년에 너무 더워서 의욕도 안 생기고... 나태해지고(원래도 그랬을지도.)...🍴 버블링: 이벤트가 발생한 요소에서 시작하여 최상위 요소까지 전달되는 방식이벤트는 트리의 하단에서 시작하여 점차 올라감다음 순서로 진행됨실제 이벤트가 발생한 요소중간의 부모 요소들documentwindow🍴 캡처링: 최상위 요소에서 시작하여 이벤트가 발생한 실제 요소까지 전달되는 방식진행되는 순서windowdocument중간의 부모 요소들실제 이벤트가 발생한 요소🍴 중단하기: 버블링, 캡처링 중단하도록 명령 => event.stopPropagation() 사용element.addEventListener('click', function(event)..

🍰 드디어 DOM 파트!🍴 DOM(Document Object Model): 웹 페이지의 구조화된 표현을 정의하는 프로그래밍 인터페이스. HTML 또는 XML 문서의 모든 요소를 객체로 나타냄자바스크립트를 통해 이 객체들을 조작할 수 있게 함웹 페이지의 내용, 구조, 스타일 동적으로 변경 가능트리 구조로 구성됨각 노드는 문서의 한 부분을 나타냄🍴 자식 노드 탐색childNodes현재 노드의 모든 자식 노드(NodeList) 반환요소 노드, 텍스트 노드, 주석 노드 포함firstChild현재 노드의 첫 번째 자식 노드 반환lastChild현재 노드의 마지막 자식 노드 반환🍴 DOM 컬렉션: HTML 문서에서 여러 요소를 그룹으로 다루기 위해 제공되는 객체들의 집합for...of를 사용할 수 있음배열..

🍰 난 여전히 실력이 부족하고, 진도는 멀리 멀리 떠나 버리고. 우울하던 차에 팀원 분이 지금은 이런 게 있다- 정도로 공부하고, 이후에 필요할 때 찾아서 쓰다 보면 저절로 외워지고 익혀지니까 너무 완벽히 하려고 하지 않아도 된다고 해서 위로가 되었다. 안 그래도 수업 없던 3일 간 지지난주 금요일 진도부터 복습 했는데 절반 정도를 끝냈어서 자괴감이 들었다. 오늘 스프린트 회고 시간에 들은 효과적인 공부법들을 적용 해봐야지! 🍮 어쨌든 나아가자고.🍴 try...catch: 예외 처리를 위해 사용되는 구조.try { // 예외가 발생할 수 있는 코드 블록 throw new Error('예외 발생 예시'); // 강제로 예외 발생} catch (error) { // 예외가 발생했을 때 ..

🍰 큰일 큰일. 약간 넋 놓고 들은 파트가 있어서 얼른 따라잡아야 한다.🍴 배열[]를 사용해 선언, 초기값 설정 가능인덱스를 사용해 배열 요소에 접근/수정 가능push, pop, shift, unshift 메서드를 사용해 배열에 요소를 추가/제거배열은 객체임, 키가 숫자인 특수한 형태로 동작for, for...of, forEach 등을 통해 배열 순회🍴 큐(Queue)먼저 들어온 데이터가 먼저 나가는 FIFO(First In, First Out) 구조데이터가 한쪽 끝에서 들어가고 다른 쪽 끝에서 나옴주로 enqueue로 추가, dequeue로 제거🍴 스택(Stack)나중에 들어온 데이터가 먼저 나가는 LIFO(Last In, First Out) 구조데이터가 한쪽 끝에서만 들어가고 나옴주로 push..

🍰 정적 메서드클래스 레벨에서 정의됨클래스 이름을 통해 직접 호출할 수 있음클래스의 인스턴스 없이도 실행될 수 있음객체의 상태와 무관한 연산을 수행할 때 유용함this 키워드를 사용할 수 없음class MyClass { static staticMethod() { console.log('This is a static method.'); }}// 정적 메서드 호출MyClass.staticMethod(); // This is a static method.🍰 인스턴스 메서드객체 레벨에서 정의됨특정 객체의 인스턴스를 통해 호출됨객체의 상태를 조회하거나 변경하는 데 사용됨this 키워드를 사용하여 현재 객체에 접근할 수 있음객체의 상태와 관련된 행동을 정의할 때 필수적임다형성을 지원함, ..

🍰 얕은 복사 (Shallow Copy): 객체의 1단계 속성들만 복사객체의 속성 중 하나가 다른 객체를 참조 -> 원본 객체와 복사된 객체가 공유중첩된 객체나 배열은 복사 X, 참조만 복사const original = { name: 'Alice', age: 25, address: { city: 'Wonderland', zip: '12345' }};// 얕은 복사const shallowCopy = { ...original };console.log(shallowCopy);// { name: 'Alice', age: 25, address: { city: 'Wonderland', zip: '12345' } }shallowCopy.name = 'Bob';shallowCopy.address.c..

🍰 오늘은 어제보다 훨씬 나았다. 어제는 진짜... (절레 절레)🍴 클로저(closure): 함수와 그 함수가 선언된 렉시컬 환경과의 조합(MDN 정의)자바스크립트 엔진은 함수를 어디에 정의했는지에 따라 상위 스코프를 결정함 => 렉시컬 스코프(정적 스코프)라고 함클로저 특징함수가 선언된 렉시컬 스코프를 기억함함수가 반환된 후에도 상태 유지함 function createCounter() { let count = 0; return function() { count++; return count; };}const counter = createCounter();console.log(counter()); // 1console.log(counter()); // 2cons..