I'm a Fig, Not a Pig

목차 1. DOM (Document Object Model) 이란? 2. DOM의 문제점 3. Virtual DOM 보통 자바스크립트를 배우면서 자연스럽게 리액트도 배우게 된다. 그럼 리액트를 왜 사용하게 됐냐는 질문을 받으면 뭐라고 답해야 할까? 많은 사람들이 사용하니까, 인기있는 라이브러리니까 등 여러 답변이 있겠지만, 만족스럽지는 못한 답변이라고 생각한다. 그래서 앞으로 리액트의 등장배경, 내부동작들을 정리하며 어떠한 이유에서 리액트가 등장했고, 또 왜 리액트를 사용해야 하는지에 대해 공부하려고 한다. DOM은 HTML, CSS, JS를 익히면서 알게된 개념인데, 리액트에서 Virtual DOM 이라는 개념으로 또 만나게 됐다. Virtual DOM이란 무엇일까? 우선 DOM의 의미부터 살펴보자. ..

원시 값은 변경 불가능한 값이기 때문에 값을 직접 변경할 수 없다. 따라서 변수 값을 변경하기 위해 원시 값을 재할당하면 새로운 메모리 공간을 확보하고 재할당한 값을 저장 후, 변수가 참조하던 메모리 공간의 주소를 변경한다.(값의 이러한 특성을 불변성 이라 한다) 다음의 예제를 보자. "hello" + "world"; // "helloworld" 위의 예제를 보면 "hello"와 "world"가 결합되어 좌항의 값이 변경되는 것 같이 보인다. 그러나 실제로는 두 문자열을 합친 새로운 값이 생성된다. 때문에 빈번한 원시형 값의 수정으로 인한 성능 저하를 막기 위해서는 버퍼(Buffer)를 사용하는 것이 권장된다. 1. 버퍼(Buffer) Buffer의 영단어 뜻은 완충제, 완화하다 라는 의미이다. 뜻만 보..

이번주 위클리 페이퍼는 주제는 이벤트 버블링, 캡쳐링, 위임에 대해 설명해 주세요. 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 ..