I'm a Fig, Not a Pig

이번주 위클리 페이퍼는 주제는 이벤트 버블링, 캡쳐링, 위임에 대해 설명해 주세요. HTTP 메소드에 대해 설명해 주세요. 이 두 개다! 두 주제 모두 예전에 한 번 정리한 적이 있어서 수월하게 쓸 수 있겠다 ㅎㅎ 1. 이벤트 버블링, 캡쳐링, 위임에 대해 설명해 주세요. 1. 이벤트 버블링 (Event Bubbling) 이벤트 버블링은 자식 요소에서 부모 요소로 이벤트가 전파되는 것을 말한다. 간단한 예시를 통해 알아보자. Click me! document.getElementById('inner').addEventListener('click', function() { console.log('Inner clicked'); }); document.getElementById('outer').addEventL..

1. OSI 7계층은 네트워크 통신이 일어나는 과정을 7단계로 나눈 국제 표준화 기구(ISO)에서 정의한 네트워크 표준 모델을 말하는데, 여기서 OSI 7계층 중 7계층인 응용계층(Application layer)에 해당하는 웹 프로토콜의 예로는 HTTP(Hypertext Transfer Protocol)가 있다(O,X) 참고링크: https://lxxyeon.tistory.com/155 답: O 2. JSON 객체의 stringify 메소드와 parse 메소드는 각각 (S____ ) 과 (D____ )을 해주기 위해 사용된다. 이 때 괄호 안에 들어갈 말은? 답: Serialize(직렬화), Deserialize(역직렬화) 해설: JSON(JavaScript Object Notation)이란 자바스크립..

하드코딩의 뜻은 값을 고정시켜 놓는 것 이다. 반대로 소프트코딩은 값이 고정되지 않고 가변적인 것을 의미한다. 하드코딩의 문제는 값을 고정시켜놓기 때문에 유지보수가 어렵고 유연성이 부족하다. 다음의 예제를 보자. // 하드코딩된 예시: 숫자를 직접 사용 function calculateCircleArea() { const radius = 5; // 반지름을 하드코딩 const area = Math.PI * Math.pow(radius, 2); console.log('원의 넓이:', area); } calculateCircleArea(); 이 코드에서는 반지름을 5로 하드코딩해서 사용하고 있다. 만약 반지름을 변경하려면 함수 내부의 코드를 수정해야 한다. 더 좋은 방법은 함수에 인자로 전달해서 사용하는 것..

목차 1. 고차 함수 2. 콜백 함수 일급 객체란? 일급객체란 일반 객체처럼 모든 연산이 가능한 객체를 뜻한다. 보통 변수에 할당, 다른 함수의 전달인자로 전달, 다른 함수의 결과로 리턴 같은 연산을 지원할 때 일급 객체라고 한다. 또한 JavaScript에서 함수는 일급 객체이다. 일급 객체의 특성은 다음과 같다. 함수의 매개변수로 전달이 가능하다 함수의 반환 값으로 전달할 수 있다 할당 명령문을 통해 값을 할당할 수 있다 동일 비교 대상으로 사용할 수 있다 const firstClassObj1 = { name : 'QQ', age : 20 }; // 1) 함수의 매개변수로 전달 ! function func1 (firstClassObj1) { console.log(`name : ${firstClassO..

1. 자바스크립트에서 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)에 대해 설명해 주세요. 얕은 복사와 깊은 복사를 이해하기 위해서는 원시값과 참조값에 대해 알아야 한다. 자바스크립트에서 값은 원시값과 참조값으로 나뉜다. 원시값 Number String Boolean Null Undefined 참초값 Object Symbol 둘의 차이점은 원래의 값과 복사된 값이 서로에게 영향을 미치느냐, 그렇지 않느냐에 따라 나뉜다. 원시값은 값을 복사할 때 복사된 값을 다른 메모리에 할당하기 때문에 (=새로운 메모리 공간에 독립적인 값을 저장)원래의 값과 복사된 값이 서로에게 영향을 미치지 않는다. (아래에서 정리하겠지만 이는 깊은 복사가 된다.) const a = 1; let b = a; b ..

1. arguments 객체에 대해서 설명해주세요. 답: 자바스크립트는 함수를 호출 할 때 arguments 객체가 함수 내부로 전달된다. arguments 객체는 함수를 호출할 때 넘긴 인자들이 배열 형태로 저장된 객체를 말한다. 만약 함수의 인자보다 적게 함수를 호출할 경우, 넘겨지지 않은 인자에는 undefined 값이 할당된다. arugments 객체는 유사 배열 객체이기 때문에 배열과 비슷하지만 length 속성만 쓸 수 있고 배열 메서드는 사용할 수 없다. 2. this는 호출에 따라 달라집니다. 아래를 읽고, 어느 객체를 가리키는지 말해주세요. 1) var x = this; console.log(x); 답: 전역객체인 window를 가리킨다. 2) const user = { firstName..

목차 1. innerHTML 2. innerText 3. textContent 4. 정리 매번 찾아보는 셋의 차이점.. 텍스트를 읽어오고 설정할 수 있다는 점이 비슷하지만 조금씩 다른 차이가 있어서 이 차이를 아는게 중요하다. 1. innerHTML 먼저 innerHTML은 'Element'의 속성으로, 해당 Element의 HTML, XML 마크업을 읽어오거나 설정 할 수 있다. 즉, innerHTML을 사용하면 내부 HTML 코드를 JavaScript 코드에서 새 내용으로 쉽게 변경할 수 있다. // html 코드와 함께 작성 가능 document.documentElement.innerHTML = "innerHTML" // 스타일 적용 document.documentElement.innerHTML =..

목차 1. Rest Parameter란? 2. Arguments란? 3. Rest Parameter와 Arguments 비교 1. Rest Parameter Rest Parameter 구문을 사용하면 함수가 정해지지 않은 수의 매개변수를 배열로 받을 수 있다. 이름 그대로 먼저 선언된 매개변수에 할당된 전달인자를 제외한 나머지 전달인자들이 모두 배열에 담겨 할당된다. 따라서 Rest parameter는 반드시 마지막 매개변수여야 한다. 다음은 Rest Parameter를 사용해서 전달된 모든 숫자를 더하는 예제이다. function sum(...numbers) { let total = 0; for (let number of numbers) { total += number; } return total; }..

1. 다음 HTML 코드를 보고 문제를 해결해주세요. 음식 햄버거 치킨 피자 나라 한국 일본 미국 영국 (1) 코드에서 1번과 2번의 접근 대상은? const foodList = document.querySelector("#food_list"); const countryList = document.querySelector("#country_list"); // 1번 console.log( foodList.parentElement.children[2].nextElementSibling.children[2] ); // 2번 console.log( countryList.parentElement.firstElementChild.nextElementSibling .children[1] ); 답: 1번: 미국 2번:..

오늘은 요소의 속성 값을 가져오는 방법인 getAttribute()에 이어 요소의 속성을 설정하는 방법인 setAttribute()에 대해 다룰 것이다. 1. setAttribute() 문법 element.setAttribute(, ); 이 메소드는 두 개의 필수 매개변수가 있다. 하나씩 살펴보자. setAttribute() 매개변수 attributeName: “href”, “type”, “style” 와 같이 속성명을 지정하면 된다. attributeValue: 지정한 속성명에 대한 속성값을 지정하면 된다. 만약 attributeName이 “href” 이면 값은 “https://shinyks.com”, 속성이 “type” 이면 값으로 “text” 등을 넣으면 된다. 2. 예제 Example Div Ad..