오꾸오꾸(오늘도 꾸준히 오랫동안 꾸준히)

실행할 코드에 제공할 환경 정보를 모아놓은 객체 실행 컨텍스트 객체는 활성화되는 시점에 VariableEnvironment, LexicalEnvironement, ThisBinding의 정보를 가집니다. VariableEnvironment와 LexicalEnvironement는 동일한 내용으로 구성이 되지만 LexicalEnvironement는 함수 실행 도중에 변경되는 사항이 즉시 반영, VariableEnvironment는 초기 값을 유지 LexicalEnvironement는 매개 변수명, 변수의 식별자, 선언한 함수의 함수명 등을 수집하는 environmentRecord와 직전 컨테스트의 LexicalEnvironement 정보를 참조하는 outerEnvironmentReference 호이스팅은 e..

HTTPS는 HTTP와는 달리 애플리케이션 계층과 전송 계층 사이에 신뢰 계층인 SSL/TLS계층을 넣은 신뢰할 수 있는 HTTP를 말합니다. 이를 통해 통신을 암호화합니다. SSL/TLS 전송 계층에서 보안을 제공하는 프로토콜 클라이언트와 서버가 통신할 때 SSL/TLS를 통해 제3자가 메시지를 도청하거나 변조하지 못하도록 합니다. SSL/TLS는 보안 세션을 기반으로 데이터를 암호화하며 보안 세션이 만들어질 때 인증 매커니즘, 키 교환 암호화 알고리즘, 해싱 알고리즘이 사용됩니다. 보안 세션 보안이 시작되고 끝나는 동안 유지되는 세션을 말하고, SSL/TLS는 핸드세이크를 통해 보안 세션을 생성하고 이를 기반으로 상태 정보 등을 공유합니다. 클라이언트 -> 서버 { +keyShare } 클라이언트

인덱스 데이터를 빠르게 찾을 수 있는 하나의 장치 인덱스와 B-트리 인덱스는 B-트리라는 자료구조로 이루어져 있습니다. 이는 루트 노드, 리프 노드, 그리고 루트 노드와 리프 노드 사이에 있는 브랜치 노드로 나뉩니다. 루트 노드와 리프 노드 예를들어 A, B, C, D, E에서 E를 탐색해야 한다면 선형 탐색을 하였을 경우 5번을 탐색해야 하지만 노드들로 나누면 2번만에 리프 노드에서 찾을 수 있습니다. 인덱스가 효율적인 이유와 대수 확장성 인덱스가 효율적인 이유는 효율적인 트리구조와 트리 깊이의 대수확장성 때문입니다. 대수확장성이란 트리 깊이가 리프 노드 수에 비해 매우 느리게 성장하는 것을 의미 기본적으로 인덱스가 한 깊이씩 증가할 때마다 최대 항목의 수는 4배씩 증가 트리 깊이 인덱스 항목의 수 3..

대기열, 캐싱, DNS, ARP, 초기연결을 거쳐 컨텐츠를 다운받게 되고 이후 브라우저렌더링 과정을 거쳐 네이버라는 화면이 나타나게 됩니다. 또한 이러한 과정이 비캡슐화, 캡슐화과정을 거쳐서 이뤄지게 됩니다. 대기열 브라우저는 주소창에 입력에 대한 요청을 대기열에 넣습니다. 이 때 HTTP/1.0과 HTTP/1.1의 경우 오리진당 6개의 병렬적인 TCP연결만을 허용하며 HTTP/2의 경우 스크림 등을 통해 HTTP1.x 헤드라인 차단 등을 해결합니다. 그 다음 캐싱이 일어납니다. 캐싱 요청된 결과값을 저장하고 그 값을 다시 요청하면 다시 제공하는 기술입니다. 공유 프록시 캐시와 브라우저 개시로 나눠집니다. 브라우저 캐시: 쿠기, 로컬스토리지 공유 프록시 캐시: 프록시 서버가 캐싱을 하는 것을 말합니다. ..

