많은 자바스크립트 프로젝트들이 모노레포로 운영되고 있다. 모노레포는 여러 프로젝트들을 한 군데 저장함으로써 코드 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)을 너무 크게 점유해서 다른 패킷의 흐름을 막을 위험이 있기 때문이다. (대역폭이란) 네트워크에서 이용 가능한 최대 전송 속도로 정보를 전송할 수 있는 단위 시간당 전송량을 말한다. 데이터를 조각내서 패킷으로 보낼 때에는 순서대로 숫자를 붙여서 보낸다. 왜냐하면 네트워크를 통해서 패킷이 전송될 때 순서대로 도착하지 않을 위험이 있기 때문이다. 즉 나누어서 보낸 데이터 패킷을 수신 측에서 다시 조합해서 정상적인 데이터로 만들기 위해서 조립 순서를 적어서 전송하는 것이다. 전기 신호 비트 정보는 전기 신호로 변환되고..
- Total
- Today
- Yesterday
- react
- 리덕스
- Session
- til
- 제네릭스
- package.json
- linkedlist
- Conflict
- Java
- 인스턴스
- oracle
- SQL
- 자바
- youtube data api
- useEffect
- Data Structure
- Prefix Sums
- Redux
- 깃
- jQuery
- 개발 공부
- c언어
- getter
- GIT
- JavaScript
- 알고리즘
- rxjs
- CSS
- 포인터 변수
- this
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |