minTech

📚 사전 지식 React Hook이란 함수 컴포넌트 내에서 리액트가 제공하는 기능에과 연결하여 그 값이나 기능을 사용할 수 있도록 하는 함수이다. 즉, 컴포넌트 외부에 위치한 리액트가 관리하는 state에 연결해서 변수처럼 값을 사용할 수 있도록 한다. ❓커스텀 훅(Custom Hook) 이란? 코드를 짜다보면, 여러 컴포넌트에서 같은 로직이 반복되는 경우가 있다. (대표적인 예로 API 호출하는 경우) 물론 react에 내장된 여러가지 hook이 존재하지만, 이러한 반복되는 부분을 줄이기 위해서 조금 더 구체적인 목적을 가진 기능을 하는 나만의 훅을 만들고 싶다는 생각이 든다. 이럴 때 커스텀 훅을 만든다. 즉, 반복되는 로직을 추출하여 하나의 로직으로 만들어 쉽게 재사용 가능하도록 나만의 Hook을 ..

DOM에 대해서 짧막하게 글을 적었던 적이 있었다. 이번 react 과정을 배우게 되면서 virtual DOM의 개념에 대해 알게 되었는데 공부를 해보며 DOM과의 차이는 무엇인지, virtual DOM의 작동원리는 무엇인지 제대로 정리해보며, 글을 작성해보았다. ☝️DOM 먼저 MDN에서는 DOM을 어떻게 정의했을까? DOM (Document Object Model) 은 HTML 또는 XML 기반 문서와 상호작용하고 표현하는 API입니다. browser에서 로드되며, node 트리로 표현하는 문서 모델입니다. 위의 말은 결국 HTML 문서를 노드 트리로 표현한 것이다. 처음에 트리로 표현한다는 말이 이해가 안갔다. 하지만 그림으로 이 말을 이해한다면 바로 이해가 간다. DOM은 위의 정의에서 알 수 있..

자바스크립트의 동기와 비동기.. 복잡한 개념인 것 같아 배우면서 애를 먹었던 부분이다. 이 두 개념에 대해 이해한대로 정리해보았다. 동기(synchronous) 동기적으로 실행한다는 것은 무엇을 의미하는 것일까? ➡️ 동기 실행이란 한 번 시작한 작업을 다 처리하고 나서야 다음 코드로 넘어가는 것이다. 다음과 같이 변수를 선언해주어 값을 세 번 다른 값으로 할당 후에 중간중간 콘솔로 출력해보았다. let num = 1; console.log(num); num = 2; console.log(num); num = 3; console.log(num); 자바스크립트는 동기식 언어이기 때문에 코드를 위에서 아래로 내려오면서 한줄한줄 실행한다. 따라서 결과는 1,2,3이 차례대로 출력됨을 확인할 수 있다. 🖐️자바..

HTTP (HyperText Transfer Protocol) 한 번쯤 http에 대해서 많이 들어보았을 것이다. 특히 서로 친구들이나, 가족들에게 재밌는 동영상을 공유할 때 URL을 주고받는다. 이를 자세히 살펴보면 http가 URL의 맨 처음에 위치해있음을 알 수 있다. 👀 HTTP http는 하이퍼텍스트를 전송하는 프로토콜이다. 프로토콜 : 컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계 - from MDN- 즉, 웹 브라우저와 서버가 데이터를 교환할 때 http 프로토콜에 맞게 이루어져야한다. HTTP Method 웹 브라우저와 서버 사이의 요청(request)과 응답(response)가 이뤄지는 방식을 말한다. request에 원하는 동작을 위한 메소드 값을 넣어..

📑 이벤트 객체 사용자의 입력을 트리거로 발생한 이벤트 정보를 담은 객체 웹 페이지에서 이벤트가 발생하면 이벤트와 관련된 정보를 담은 이벤트 객체가 자동으로 발생한다. 리스너 함수의 첫 번째 매개변수를 통해 이벤트 객체를 전달받을 수 있다. function printEvent(e) { console.log(e); } 다음과 같은 이벤트 함수를 등록하여 console 창을 통해 이벤트 객체를 확인해보았다. 위 그림에서 처럼 이벤트 객체 안에는 많은 프로퍼티들이 존재한다. 이 중 많이 사용하는 것이 type과 target 이다. - type: 발생한 event의 타입 - target : event가 발생한 해당 DOM요소를 가리킨다. 🖱️이벤트가 발생하면 이벤트가 발생하면 이벤트는 어떻게 전파되는 걸까? 이..

🖐️시작 전에 자바스크립트는 단일 스레드 기반의 언어이다. 그렇기 때문에 요청이 동기적으로 처리되어 한 번에 한 가지 일만 처리가 가능하기 때문에 한 번에 많은 작업들을 수행할 수 가 없다. 하지만 자바스크립트를 통해 만든 결과물을 보면 여러 동작을 한 번에 하는 것처럼 보인다. 어떻게 가능한걸까? 그렇다면 자바스크립트는 단일 스레드가 아닌걸까? NO!! 이런 동작이 가능하게 하는 것이 "event loop" 덕분이다. 자바스크립트 엔진이 이벤트 루프를 다루는 것이 아니다. 자바스크립트는 Call Stack을 통해 들어온 일을 순차적으로 처리할 뿐이다. 이러한 비동기 요청은 브라우저나 nodeJS같은 브라우저 환경이 담당한다. 🌐 브라우저 환경 👉 구성 ☝️ Javascript engine Heap : ..

🖐️시작 전 데이터 타입 자바스크립트의 데이터 타입에는 기본형(Primitive Type)과 참조형(Reference Type)이 있다. 기본형(Primitive Type) String, Number, Bigint, Boolean, undefined, symbol, null 메모리 영역에서의 변경이 불가능하나, 재할당이 가능하다. let value = "original"; value = "change"; 기본형은 불변성을 가지고 있기 때문에 기존 메모리에 생성된 값이 변경된 것이 아니라 다른 메모리를 가리키기 때문에 값이 바뀌는 것처럼 보이는 것이다. 할당 연산자(=) 를 이용 변수에 값 할당 시, 실제 값이 저장된다. 따라서 복사한 값이 재할당되더라도 원본에는 전혀 영향을 받지 않는다. let valu..

DOM DOM은 웹 페이지/문서 에 나타나는 HTML 문서 전체를 객체로 표현한 것을 의미한다. * 웹 페이지/웹문서 : 웹 브라우저에 나타나는 컨텐츠 부분 DOM 트리란? HTML 위의 HTML의 구조는 !+enter를 치면 나오는 자동으로 짜여지는 HTML의 구조이다. HTML은 다음과 같이 계층 구조를 이루며, 계층 간의 관계에는 부모태그와 자식태그가 있다. DOM 트리 DOM 의 경우 HTML과 동일하게 계층구조이다. HTML과 다른 점이 있다면, 각 객체를 노드(Node)라고 표현하며, 각 노드끼리의 관계에는 부모노드, 자식노드, 형제노드가 있다. DOM트리구조의 경우 다양한 노드 타입을 갖는다. 요소 노드 : 태그를 표현하는 노드 텍스트 노드 : 문자를 표현하는 노드 💡텍스트 노드의 경우 따로..