선호:하다

React.js 리액트란 SPA(Single Page Application)을 위한 자바스크립트 UI 라이브러리이다. Why React? 코드의 재사용성 - 리액트는 컴포넌트 기반의 UI 라이브러리 - 컴포넌트 단위의 개발을 통해 반복되는 코드의 재사용성을 높임 선언적 프로그래밍 - JSX를 사용하여 선언적 프로그래밍 활용 - 명령형 프로그래밍에 비해 훨씬 목적이 뚜렷하고 간결한 코드 작성 가능 Virtual DOM - Virtual DOM을 사용하여 웹 애플리케이션의 성능을 극대화 [React.js] 컴포넌트, props, state 컴포넌트(Component) 리액트로 만들어진 앱을 이루는 최소한의 단위 UI를 기능에 따라 여러 컴포넌트로 나누어 개별적으로 작성 컴포넌트를 이용하여 코드의 재사용이 가..

웹 브라우저의 렌더링 DOM을 알기 전 웹 브라우저가 어떻게 우리에게 보여지는지 이해해보자. HTML과 CSS를 전달받아 파싱하여 각각 DOM과 CSSOM라는 트리 객체를 생성 DOM과 CSSOM을 이용하여 실제로 보여지는 요소들로 구성된 렌더 트리를 생성 레이아웃 과정을 통해 각 요소들을 어디에 어떤 크기로 배치할지 결정 페인팅 과정을 통해 각 요소들을 실제 화면에 그림 DOM (Document Object Model) DOM이란 Document Object Model의 약자로 문서 객체라는 뜻이다. 이는 DOM은 웹 브라우저가 HTML 페이지를 인식하는 방식이며 트리 구조를 가진다. 이렇게 HTML에 따라 생성된 DOM은 위에서 설명한 웹 브라우저의 렌더링 과정에 의해 실제 화면에 표현된다. 만약 H..

Node.js 모듈 모듈이란 어플리케이션을 구성하는 개별적 요소를 말하며 주로 기능별로 분리되어 작성된다. Node.js는 commonJS라는 모듈 시스템 방식을 따른다. 하나의 모듈은 파일과 1대1 대응 관계를 가지며 각자의 독립적인 스코프를 가지게된다. module.exports 모듈은 독립적인 파일 스코프를 갖기 때문에 모듈 안에 선언한 모든 것들은 해당 모듈 내부에서만 참조 가능하다. 모듈 안에 선언한 항목을 외부에 공개하여 다른 모듈들이 사용할 수 있게 하고 싶다면 module.exports 객체를 사용하여 모듈을 내보낼 수 있다. // calc.js const add = (a, b) => { return a + b; }; const sub = (a, b) => { return a - b; };..

Node.js Node.js란 Chrome V8 자바스크립트 엔진으로 빌드된 자바스크립트의 런타임으로, 자바스크립트로 작성된 프로그램을 일반 애플리케이션 프로그램처럼 실행시키거나, 서버를 만들고 실행하는데 사용한다. Node.js 사용 이유 자바스크립트는 웹 브라우저에 있는 자바스크립트 엔진에서 동작하는 언어이다. 따라서 크롬, 사파리와 같은 웹 브라우저가 없다면 자바스크립트를 사용할 수 없다. Node.js는 이런 자바스크립트를 웹 브라우저에서 독립 시켜, 터미널에서 자바스크립트를 실행할 수 있도록 해준다. 또한 Node.js를 이용하여 서버를 만들 수 있는데, 이전까지 Server-Client 웹 사이트를 만들 때, 클라이언트 부분은 자바스크립트를 사용하고, 서버 부분은 자바 등 다른 언어를 사용해서..