웹 소켓(Web Socket)이 있기까지 전형적인 브라우저 렌더링 방식은 HTTP 요청(HTTP Request)에 대한 HTTP 응답(HTTP Response)을 받아서 브라우저의 화면을 깨끗하게 지우고 받은 내용을 새로 표시하는 방식입니다. 내용을 지우고 다시 그리면 브라우저의 깜빡임이 생기게 됩니다. 보다 쉽게 상호작용하는 웹 페이지를 만들려면 브라우저와 웹 서버 사이에 더 자유로운 양방향 메시지 송수신(bi-directional full-duplex communication)이 필요합니다. 그래서 HTML5 표준안의 일부로 WebSocket API(이후 WebSocket)가 등장했습니다. WebSocket 프로토콜 브라우저는 "Upgrade: WebSocket" 헤더 등과 함께 랜덤하게 생성한 키를..

자바스크립트 데이터 타입 : 기본형(불변 값), 참조형(가변 값) 변수: 변경 가능한 데이터가 담길 공간 식별자: 그 변수의 이름 변수를 선언하면 메모리의 빈 공간에 식별자를 저장하고 그 공간에 undefined를 할당 변수 할당 별도의 메모리 공간에 데이터를 저장하고 그 메모리 주소를 변수의 값 영역에 할당 참조형 데이터를 할당하고자 할 경우 힙영역에 데이터를 저장하고 그 힙영역의 메모리 주소를 변수가 선언된 메모리에 저장 그 메모리 주소를 식별자와 연결합니다. 이렇게 할당 과정이 복잡한 이유는 더 자유롭게 메모리를 관리하기 위함입니다. 참조형 데이터를 불변값으로 사용하기 위해서는 내부 프로퍼티를 일일이 복사하면 됩니다.(깊은 복사) '없음'을 나타내는 undefined와 null이 있는데 자바스크립트..

재사용할 css선언하는 기능입니다. @mixin large-text { /* 선언 */ font: { size: 22px; weight: bold; family: sans-serif; } color: orange; &::after { content: '!!'; } span.icon { background: url('/images/icon.png'); } } h1 { @include large-text; /* 사용 */ } div { @include large-text; } 가변 인수 입력할 인수의 개수가 불확실한 경우가 있습니다. 그럴 경우 가변 인수를 사용할 수 있습니다. /* 인수를 순서대로 하나씩 전달 받다가, 3번째 매개변수($bg-values)는 인수의 개수에 상관없이 받음 */ @mixin b..

.section { width: 100%; .list { padding: 20px; li { float: left; } } } & (상위 선택자 참조) 부모 선택자를 선택할 때 사용합니다. .btn { position: absolute; &.active { color: red; } } .list { li { &:last-child { margin-right: 0; } } } & 키워드가 참조한 상위 선택자로 치환되는 것이기 때문에 다음과 같이 응용할 수도 있습니다. SCSS .fs { &-small { font-size: 12px; } /* 이름을 새로 지정하는 방법 */ &-medium { font-size: 14px; } &-large { font-size: 16px; } } CSS .fs-small..

레이어를 어떻게 불리하면 좋은지 엣지케이스는 어떻게 처리하는지 객체지향 프로그래밍을 어떻게 사용하는지 알고싶지만 그렇게 심도있는 정보를 주는 곳을 찾을 수가 없어 아쉬울 때가 많다. 어떻게 하면 넥스트 레벨로 나아갈 수 있을까?

Sass는 css에 변수 개념을 도입해줍니다. 변수로 사용 가능한 형태는 숫자, 문자열, 폰트, 색상, null, list, maps가 있습니다. 변수를 사용할 때는 php같이 $문자를 사용합니다. SCSS $color-primary: #e96900; $url-images: '/assets/images/'; $w: 200px; .box { width: $w; margin-left: $w; background: $color-primary url($url-images + 'bg.jpg'); } 유효 범위 SCSS의 변수엔 변수 범위가 있습니다. 변수를 특정 selector에서 선언하면 해당 selector에서만 접근이 가능합니다. 선언된 블록({})내에서만 유효범위를 가집니다. SCSS $color: #33..