반응형 전체 글59 프로그래밍 (모던 자바스크립트 Deep Dive) 1.1 프로그래밍이란? 프로그래밍은 컴퓨터와의 커뮤니케이션이며 앞서 필요한 것은 아래와 같다. 요구사항 이해한다는 것은 요구사항을 분해 → 정리 → 순서에 맞게 행위 배열하는 것이다. 문제 해결 방안 정의한다는 것은 컴퓨터가 이해할 수 있도록 문제를 설명해야한다. 이때 필요한 것이 컴퓨팅 사고이다. 프로그래밍 내에서 사용될 모든 개념은 논리적으로 설명되어야 한다. 평가 기준이 없는 것은 프로그래밍에서 유의미하지 않다. 1.2 프로그래밍 언어 우리는 컴퓨터에게 문제를 해결하기 위해 명령을 내려야한다. 그때 필요한 언어는 기계어이다. 기계어를 배워 컴퓨터에게 전달하기에는 어려운 일이기 때문에 우리는 프로그래밍 언어를 사용한다. 이는 사람이 이해할 수 있게 약속된 문법의 형태의 인공언어이며 Syntax(문법).. 2024. 4. 15. ESM (ES Module) feat. Vite JS 파일은 브라우저에서 해석될 수 없다. 모듈은 모듈 스코프를, 변수/함수 스코프를 통해 서로의 파일이 오염되지 않도록 하는 장점이 있다. import, export 를 활용한다. ES6부터 모듈 기능을 제공하기 시작했다. 하지면 IE는 여전히 지원하지 않는다. entry 파일을 기준으로 import한 파일들을 찾아가며 의존성 그래프를 그린다. ES module이 동작하려면 브라우저에서 사용가능하도록 module record라는 데이터 구조로 변환해야한다. 이 변환 과정은 ES6 명세가 아닌 HTML 명세를 따라 구문 분석을 한다. (브라우저 한정) 이런 모듈화 작업은 구성 → 인스턴스화 → 평가 단계로 진행된다. 구성단계에서는 로더가 파일을 불러온다. 파일을 모듈 레코드로 구문 분석한다. 로더는 모듈.. 2024. 4. 15. 브라우저 캐시 캐시는 브라우저에서 서버에 최초 요청 이후 로딩을 더 빠르게 하기 위한 장점이 있다. 그러나 요청에 의해 캐시가 저장되면 이후 변경 내용이 있어도, 사용자 브러우저의 캐시에 의해 캐시를 지우기 전까지 변경 내용의 수정이 일어나지 않을 수 있다. 우리는 header의 cache-control 태그를 이용해 max-age 속성으로 캐시의 수명을 지정할 수 있다. 말만 들으면 max-age=60 으로 설정해놓으면 60초 동안 캐싱된 데이터를 사용하고, 그 이후는 캐싱된 데이터를 사용하지 않고 새 응답을 받는 것 같다. (200을 받을 것같으나) 하지만 이것은 명확한 캐시 수명이 아니다. 60초 이후에도 브라우저는 캐싱된 데이터를 확인하며 캐싱된 데이터가 있다면 304 Not Modified 응답을 준다. 결국.. 2024. 4. 15. 브라우저 대기 시간 Latency 정의 하나의 데이터 패킷이 출발지에서 도착지까지 가는 데 걸리는 시간 대기 시간은 첫 번째 패킷을 받아올 때는 긴 편이다. 첫 번째 패킷의 크기가 14kb로 정해져 있다하더라도 DNS 조회, TLS handshake, TCP negotiation 과정을 거친 후 요청한 패킷을 받아오기 때문이다. 이후에는 이미 네트워크가 연결 되었으니 이러한 과정은 생략된다. 대기시간 측정 방법 브라우저가 자원 요청을 보내는 시간 또는 브라우저가 요청을 보내고, 다시 응답오는 왕복 시간을 측정한다. Network latency 브라우저 요청→ 서버 응답 → 브라우저 해당 자원의 흐름 대기시간 Disk latency 서버 응답 → 브라우저 해당 자원의 흐름 대기시간 브라우저를 이용해서 다양한 네트워크 상태에서 테스트를 할 .. 2024. 4. 15. 이전 1 ··· 8 9 10 11 12 13 14 15 다음 728x90 반응형
