IT/web35 [http] turnnel https://en.wikipedia.org/wiki/HTTP_tunnel 페이지를 의역한 글입니다. 개념방화벽이 포함된 제한된 네트워크 사이에 두대의 컴퓨터가 네트워크 링크를 만드는데 사용터널은 프록시 처럼 중재자 역활이였다. 설명터널링은 제한된 네트워크에서 지원되지 않는 프로토콜을 이용하여 통신할 수 있도록 해주었다.터널링은 http connect method를 이용한다. 어떻게 동작하냐면, 클라이언트는 http proxy server에게 도착지점과 tcp 커넥션을 연결하라고 부탁한다. 그 서버는 클라이언트 자격으로 커넥션을 만든다. 커넥션이 맺어지면, 프록시 서버는 클라이언트로 부터 tcp stream을 교환한다. 첫 요청은 http였지만, 추후 서버는 tcp connection을 프록시 하게된다... 2024. 5. 10. [http] MIME 개념통신 시 데이터 종류를 명시 특징모든 http 객체에 mime이 포함웹브라우저는 응답을 받으면 해당 응답에서 mime을 통해 데이터 종류 확인특별한 포맷일 경우 외부 플러그인을 실행 포맷response header에 content-type과 content-lengh를 확인 html 문서일 경우Content-Type: text/html; charset=UTF-8Content-Length: 8235 js file일 경우Content-Type: application/javascriptContent-Length: 8235 2024. 5. 10. [FE] async / await 아래 Youtube 영상의 내용을 거의 그대로 가져온 페이지입니다.문제가 될 경우 삭제하겠습니다.async항상 promise 를 반환promise가 아닌 값을 반환하더라도 promise로 감싸여서 반환 awaitasync 함수안에서 promise가 처리될 때까지 기다린 후 값을 받아온다.promise가 저리 되는 동안 엔진이 다른일(다른 스크립트 실행, 이벤트 처리 등)을 할 수 있기 때문에 cpu 리소스가 낭비되지 않는다. 개발 팁 중간 과정에서는 async/await가 없어도 괜찮다.간단하게 then으로 처리할 수 있는 경우에도 없앨 수 있다. async/await는 기존 비동기처리가 주는 불편함을 해소하기 위해 등장한 만큼, 어디선가 최소 한번은 async/await를 쓰는게 좋다.그렇지만 중간 과.. 2024. 4. 29. [http] gzip 테스트 웹 성능에 필수 요소인 gzip 압축에 대해 알아보자압축 시 손실이 없고 웹서버에서 압축하고 브라우저에서 푼다. 네트워크 비용을 최소화 하기 위한 노력이다. Request Header에 Accept-Encoding: gzip으로 설정하면 클라이언트가 gzip으로 압축된 컨텐츠를 내려줘도 이해할 수 있다라는 뜻이고, 이걸 받은 서버는 content neogitiation을 통해 제안받은 인코딩 타입 중 하나를 선택해서 Content-Encoding: gzip 으로 내려준다. gzip으로 요청했을 때와 plain text로 요청했을 때 응답을 비교해보자 평문 요청curl -H "Accept-Encoding: identity" https://map.yahoo.co.jp/v2/place/vwRR.. 2024. 4. 24. [css] Block Formatting Context (BFC) 웹 페이지의 시각적 CSS 렌더링의 일부를 형성하는 구역으로, 블록 박스의 레이아웃이 발생하는 범위를 정의합니다. BFC는 그 안의 블록 레벨 요소들이 어떻게 배치되며, 그 요소들 간의 관계와 상호작용을 어떻게 처리할지 결정합니다. BFC 생성 조건 BFC는 다음과 같은 조건 중 하나 이상이 충족될 때 생성됩니다: - `float` 속성이 `none`이 아닌 요소 - `position` 속성이 `absolute` 또는 `fixed`인 요소 - `display` 속성이 `inline-block`, `table-cell`, `table-caption`, `flex`, `grid` 등인 요소 - `overflow` 속성이 `visible`이 아닌 블록 박스 - `contain` 속성이 `layout`, `co.. 2024. 4. 22. [css] :nth-child :nth-child 해당 가상 클래스를 선언한 부모의 기준으로 자식을 선별하기에 형제간에 어떠한 요소가 추가되면 망한다. 국가 리스트에서 짝수 번째 있는 나라에만 배경색을 추가하려 했지만, div요소가 상위체 추가되면서 의도와 다르게 코딩 되었다. :nth-of-type 그래서 다안으로 :nth-of-type이다.이건 요소 tag 기준에 따라 설정되지만 여전히 헛점은 있다 of 이 문법을 사용하면 더 복잡한 코딩을 할 수 있다. https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child :nth-child() - CSS: Cascading Style Sheets | MDN The :nth-child() CSS pseudo-class matches eleme.. 2024. 4. 22. 이전 1 2 3 4 5 6 다음
