TIL

클로저

클로저 간단히 이해하기 MDN에서의 정의 - 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경과의 조합이다 위 정의에서 말하는 '함수'란 반환된 내부함수를 의미하고 그 함수가 선언될 때의 '렉시컬 환경'이란 내부 함수가 선언됐을 때의 스코프를 의미한다. 즉 클로저란? 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수이다. function func(){ let number=10; return function(){ console.log(number++); } } let test=func(); test(); // 10 test(); // 11 test(); //..

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

이벤트 버블링 - 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작 첫번째 두번째 세번째 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을 텍스트로 변환하는 과정이..

자바스크립트 데이터 타입

데이터 타입 ✅ 자바스크립트 데이터 타입 구분 데이터 타입 설명 원시타입 숫자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..

git rebase

Git Flow & Git Rebase Git Flow Basic Flow 깃허브를 기준으로 브랜치가 main과 feature/F1, feature/F2, Develop 1. 레파지토리 생성시 메인 브랜치 생성 2. develop 브랜치 생성하고 3. feature 브랜치에서 작업을 하고 develop으로 머지를 한다 4. develop에서 테스트 후 배포 할 수 있는 것을 Release 브랜치를 만들어 추가적으로 확인을 한 후(버그 확인) develop 브랜치에도 변경 사항을 들고 온다. 핫픽스 - 기능이 갑작스럽게 오류가 날 때 마이너 버전 - 로직을 추가해도 기존에 있던 로직이 잘 작동할 때 메이저 - 기존에 있던 로직이 더이상 작동을 안할 때 Git Rebase base - 특정 브랜치가 생성될 ..