async & await 콜백 지옥 현상을 해결하기 위해서 프로미스로 비동기 처리를 하더라도 여러 개의 프로미스가 then을 통해 체이닝되며 코드의 가독성이 저하되는 것을 알 수 있다. 이때, async와 await를 사용하여 더욱 편리하고 가독성있는 코드를 작성할 수 있다. async와 await 사용법 함수 앞에 async를 붙이면 해당 함수는 자동적으로 프로미스를 반환하는 함수가 됨 비동기로 처리되는 부분에 await를 붙이면 해당 프로미스가 끝날 때까지 대기 (동기적으로 처리) await은 async가 붙은 함수 안에서만 사용 가능 async 사용 예제 function helloAsync() { return new Promise((resolve) => { resolve("helloAsync"); ..

콜백 지옥 function fn() { setTimeout(() => { console.log('하나'); setTimeout(() => { console.log('둘'); setTimeout(() => { console.log('셋'); }, 0); }, 0); }, 0); } fn(); // 결과 순서 => '하나', '둘', '셋' 자바스크립트는 비동기 처리를 위해 콜백함수를 사용하는데 콜백함수를 반복적으로 사용하는 경우에 콜백 지옥에 빠지게 된다. 콜백 지옥 현상은 코드의 가독성을 떨어뜨리기 때문에 이러한 콜백 지옥을 탈출하기 위해서 프로미스를 사용한다. 프로미스(Promise) 비동기 처리에 사용되는 객체 콜백 지옥 현상이 일어나지 않아 코드의 유지 보수성이 증가 비동기 처리 시점을 명확하게 표..

동기(Synchronous) 순차적으로 태스크를 수행 어떤 작업이 수행중이라면 뒤의 작업은 대기 상태 즉, 블로킹이 발생 비동기(Asynchronous) 병렬적으로 태스크를 수행 동기 방식과 달리 완료 순서가 보장되지 않음 자바스크립트는 기본적으로 한 번에 하나의 작업을 수행하는 동기식 언어이다. 그것은 자바스크립트 엔진의 구조를 이해하면 알 수 있다. 자바스크립트 엔진은 메모리 힙과 콜 스택으로 구성된다. 메모리 힙은 변수와 객체의 메모리 할당을 담당하는 곳이며 콜 스택은 함수가 호출이 될 때마다 순서대로 쌓이는 곳이다. 가장 최근에 쌓인 것부터 실행되어 종료되기 때문에 LIFO 구조이며 동기적으로 동작한다. 자바스크립트의 비동기적 실행 기본적으로 동기적으로 동작하는 자바스크립트지만 웹 브라우저의 성능..

Truthy & Falsy - 자바스크립트는 boolean 타입이 아닌 값을 Truthy(참 같은 값), Falsy(거짓 같은 값)으로 구분한다. - 따라서 조건문이나 반복문의 제어문에서 Truthy는 true로, Falsy는 false로 암묵적 형 변환이 일어난다. - Falsy로 분류 되는 값은 다음과 같고 그 외 값들은 코두 Truthy로 분류된다. - null, undefined, 0, NaN, " " (빈 칸) const getName = (person) => { if (!person) { return "객체가 아닙니다."; } return person.name; }; let person; // undefined const name = getName(person); console.log(name..

자바스크립트 연산자 ==(!=) 와 ===(!==)의 차이 - == 은 타입에 상관없이 값만 같은지 비교, ===은 타입까지 같은지 비교 ?? (NULL 병합 연산자) - ??의 왼쪽 피연산자가 null이거나 undefine인 경우 오른쪽 연산자를 반환하고 그렇지 않으면 왼쪽 피연산자를 반환 // height가 null이나 undefined인 경우, 100을 할당 height = height ?? 100; 함수표현식 - 변수에 값을 할당하는 것처럼 함수 선언문이 변수에 할당하여 함수를 값처럼 사용하는 것 let sayHi = function() { alert( "Hello" ); }; sayHi(); 호이스팅 - 호이스팅이란 코드를 실행하기 전 변수선언 / 함수선언이 해당 스코프의 최상단으로 끌어 올려진..

Disk Crash Scenario disk I/O 과정에서 crash가 발생하는 경우에 대해 살펴보자. 이미 존재하는 파일에 대해 새로운 데이터를 추가하는 경우에는 data bitmap, inodes, data block을 갱신해야한다. 위 세 가지 블록들에 대한 갱신은 원자적(atomic)으로 수행되어야하며, 이때 발생할 수 있는 crash 시나리오는 다음 6가지와 같다. ※ data bitmap과 inodes가 둘다 정상 갱신되거나 둘다 crash되면 consistent 상태로 다시 수행하면 문제를 해결할 수 있어 파일 시스템 상으로는 문제가 없지만 data bitmap과 inodes의 갱신 결과가 다른 경우 inconsistent한 상황이 되어 문제가 발생한다. 1. data block만 정상 갱..