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. 멱등성이란? 수학에서 사용하는 용어에서 유래한 것으로. 연산을 여러 번 적용하더라도 결과가 달라지지 않는 성질을 뜻한다. 2. HTTP Method 의 멱등성 멱등성의 개념은 HTTP 에서도 동일하게 적용될 수 있다. 동일한 요청을 한 번 보내는 것과 여러번 보내는 것이 서로 동일한 효과를 지니고, 서버의 상태도 동일하게 남을 때 해당 HTTP Method가 멱등성을 갖는다고 이야기한다. 멱등성을 따질 때에는 서버의 상태만 바라보면 되며, HTTP 응답 Status는 신경쓰지 않아도 된다. 올바르게 구현된 REST API 의 GET, HEAD, OPTIONS, PUT, DELETE 메소드는 통계 기록(e.g. 게시물 조회수의 증가 등)을 제외하였을 경우 멱등성이 보장된다 어떤 이유로 GET, HEA..

팀 미팅 시간에 캐시(cache)에 대해 팀원분과 얘기를 나누게 됐다. 데일리 퀴즈에서 나왔던 문제를 cache를 사용해서 푸는 방법과 리액트의 Virtual DOM이 일종의 cache라는 것을 알게됐는데, 여러 가지들을 알게돼서 너무 재밌었다ㅋㅋㅋ 그래서 오늘은 cache에 대한 내용을 주제로 글을 작성하려 한다.  1. 캐시(cache)란?cache는 자주 사용하는 데이터나 값을 미리 복사해 놓는 임시 장소를 말한다. 아래 그림은 저장공간의 계층 구조를 나타낸 그림인데, 그림을 보면 캐시는 저장공간이 작고 비용이 비싼 대신 빠른 성능을 제공한다. 캐시는 다음과 같은 경우에 사용하면 좋다. 1. 동일한 API 데이터를 빠르게 제공해야 할 때 위의 경우 다음과 같은 예시를 들 수 있다.온라인 상점의 제품..

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)이란 자바스크립..

1. initial 모든 CSS 속성에는 기본값(initial/default value)이 있다. 예를 들면 대부분의 브라우저에서 color 속성의 기본값은 black이다. initial 속성값은 해당 속성을 기본값으로 초기화 시켜준다. 따라서 태그의 중첩이 있을때 부모 요소의 속성을 상속받지 않고 기본값으로 초기화 하고 싶은 경우 사용할 수 있다. 다음 예제를 살펴보자. This is heading This is a paragraph.This is child element! h1 { font-size: 2rem; } p { font-size: 1.5em; } span{ font-size: initial; color: tomato; } body 태그는 자식 요소로 h1 태그와 p 태그를 가진다. p 태그..

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

1. 를 실행하였을 때, 오류가 일어난다. 오류가 발생하는 이유와 해결 방법에 대해 설명하시오. // 1번 직원 정보 const p1 = fetch('').then((res) => res.json()); // 2번 직원 정보 const p2 = fetch('').then((res) => res.json()); // 3번 직원 정보 const p3 = fetch('').then((res) => res.json()); Promise .all([p1, p2, p3]) .then((results) => { console.log(results); // Array : [1번 직원 정보, 2번 직원 정보, 3번 직원 정보] }); 답: Promise 객체가 하나라도 rejected 상태가 되는 경우에 대비해서 cat..

1. 다음중, 보기의 실행 결과로 올바른 것은? [보기 A] function outer_function() { let outer_variable = "I am outside!"; function inner_function() { let inner_variable = "I am inside!"; console.log(`${inner_variable} ${outer_variable}`); } return inner_function; } let closure_function = outer_function(); closure_function(); [ㄱ] "I am outside! I am inside!" [ㄴ] "I am inside! I am outside!" [ㄷ] "I am outside!" [ㄹ] "I ..

목차 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 ..