성운

서론보통 브라우저 렌더링 과정은 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 ??..

대상 독자 for of, for in 에 대해서 잘 모르는 개발자  for문이랑 뭐가 다른가요?아주 간단하게 말해서, for of, for in은 더 좁은 범위의 for문이라고 할 수 있습니다. for는 무엇이든 반복하고 싶을 때 사용하죠. 하지만 for of, for in은 사용 대상이 한정되어 있습니다.  특정 사용 대상에 한해서 더 간편하게 for문을 사용하라고 만들어준 문법들입니다.for문이랑 굉장히 비슷하게 생겼습니다. 지금부터 그게 어떻게 편한건지, 사용 대상이 무엇인지 알아보도록 하겠습니다.  for in은 무엇인가요?객체의 key를 순회하기 위한 문법입니다. 사용 대상이 객체인 것이죠. 아래와 같은 형태로 사용합니다.// 포맷for (식별자선언키워드 순회된값 in 객체) { // ...}/..

대상 독자useRef를 잘 모르거나 여러 궁금증을 안고 의심의 눈으로 사용하고 있는 개발자 들어가며프론트엔드 개발을 하면서 useRef라는 훅을 쓸 때가 많습니다. 그러나 이 훅이 왜 만들어진건지, 어떻게 돌아가는건지를 모르고 사용하다보니 쓸 때마다 블랙 박스가 늘어가는 느낌에 영 찝찝한 느낌을 떨칠 수 없습니다. 특히나 왜 DOM을 다루려면 useRef를 사용해야만 하는지, 왜 그런 사용 형태를 갖고 있는 것인지 납득이 되지 않아 항상 답답했습니다. 이번 글에서는 이런 궁금증들을 해소하고.. 명료한 상태로 useRef를 사용할 수 있도록 useRef의 블랙 박스를 조금씩 지워보도록 하겠습니다. useRef는 무엇인가요?렌더링에 필요하지 않은 값을 참조할 수 있도록 만들어진 훅입니다. 그리고 리렌더링 사..

대상 독자Object.entries()를 사용하는데 타입이 any로 찍혀서 답답한 개발자  ts의 타입 추론을 사용하자.타입 자동 추론을 수행해주는 infer 키워드를 사용한다. infer는 ts에서 기본적으로 제공하고 있는 키워드이며 타입을 개발자가 적어주는게 아닌 ts의 타입 추론을 사용하고 싶을 때 작성한다.ts의 타입 추론을 사용하고 싶은 타입 앞에 infer를 붙이면 ts가 추론한 타입이 들어간다. 간단한 실제 예시를 통해 이해해보자. 제네릭으로 배열이 들어오면 배열의 요소 타입을 반환하고, 그냥 타입이 들어오면 그 타입 그대로를 반환하는 타입을 만들어보았다.type Flatten = T extends Array ? Item : Type;type A = Flatten; // numbertype ..

티스토리 블로그에서 새롭게 글 쓰기를 시작하게 되었다! 사실 티스토리는 글을 읽은 적만 있지 실제로 글을 직접 써본 적은 없어서 어떤 느낌일지는 잘 모르겠다. 그래도 새로운 시작이다보니 기분은 좋다.왜 이전?이전한 이유는 여러가지 있는데 제일 영향력이 컸던 이유로는.. 1. 코드 블럭의 색을 검정 배경으로 사용하고 싶었다. 흰 배경은 잘 안읽힌다..2. 독자들이 어디서 유입되는지 알고싶다.3. 블로그 들어오자마자 카테고리가 보였으면 좋겠다.4. 더 독립적인 공간이라는 느낌을 받고싶다. 5. 어그로성 글이 너무 많다. 안보려고 해도 추천 글 목록에 보인다. 그래서 니즈에 부합하는 티스토리로 이전을 하게 되었다.이전 글은 어떻게?이전 블로그에 썼던 글은 순차적으로 티스토리로 이전해올 생각이다.아직은 ui나 ..