전체 글

이벤트 버블링 & 캡처링 & 위임

이벤트 버블링 - 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작 첫번째 두번째 세번째 var divs = document.querySelectorAll('div'); divs.forEach(function(div) { div.addEventListener('click', logEvent); }); function logEvent(event) { console.log(event.currentTarget.className); } var button = document.querySelector('button'); button.addEventListener..

SSR vs CSR

SSR, CSR 렌더링을 누가 하느냐에 따라 SSR, CSR로 나뉘게 된다. 쉽게 생각하면 html을 뼈대만 받고 브라우저(Client)에서 동적으로 DOM을 그리면 CSR이고 다 그려진 DOM을 받게 되면 SSR이다. 🌞 SSR(Server Side Rendering) 웹 페이지의 렌더링을 서버에서 처리해준다. 서버에서 사용자에게 보여줄 페이지를 모두 구성해 보여주는 방식 서버를 이용해 페이지를 구성하기 때문에 CSR보다 페이지 구성 속도는 느리지만 전체적으로 사용자에게 보여주는 컨텐츠 구성이 완료되는 시점은 빨라진다 모든 컨텐츠가 HTML에 담겨 있기 때문에 SEO 부분에서 CSR보다 효율적이다. 사용자가 클릭을 할 때마다 전체적인 웹사이트를 다시 서버에서 받아오기 때문에 깜빡힘 현상(좋지 않은 UX..

브라우저 렌더링 과정

브라우저 렌더링 과정 브라우저 - 웹 페이지, 이미지, 비디오 등의 콘텐츠를 수신, 전송 및 표현하는 소프트웨어(크롬,사파리,엣지 등) / 사용자가 선택한 자원(URL)을 서버에 요청하고 받아 화면에서 표시 렌더링 - HTML, CSS JavaScript 등 개발자가 작성한 문서를 브라우저에서 시각적 형태로 출력하는 과정 브라우저의 렌더링은 다음과 같이 이루어 진다. 1.DOM(Document Object Model),CSSOM(CSS Object Model) 트리 구축 2.자바스크립트 파싱 3.렌더링 트리 구축 4.레이아웃 생성 5.페인팅 1. DOM 트리 구축 네트워크를 통해 오고가는 데이터는 기본적으로 0과 1로 이루어진 바이트 코드이다. 그렇기 때문에 응답 받은 HTML을 텍스트로 변환하는 과정이..

[자바스크립트] 옵셔널 체이닝

✅ 옵셔널 체이닝 연산자(?.) - ES11에 도입되었으며 좌항의 연산자가 null 또는 undefined인 경우 undefined를 반환하고, 아닌 경우 우항의 프로퍼티를 참조! - 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용 let ob = null; let cob = ob?.name; // 좌항의 연산자가 null 이기 때문에 undefined를 반환 console.log(cob) ob = {age:12}; cob = ob?.name; // 좌항의 연산자가 undefined 또는 null이 아니지만 객체 안에 name 프토퍼티가 없기 때문에 undefined 반환 console.log(cob) // undefined cob=ob?.a..

자바스크립트 데이터 타입

데이터 타입 ✅ 자바스크립트 데이터 타입 구분 데이터 타입 설명 원시타입 숫자number 타입 숫자. 정수와 실수 구분 없이 하나의 숫자 타입만 존재 문자열string 타입 텍스트 데이터를 나타내는데 사용 작은따옴표(''), 큰따옴표(""), 백틱(``)으로 텍스트를 감싼다. 불리언boolean 타입 논리적 참(true)와 거짓(false) undefined 타입 자바스크립트 엔진이 변수를 초기화 할 때 사용하는 값 변수를 참조했을 때 undefined가 반환된다면 참조한 변수가 선언 이후 값이 할당된 적이 없는, 즉 초기화되지 않은 변수이다. null 타입 null은 변수에 값이 없다는 것을 의도적으로 명시할 때 사용 변수에 null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다..

WebRTC ver.1

WebRTC(Web Real-Time Communication) - 수정 예정 WebRTC - 웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고 마음대로 스트림할 뿐 아니라, 임의의 데이터도 교환할 수 있도록 하는 기술(서버를 통하지 않고 사용자끼리 통신) 쉽게 생각한다면 어떠한 플러그인 없이 음성, 비디오, 데이터를 서로 교환할 수 있는 기술 WebRTC 기술을통해 통신 이루어지는 과정으로는 1.서로의 주소를 공유 2.보안 사항 및 방화벽 우회 3.데이터를 실시간으로 교환 1,2번을 시그널링이라고 한다. 시그널링 - 서로 다른 네트워크에 있는 2개의 디바이스들을 서로 위치시키기 위해서는, 각 디바이스들의 위치를 발견하는 방법과 미디어 포맷 협의가 필요. 시그널링 과정..

[자바스크립트] 변수

변수 컴퓨터에 저장되는 데이터는 데이터 종류에 관계없이 모두 2진수로 저장된다. 변수 - 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 식별자 - 어떤 값을 구별해서 식별할 수 있는 고유한 이름(값이 저장돼 있는 메모리 주소와 매핑 관계) / 식별자는 값이 아니라 메모리 주소를 기억하고 있음 ✅ 변수 선언 변수 선언 - 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해 값을 저장할 수 있게 준비하는 것 자바스크립트 엔진은 변수 선언을 2단계에 거쳐 수행함 1. 선언 단계 - 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알림 2. 초기화 단계 - 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 u..

[자바스크립트] 자바스크립트 변수 선언 방법

자바스크립트의 변수 선언 방법 과거에는 var를 사용하는 것밖에 없었지만 이제는 const, let, var 같이 여러가지가 있으며 사용 방법도 다르다. var one = 1; console.log(prev); // undefined -> 자바스크립트 호이스팅 특성 function change() { console.log(one); let two = 2; const three = 3; console.log(two); console.log(three); one = 11; two = 22; // three=33; Uncaught TypeError: Assignment to constant variable. } var prev = 3; change(); console.log(one); // 11 var one..

커스텀 훅

Custom Hook 1. 커스텀 훅은 왜? 관심사의 분리 코드를 처음부터 잘 작성하더라도 다양한 이유로(ex. 기획의 변화, 디자인 변경, 요청 사항 추가) 개발 기간 동안 적어도 한번은 처음과는 다른 조건과, 상황에 대응하도록 수정해야 할 필요성이 생긴다. -> 여러가지 문제를 한번에 해결하도록 단위를 짜는 것이 아니라 한가지 문제만 해결하도록 단위를 잘게 짜도록 한다 장점 코드의 명료화 코드의 재사용성 용이 유지 보수의 용이 테스트 코드 작성이 쉬움 2. 커스텀 훅 view와 Logic의 분리 Presentational Component : UI Only 컴포넌트 state, effect등 로직 없음 -> 화면을 렌더링하는데 필요한 코드만 존재 const UserList = ({ users }) =..