Persistence

현상 프로젝트가 한 폴더에 두개 존재하는 상황 project1 / package.json project1 / project2 / package.json project1은 라이브러리고, project2는 데모 폴더로 project1이 빌드된 걸 보고 그걸 임포트해서 데모를 띄우는 식. project2의 package.json 내에서 이런 식으로 가져다 씀. 밑에 react랑 react-dom도 중복된 패키지 방지용으로 https://ko.reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react 문서에 나와있는대로 해결한 것. "dependencies": { "@project1": "file:..", "@types/node": "^12.0.0"..

스코프랑 클로저에 대해 전에도 정리했었지만, 이번엔 렉시컬 환경이라는 개념과 함께 정리하려고 한다. Lexical Environment의 개념 Lexical Environment는 코드 block, function, script를 실행하기 앞서 생성되는 특별한 객체로, 실행할 스코프 범위 안에 있는 변수와 함수를 프로퍼티로 저장하는 객체다. 즉 우리가 소스 코드를 실행하면서 참조가 필요한 변수의 값을 이 Lexical Environment 라는 객체에서 식별자 이름을 키로 찾는다고 보면 된다. 실행 컨텍스트(execution context)와의 관계? 실행 컨텍스트는 실행하고 있는 함수를 트래킹하기 위한 특별한 자료 구조다. 현재 실행하고 있는 함수 내의 현재 변수 상태와 this의 값 등을 저장하고 있..

for of를 적용할 수 있는 객체를 이터러블(Iterable)이라고 부른다. for of 를 적용할 수 있으려면(= 이터러블이려면) 해당 객체는 Symbol.iterator 이라는 메서드를 갖고 있어야 한다. for of를 사용하려면 Symbol.iterator 메서드를 호출한다. 위 메서드는 iterator 를 리턴해야 한다. 이터레이터는 next 메서드를 갖고 있는 객체다. next 메서드를 호출하면 {done: Boolean, value: any} 이런 모양을 가진 객체를 리턴해야 한다. done 프로퍼티 값이 true면 이터레이션이 끝난 것이고, 아니라면 value가 다음 value가 된다. let range = { from: 1, to: 5 }; range[Symbol.iterator] = f..

