Earn this, Earn it.

HTTP1.1과 2.0의 차이 HTTP1.1 하나의 커넥션당 하나의 요청을 처리하도록 되어있어서 동시 전송이 불가능하다. 그렇기 때문에 HTTP 안에 다수의 리소스(CSS, JS, Images)를 처리하려면 요청할 리소스 갯수에 비례해서 Latency(대기 시간)이 길어지게 된다 HTTP2.0 하나의 커넥션으로 동시에 여러 개의 메세지를 주고 받을 수 있으며, 응답은 순서에 상관없이 stream으로 주고 받는다. Connection Keapp-Alive, Pipelining의 개선이 이루어졌다. URL에 www.example.com 을 을 쳤을 때 일어나는 일들을 설명하시오 웹 브라우저가 URL을 해석한다. scheme:[//[user:password@]host[:port]][/]path[?query][..

오늘은 클라이언트 최적화에 대해서 아는 것을 제외하고 모르는 것 위주로 찾아보면서 습득한 내용을 바탕으로 기록할 것입니다. 따라서 최적화에 대한 전반적인 내용을 담고 있지 않음을 알립니다. defer/ async 평소 맨날 헷갈리는 둘의 사용법에 대해서 알아봤습니다. 아래 그림이 매우 잘 나타낸 것 같아서 그림으로 대체합니다. 공통점 - 스크립트를 다운로드 하는 동안 HTML 파싱이 중단되지 않는다 차이점 - async는 스크립트 다운로드 후 곧바로 실행하고 -defer는 스크립트 다운로드 후 HTML 파싱이 다 끝난 후에 실행한다. SSR과 CSR에 대해 이것 또한 그림으로 대체하겠습니다. 다음에는 리액트 훅 중에, useCallback, useMemo, useEffect 리액트 lazy import ..

OSI 7계층 중 다른 계층에 대한 포스팅은 아래 링크를 참고해주세요! :) 물리, 데이터 링크 계층 : https://hanastro.tistory.com/51 네트워크 계층 : https://hanastro.tistory.com/45 전송 계층 : https://hanastro.tistory.com/54 네트워크 계층의 역할과 네트워크간의 연결에 대해 알아보겠습니다! OSI 7계층이란? 네트워크계층의 역할은? 네트워크 간의 통신을 가능하게 하는 것을 말합니다. 추가로 서로 다른 네트워크 간에 데이터를 전송하려면 라우터가 필요합니다. 라우터란? 간단한 기능만 알아보면, 데이터의 목적지가 정해지면 해당 목적지까지 어떤 경로로 가는 것이 좋은지 알려주는 기능을 합니다. 여기서 필요한게 바로 IP주소인데요 ..

프로젝트에 대해선 Github Link 에서 확인해볼 수 있습니다. :) 이번 프로젝트에서는 WebRTC라는 최근 핫한 기술을 적용해봄으로써 기술적 도전을 해보기로 했습니다. 제일 처음으로 WebRTC API와 바닐라 JS만을 이용해 구현해봤는데, 서버측 인프라가 충분치 않은 환경에서 Mesh구조로 구현할 수 밖에 없었고, 이와 같은 Mesh 구조는 다중 사용자가 이용하는 저희 프로젝트에서는 적합하지 않다고 판단했습니다. 그래서 저희는 Agora SDK를 이용하기로 하였는데 리액트 관련 예제가 없어서 어려움을 겪었기 때문에 제가 공식문서를 공부하면서 정리한 튜토리얼을 공유해볼까 합니다.😁 최대한 많은 블로그와 공식문서를 참고했으나 요약하는 과정에서 잘못 해석된 내용이 있을 수 있습니다. 잘못된 점이 있으..

데이터베이스를 사용하는 이유 DB가 있기 이전에는 파일 시스템을 이용했다. 이때 각 파일 단위로 저장하였는데 데이터 종속성 문제와 중복성, 무결성 문제가 대두되었다. 데이터베이스의 성능 DB의 성능 이슈는 디스크 I/O를 어떻게 줄이느냐에서 시작된다고 한다. 데이터를 읽는데에 디스크 헤더를 움직여서 읽고 쓸 위치로 옮기는 등의 성능을 통해 결정된다고 볼 수 있다. 때문에 순차 IO가 랜덤 IO보다 빠르다. 하지만 현실에서 대부분의 IO작업은 랜덤IO이다. 이런 랜덤IO를 순차IO로 바꿔서 실행할 수는 없을까? 이런 생각에서부터 시작되는 쿼리 튜닝은 랜덤 IO 자체를 줄여주는 것이 목적이다. 인덱스 인덱스란 무엇인가? 인덱스는 말 그대로 책의 색인이라고 볼 수 있다. 이 비유를 그대로 가져와서 인덱슬르 살..

파이썬의 타입 힌트 타입스크립트를 공부하다보니 파이썬에서도 타입 힌드라는 것을 지원한다는 것을 알게되었다. (PEP 484 문서에 추가됨) 이 기능은 파이썬 버전 3.5부터 사용할 수 있으며, '타입에 대한 힌트'를 주는 것이라 볼 수 있다. def fn(a: int) -> bool: ... 위와 같이 타입 힌트를 사용하게 되면 함수의 파라미터 a가 정수임을 분명하게 알 수 있으며 리턴 값으로 True 또는 False를 리턴할 것이라는 점도 확실히 알 수 있다. 다만 이는 타입 힌트일 뿐, 다음과 같이 사용할 수도 있다. a: str = 1 이에 대해서 타입 힌트에 대한 오류가 있는지 없는지 자동으로 확인해주는 mypy를 사용하면 타입 힌트가 잘못 지정된 경우 Incompatible return valu..

이진 검색(Binary Search)이란? 정렬된 배열에서 타겟을 찾는 검색 알고리즘이다. 이진 검색은 값을 찾아내는 시간 복잡도가 O(log n)이라는 점에서 대표적인 로그 시간 알고리즘이며, 이진 탐색 트리 (Binary Search Tree)와도 유사한 점이 많다. 그러나 이진 탐색 트리가 정렬된 구조를 저장하고 탐색하는 '자료구조'라면, 이진 검색은 정렬된 배열에서 값을 찾아내는 '알고리즘' 자체를 지칭한다. 이진 탐색 트리는 1억 개의 아이템도 단 27번이면 모두 찾아낼 수 있다... 또 다른 유의점은 2^n은 금방 커질 수 있다는 것이다. 27번째 수부터 1억이 넘어가기 시작하고 기하급수적으로 커진다. O(2^n)은 얼핏 보면 O(n^2)과 비슷해 보이지만 실제로는 훨씬 더 크므로 시간 복잡도..

useState : 상태관리 const [todos, setTodos] = useState(); useEffect : 렌더링 이후 사이드 이펙트 처리 (login, fetch etc) 여러번 쓸 수 있음 (리액트 공식문서에 따르면) 비동기 함수의 경우 가져와서 써라! (직접 쓰지 말 것) useEffect(()=> ... ,[]) 2번째 인자에 빈 배열을 넣으면 초기에만 콜백을 실행한다. 2번째 인자인 배열에 state를 넣으면 그 state의 변화를 관찰하여 콜백이 실행된다(옵저버 패턴인듯?) 커스텀 훅 별도의 재사용 가능한 함수로 분리해서 쓰기 위해 사용. 이름을 use~~로 하면 리액트가 알아서 useEffect를 적절하게 실행해준다. useFetch = async (callback, url) =>..