arrow function이란? 자바스크립트 ES6부터 등장한 함수 표현식이다. 먼저 자바스크립트에서 함수를 정의하는 방법, 함수 선언식과 함수 표현식에 대해 알아보았다. 함수 정의 1. 함수 선언식 function 키워드 function add(a, b) { return a + b; } add(1 + 3); 2. 함수 ...

변수 선언 방식 1. var var name = "javascript"; console.log(name); // javascript var name = "react"; console.log(name); // react 중복 선언 가능: var 로 선언한 변수는 동일한 이름으로 여러 번 중복해서 선언이 가능하다. 이와 같은...

호이스팅(Scope)이란? - MDN docs - 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. 다시 말해, 스코프 안에 있는 선언들을 모두 스코프의 최상위로 끌어올리는 것이다. 자바스크립트 엔진은 코드를 실행하기 전 컴파일 단계에서 함수와 변수 선언이 스캔된다. 스캔된 모든 함수, 변수 선언은 Lex...

스코프(Scope)란? 우리말로 번역하면 ‘범위’라는 뜻으로 ‘변수에 접근할 수 있는 범위’ 이다. var a = 1; function print() { var a = 111; console.log(a); } print(); console.log(a); 이름이 같은 변수 a가 중복 선언되었다. 전역에서 변수 a를 참조할 때,...

함수란? “보통 함수란 자신의 외부(재귀 함수의 경우 스스로) 코드가 호출할 수 있는 “하위 프로그램”입니다. 함수에 값을 ‘전달’하면, 함수는 값을 ‘반환’할 것입니다.” MDN ex) a와 b를 더해주는 함수 add function add(a, b) { return a + b; } add(1 + 3); 위 처럼 함수(...

오늘날 웹 사용자는 방문하는 페이지가 대화형으로 원활하게 작동할 것으로 기대하므로 여기에 시간과 노력을 집중해야 한다. 페이지는 빠르게 로드될 뿐만 아니라 전체 수명 주기 동안 사용자 입력에 빠르게 응답해야 한다. 사용자 인터페이스의 시각적 변경은 사용자가 안정적으로 느껴지도록 최대한 빠르게 진행되어야 한다. 사용자 상호작용에 빠르게 응답하는 페...

렌더링이란 HTML, CSS, JavaScript등 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정을 말한다. 웹 개발을 하며 브라우저의 렌더링 과정을 정확하게 이해하고 있으면 어떻게 개발을 해야 좋은 성능을 내는지, 성능 최적화를 어떻게 해야하는지를 정확하게 판단할 수 있다. 브라우저 랜더링 최적화를 알아보기 전에 브라우저의 구성...

이전 포스트에서 프로세스와 스레드에 대해 알아보았다. 그렇다면 웹 브라우저는 어떤 프로세스와 스레드를 사용하여 빌드될까? 다양한 스레드가 있는 하나의 프로세스이거나 IPC를 통해 통신하는 스레드가 몇 개의 다른 프로세스일 수 있다. 브라우저 아키텍처는 표준이 없어 각 브라우저(Chrome, Firefox 및 Edge)마다 아키텍처가 조금씩 다르다....

하드웨어와 소프트웨어 하드웨어(HardWare) CPU(Central Processing Unit) CPU는 컴퓨터의 두뇌라고 볼 수 있습니다. CPU 코어는 다양한 작업이 들어오는 대로 하나씩 처리할 수 있습니다. (Thread 단위로 코어에 맵핑) GPU(Graphs Processsing Unit) CPU와 달리 GPU...

git working flow - 작업 흐름 로컬 저장소는 git이 관리하는 세 그루의 나무로 구성되어 있다. 작업 디렉토리(Working directory): 로컬(실제) 파일 인덱스(Index): 준비 영역(staging area)의 역할 나무인 HEAD: 최종 확정본(commit) ...