성운

서론보통 브라우저 렌더링 과정은 DOM -> CSSOM -> render 정도로 이해되곤 합니다. 최근에 virtual DOM의 최적화 방식을 접하면서 그럼 '모던 브라우저들은 최적화에 아예 손을 놓고있나' 생각이 들었습니다. 다만 최적화에 대해 공부하려면 원래 어떻게 돌아가는지부터 알아야하기 때문에 이렇게 공부하게 되었습니다.너무 깊은 내용은 추상화해서 작성하였습니다.브라우저의 프로세스브라우저를 켜게 되면 여러 프로세스가 함께 실행됩니다. 싱글 스레드인 js와는 다르게 말이죠.실행되는 여러 프로세스는 다음과 같습니다.(크롬 작업 관리자)(viz process = visualization(GPU) process)위 작업들을 보면 렌더러 프로세스는 탭마다 할당되어있고, GPU와 브라우저 프로세스는 하나만 ..

들어가며실행 컨텍스트는 프론트 개발을 시작하고.. 입문서인 코어 자바스크립트를 읽을 때 처음으로 마주했던 개념입니다. 그때는 처음 보는 개념이라 머릿속에 마땅히 비슷한 개념도 없었고, 개발하면서 자주 마주치는 내용도 아니라서 이런 키워드들이 있구나 하며 넘겼는데요.얼마 전 우테코안의 모 크루가 재밌는 걸 공부하고 있길래 보니 이런 질문을 제게 하더라구요."Lexical Environment와 Variable Environment의 차이가 뭘까?"분명 들어본 키워드지만 제대로 답을 하지 못했고 호기심이 발동해 저 질문에 대한 답을 찾아보게 되었습니다.주의실행 컨텍스트와 초면이신 독자님은 이 글이 어려우실 수 있습니다.ecma 스펙을 읽어도 자세히 나와있지 않고, 인터넷에는 with라는 지금은 사용되지 않는..

들어가며지금 만들고 있는 프로젝트에서 눈덩이를 굴리는 인터렉션을 넣으려고 합니다. 대략적인 시안은 이렇습니다.  필요한 것은 바닥과 하늘, 그리고 눈덩이 굴리기 인터렉션 입니다.  바닥과 하늘길다란 plane과 배경으로는 drei라이브러리의 Stars, Skys를 사용해 간단하게 밤하늘을 구현했습니다. const SnowBallPage = () => { return ( );};const NightSky = () => { return ( );}; Sky에서 sunPosition을 지하(0, -1, 0)로 두면 그럴듯한 밤하늘이 됩니다. 빠르게 하늘..

https://www.acmicpc.net/problem/1967 처음엔 플로이드로 접근했는데 메모리 초과가 났다.  문제 풀이를 찾아보니 다음과 같은 풀이법을 갖고 있었다.1. 아무 위치에서부터 가장 긴 거리를 갖고 있는 노드를 찾는다.2. 1에서 찾은 노드에서부터 가장 긴 거리의 노드를 찾는다.3. 1과 2에서 찾은 노드의 거리가 지름이다. 나는 1번에 대해서 이해가 안갔다. 그냥 임의의 점 하나에서부터 가장 긴 거리를 갖는 노드가 지름의 한 점인 노드가 된다는건 자명한 사실인가? 그렇지 않은 경우도 있지 않을까 싶었다.  그래서 그렇지 않을 경우를 생각해보고 모두 다 반박할 수 있다면 1번은 자명해진다..  그렇지 않을 경우는 4가지 존재한다. 풀어서 말하면 아무 위치에서부터 가장 긴 거리의 노드를..

컴퓨터에서의 실수컴퓨터에서 실수를 표현하는 방식은 고정 소수점, 부동 소수점 두 가지 방식이 존재합니다. 그러나 고정 소수점의 표현 범위가 너무 작아 큰 소수를 표현할 수 없기 때문에 부동 소수점이 보통 더 자주 사용됩니다. 그래서 부동 소수점에 대한 연산, 표현 등에 대해서는 IEEE 754표준이 정의되어 있으며, 대부분의 프로그래밍 언어가 이 표준을 준수하고 있습니다.  그리고 javascript도 이 표준을 준수하고 있고, JS의 자료형 중 Number 는 이 표준을 준수하는 배정밀도 부동 소수점 방식입니다. 고정 소수점고정 소수점은 앞에서 표현할 수 있는 범위가 넓지 않다고 했습니다. 32 비트 단정밀도 고정 소수점의 경우 1/15/16으로 부호부/정수부/실수부로 나뉩니다. 정수부로 소수점 왼쪽의..

들어가며둘의 차이를 명확하게 구분하여 사용하지 않았던 것 같아 글로 정리하게 되었습니다. OR 연산자연산자의 좌항이 falsy한 값일 경우 우항을 반환하는 연산자입니다.||// 사용 예시. 모두 hi를 출력한다.console.log(false || 'hi'); console.log(0 || 'hi');console.log(undefined || 'hi'); js에서 falsy한 값은 대표적으로 false, 0, '', null, undefined, NaN 등이 있습니다. 이런 값이 좌항에 있는 경우 우항의 값을 반환하게 됩니다.nullish 연산자연산자의 좌항이 null, undefined인 경우 우항을 반환하는 연산자입니다.??// 사용 예시. 모두 hi를 출력한다.console.log(null ??..