많은 자바스크립트 프로젝트들이 모노레포로 운영되고 있다. 모노레포는 여러 프로젝트들을 한 군데 저장함으로써 코드 consistency를 쉽게 유지하도록 해준다. 예를 들어 각자 다른 프로젝트 A, B가 각자 다른 레포에 저장되어 있고 B가 A에 디펜던시가 있는 상황을 가정해보자. A의 코드가 업데이트된다면 B에서 사용되고 있는 A는 어떻게 될까? 업데이트된 A의 코드가 리모트 환경에 업데이트가 되지 않았거나, 올라와 있다고 하더라도 B에서 이 최신 코드를 Pull해오지 않는다면 A와 B에서 쓰이는 A 사이의 싱크가 맞지 않게 된다. 모노레포를 사용하여 A와 B를 같은 코드베이스에서 사용하게 된다면 이런 문제를 해결할 수 있다. 다만 모노레포의 단점은 그 만큼 빌드 시간이 오래 걸릴 수 있고(예를 들어 B..

리액트 문서에서는 context를 소개하는 페이지에서 context를 쓰기 전에 component composition에 대해 고려해보라고 권장하고 있다. context는 여러 레벨의 여러 컴포넌트에서 같은 값을 공유하도록 해주므로 props drilling을 피할 수 있고, 불필요한 리렌더링을 피할 수 있다는 장점이 있다. 다만 context에도 단점이 존재하는데, implicit하다. props를 직접 넘겨주는 방법은 코드 상에서 해당 컴포넌트의 input이 무엇인지 확인할 수 있지만 useContext로 컴포넌트 내부에서 값에 접근하게 되면 해당 컴포넌트의 사용처에서는 컴포넌트 내부에서 어떤 값이 쓰이고 있는지 보이지 않는다. 그러므로 그 컴포넌트가 context provider 내부에서 쓰일 것이..

Reconciliation이란 코드에 diff가 생겼을 때 DOM에 반영하는 로직이다. 공식 독스에서 크게 2가지를 중심으로 설명한다. 하나는 루트 엘리먼트의 타입이고, 하나는 key 어트리뷰트다. Type diff of root element 루트 엘리먼트의 type이 다른 경우 DOM element인지 React element인지를 불문하고 트리를 tear down하고 rebuild한다. (e.g. 와 , 와 ) DOM이라면 해당 element를 제거하고 새로 삽입하고, React component라면 unmount했다가 새로 만들어서 mount한다.위 같은 경우 자식 컴포넌트는 동일하지만 root element의 type이 div와 span으로 다르므로, Counter 컴포넌트는 언마운트하고 새로 ..

자바스크립트에서 값을 어떻게 비교하는지 간단하게 짚고 넘어가자면 아래와 같다. 밑으로 갈수록 엄격하다. == 두 개를 비교할 때 타입 변환을 한다. 그리고 IEEE 754를 따르기 위해 NaN과 -0, +0에 대한 특별한 핸들링을 한다. (그래서 NaN != NaN, -0 == +0) === NaN, -0, +0에 관한 핸들링을 포함하여 == 와 동일한 비교를 하지만 타입 변환을 하지 않는다. 객체의 동일성을 비교할 때 reference가 같은지 체크한다. Object.is NaN, -0, +0에 대한 핸들링도 하지 않고 타입 변환도 하지 않는다. NaN, -0, +0에 대한 부분을 제하면 === 와 같다. (e.g. Object.is(NaN, Number.NaN) === true) Ref https:/..

HTML을 다운로드하다가 스크립트 태그를 만나면 HTML은 파싱하는 과정을 중단하고 스크립트를 즉시 실행한다. 만약 외부 스크립트라면 그 스크립트 파일을 다운로드하는 동안 HTML 파싱이 중단된다. 여기에 2가지 문제점이 있다. 스크립트는 스크립트 코드 밑에 있는 DOM element들을 보지 못하므로 핸들링하지 못한다. 만약 스크립트가 아주 크고 이 태그가 페이지 상단에 위치한다면 로딩되는 동안 렌더링 블로킹이 일어나 유저들은 페이지 컨텐트을 보지 못한다. 여기에 대한 workaround로 스크립트 태그를 바디 태그 안의 최하단에 위치시키는 방법도 있다. 그러면 최소한 페이지 컨텐트가 보이고 나서 스크립트 로딩이 시작될 것이다. 다만 이는 미봉책일 뿐이고 HTML이 아주 긴 경우에는 그 만큼 스크립트 ..

Window랑 Document는 같은 것이 아니다. Window는 Document를 포함하고 있다. Window는 브라우저를 켰을 때 맨 먼저 로드되는 전역 객체이다. 스크립트가 실행되고 있는 그 창에 대한 정보를 갖고 있는 전역 객체이다. 그러니까 브라우저를 켰을 때 보이는 그 창 = Window 라고 개념적으로 생각하면 될 듯하다. 예를 들어 window를 콘솔에 쳐보면 이 객체가 기본적으로 갖고 있는 프로퍼티들 중에 innerHeight, innerWidth 등이 있다. 또 이 창이 포함하고 있는 iframes, document도 있다. iframe 또한 하나의 window로 간주되며, 하위에 있는 iframe은 window.iframes로 접근할 수 있다. 그리고 이 iframe들은 documen..

물리 계층: 데이터를 전기 신호로 변환하기 1계층 물리 계층(Physical Layer): 시스템 간의 물리적 연결과 전기 신호를 변환 및 제어 비트로 된 디지털 데이터를 실제로 네트워크를 통해 전송하려면 전기 신호로 변환이 되어야 한다. 이 작업은 OSI 모델의 최하단 계층이었던 물리 계층에서 일어난다. 비트열을 전기 신호로 변환하는 작업은 랜 카드 가 한다. 즉, 비트열은 랜카드를 통해 전기 신호로 변환되어 전송되고 상대방은 받은 전기 신호를 다시 비트열로 복원하는 것이다. 네트워크의 전송 매체 네트워크의 전송 매체는 데이터가 흐르는 물리적인 선로를 말한다. 종류는 크게 유선, 무선으로 나뉜다. 유선의 예시: 트위스트 페어 케이블(랜 케이블), 광 케이블 등 무선의 예시: 라디오파, 마이크로파, 적외..

패킷 패킷은 네트워크를 통해 전송되는 작은 데이터 조각 단위이다. 큰 데이터가 있더라도 작게 패킷으로 나누어서 보내는 것이 규칙이다. 왜냐하면 큰 데이터를 그대로 보내면 대역폭(bandwidth)을 너무 크게 점유해서 다른 패킷의 흐름을 막을 위험이 있기 때문이다. (대역폭이란) 네트워크에서 이용 가능한 최대 전송 속도로 정보를 전송할 수 있는 단위 시간당 전송량을 말한다. 데이터를 조각내서 패킷으로 보낼 때에는 순서대로 숫자를 붙여서 보낸다. 왜냐하면 네트워크를 통해서 패킷이 전송될 때 순서대로 도착하지 않을 위험이 있기 때문이다. 즉 나누어서 보낸 데이터 패킷을 수신 측에서 다시 조합해서 정상적인 데이터로 만들기 위해서 조립 순서를 적어서 전송하는 것이다. 전기 신호 비트 정보는 전기 신호로 변환되고..

자바스크립트 객체의 property name은 string이거나 Symbol이다. 그러므로 string이나 Symbol이 아닌 다른 value로 객체의 property에 접근한다면 string으로 강제형변환된다. let object = {}; object['1'] = 'value'; console.log(object[1]); // 'value' 위에서 bracket notation으로 object[1]로 접근할 때, 1은 number 타입이므로 string으로 강제형변환된다. 즉 object['1'] 을 호출한 것과 동일하게 되어 'value' 를 출력한다. (참고) bracket notation이 아닌 dot notation으로 접근할 때는 syntax error가 발생한다. (e.g. object.1..

자바스크립트로 알고리즘을 풀다가 tc 하나가 계속 시간 초과가 나와서, 정말 혹시나 하고 양수를 내림하는 부분에 parseInt 대신 Math.floor로 고쳤더니 바로 통과가 되었다. 자바스크립트로 positive decimal number를 내림할 때 Math.floor랑 parseInt 를 사용할 수 있는데, 둘 중에 하나를 택해야 한다면 Math.floor 를 사용하자. 왜냐면 얘가 훨씬 더 빠르다. 그리고 Math.floor 보다는 ~~ 라는 연산자를 사용하면 더 빠르다. 이 사이트 에서 퍼포먼스 테스트를 해볼 수 있는데, Math.floor가 parseInt보다 훨씬 빠르고, ~~ 연산자가 Math.floor 보다 조금 더 빠르다. 참고로 ~ tilde 연산자는 Bitwise NOT 이라는 자..

현상 var mySet = new Set(); ['bar', 'baz'].forEach(mySet.add); 이 현상은 꼭 Set이어야 하는 것은 아니고, 콜백 내부에서 this를 사용하고 있는 케이스에서 문제가 된다. forEach문이나 map에는 첫번째 인자로 콜백을 넘겨주고 두 번째인자로 this를 넘겨주도록 되어있는데, 만약 값을 넘겨주지 않으면 두 경우 모두 undefined 로 설정된다. 그러므로 콜백으로 넘겨준 메서드 내에서 this가 사용되고 있는 경우, 참조하는 this가 undefined가 되어 정상적으로 실행되지 않는다. 해결 방법 명시적인 바인딩 var mySet = new Set(); ['bar', 'baz'].forEach(mySet.add.bind(mySet)); Arrow 함..

회사에서 redux, rxjs, redux-observable을 사용하고 있는데 처음엔 왜 이런 복잡한 걸 쓰나 싶었지만 쓰다보니 또 편리한 점도 있고 해서, 한 번 정리하고 넘어가려고 쓰는 포스팅. 리덕스란 리덕스는 예측 가능한 상태 컨테이너다. (라고 공식 도큐먼트에 써있다) 여기서 예측 가능하다는 것이 중요하다. 상태가 앱의 여기저기에서 변화하고, side effect가 발생하다보면 상태가 어떻게 될지 예측하기 힘들어진다. 리덕스는 action과 reducer를 통해서 일정한 단방향으로 변화를 전달함으로써 상태 흐름을 예측할 수 있게 해준다. action이란 일어난 일 또는 일어나야만 하는 일(액션)을 묘사한 것이다. 예를 들어 TODO앱을 만들 때 가장 기본적인 기능이 TODO를 추가하는 것이므로..