실전 압축 코딩

d.ts 파일이란? 일명 정의 (definition) 파일 이라고 불린다. 자바스크립트에서 다른 라이브러리에 있는 함수를 사용한다고 가정하면, 처음에는 아무런 도움을 받을 수 없다. 어떤 파라미터를 넣어야 할지, 어떤 결과 값이 나오는지 알 수 없고 공식문서를 꼼꼼히 읽으며 찾아봐야 한다. 그러나 요즘 만들어진 라이브러리는 다운만 받아도 IDE 에서 어떤 파라미터를 넣어야 하는지 자동완성 되는 경우가 흔하다. 누군가 매우 고생해서 해당 라이브러리에 쓰일 타입 정의 파일인 d.ts 파일을 전부 작성해놓았기 때문이다. 인자의 타입 반환 타입 등을 다 넣어놓은 파일이다. d.ts 파일이 있으면 코드 자동완성을 통해 생산성 높은 작업을 할 수 있다. -> .d.ts파일은 type을 정의(declare)하기 위해..

script를 불러올때, 변수가 중복의 문제가 있다. 이를 해결하기 위해 모듈이 등장했다. 하지만 이러한 모듈들을 전부 다운로드 받으면, 많은 computing power가 필요하며, 네크워트 자원도 많이 소요된다. 여러개의 파일을 묶어주는 역할을 하는 것이 번들러 이다. [JS] Webpack을 쓰는 이유 | INGG. [JS] Webpack을 쓰는 이유 Webpack은 여러개 파일을 하나의 파일로 합쳐주는 모듈 번들러(Module bundler) 이다. Webpack을 쓰는 이유는 무엇일까? 표준화된 모듈화 기법이 등장한 것은 ES2015부터인데, Webpack… ingg.dev Leejaeyeop/wepack-example (github.com) GitHub - Leejaeyeop/wepack-ex..

CSS 가상 요소 "::before"와 "::after" 완벽 정리 (tistory.com) CSS 가상 요소 "::before"와 "::after" 완벽 정리 가상 요소와 가상 클래스 CSS 가상 요소는 선택자로 선택한 요소의 뒤에 붙여 표기하는 미리 약속된 키워드를 말합니다. 요소의 특정한 부분에 정해진 기능을 하도록 가상 요소 키워드 별로 미리 blogpack.tistory.com ::before 요소 내용 앞쪽에 새 컨텐츠를 추가. ::after 요소 내용 끝에 새 컨텐츠를 추가. ::selection 마우스 드래그로 선택한 텍스트 컨텐츠 영역을 선택. ::marker 목록 아이템 앞에 붙는 마커를 선택. ::first-letter 현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 ..

https://tristan91.tistory.com/521 쿠키, 세션, 로컬 스토리지, 세션스토리지, indexedDB, 캐시 쿠키 쿠키란? 쿠키(영어: cookie)란 하이퍼 텍스트의 기록서(HTTP)의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를 통해 인터넷 사용자의 컴퓨터 tristan91.tistory.com https://hongong.hanbit.co.kr/%EC%99%84%EB%B2%BD-%EC%A0%95%EB%A6%AC-%EC%BF%A0%ED%82%A4-%EC%84%B8%EC%85%98-%ED%86%A0%ED%81%B0-%EC%BA%90%EC%8B%9C-%EA%B7%B8%EB%A6%AC%EA%B3%A0-cdn/ 완벽 정리! 쿠키, 세션, 토..

https://goitgo.tistory.com/25 OSI 7 Layer 과 TCP/IP 4 Layer(TCP/IP Protocol suite) 비교 OSI 7 Layer vs TCP/IP Protocol Suite 1. OSI 7 Layer 개요 ➀ 네트워크 통신을 체계적으로 다루고 있는 ISO 표준은 개방시스템 상호연결 (OSI) 모델 이다. OSI 모델은 1984년에 정의 되었다. ➁ 개방시스템(Open Syste goitgo.tistory.com

지연시간을 줄이고 응답 시간을 더 빠르게 한다. 멀티플렉싱, 헤더 압축, 서버 푸시, 요청의 우선순위를 처리한다. 장점 2: 멀티플렉싱과 서버 푸시 멀티플렉싱: 여러 개의 스트림을 사용하여 송수신 한다., 특정 스트림의 패킷이 손실되어도, 해당 스트림만 영향을 미치고 다른 스트림은 멀쩡하게 동작한다. 서버 푸시: 클라이언트 요청 없이도 html 을 읽으면서 css를 클라이언트에 전송

보호되어 있는 글입니다.

1. dns 로 ip 찾기 2. 3 way handshake 4. 서버에 데이터 요청 (http request) 5. http response 6. w3c 명세에 따라 html css 해석 (parsing) 7. html -> dom tree 8. rendering engine이 css를 만난다 -> html render pause, cssom tree 생성 9. script tag -> -pause >js engine에게 제어권을 넘김. 10. js 코드 해석, 추상 구문 트리(ast) 생성 11. dom tree + cssom tree = render tree --- construction --- 12. 렌더링 엔진의 layout 작업 시작 (render tree node를 화면의 올바른 위치에 표시..

포워드: 클라이언트의 요청을 대신 수행해 준다. 리버스: 서버와 인터넷 사이에 있다. 이터레이터: 여러 가지 자료형의 구조와는 상관없이 이터레이터라는 하나의 인터페이스로 순회가 가능하다. 선언형 vs 명령형 : js는 함수가 일급 객체이므로 객체지향 보다는 함수형 프로그래밍 방식이 선호 된다. 선언형: 함수가 무엇을 풀어내는가에 집중하는 패러다임. '프로그래밍은 함수로 이루어진 것이다' 순수 함수 : 출력이 입력에만 의존한다. 고차 함수: 함수가 함수를 매개변수로 받아 로직을 생성할 수 있다. 조건) 해당 언어가 일급 객체라는 특징을 가져야 한다. -> 특징: 1. 변수나 메서드에 함수를 할당할 수 있다. 2. 함수 안에 함수를 매개변수로 담을 수 있다. 3. 함수가 함수를 반환할 수 있다. 객체 지향 ..

의존성 주입과 제어의 역전: A 클래스에서 B 클래스의 객체를 사용하는 상황을 가정했을때, 일반적인 경우 클래스 b를 직접 참조하고 생성했지만, 중간의 매개체를 하나를 둔다. -> 결국 클래스 a 가 b를 직접 제어하던 관계가 역전 된것이다. 제어의 주체가 a가 아니다. 매개체는 ioc container라고 한다. 팩토리 패턴: 객체 생성 부분을 떼어내 추상화한 패턴, 상위 클래스는 중요한 뼈대, 하위는 객체 생성에 관한 구체적인 내용을 결정. 전략 패턴: 객체의 행위를 바꾸고 싶을때 직접 수정하지 않고, 전략이라고 부르는 캡슐화한 알고리즘을 컨텍스트안에서 바꿔 주면서 상호 교체가 가능하게 한다. 옵저버 패턴: 어떤 객체의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 ..