본문 바로가기

전체 글116

[Browser] 브라우저에 url을 입력했을 때 브라우저 주소창에 url을 입력 했을 때 과정1. 브라우저 주소창에 url입력브라우저는 url을 해석하여 프로토콜, 도메인 이름, 경로, 쿼리 매개변수 등을 추출2. DNS 조회브라우저는 입력된 도메인 이름을 기반으로 DNS 서버에 질의하여 해당 도메인 이름에 대응하는 IP주소를 탐색3. TCP 연결IP주소가 확인되면 브라우저는 서버와 TCP연결을 설정, 신뢰성 있는 데이터 전송을 보장하기 위해서3-way 핸드셰이크 과정을 통해 브라우저와 서버 간 연결을 설정4. HTTP/HTTPS 요청TCP 연결이 설정되면, 브라우저는 웹 서버에 HTTP 또는 HTTPS 요청을 보냄.요청에는 사용자가 입력한 url 경로와 필요한 추가 헤더 정보들이 포함.5. 서버 응답서버는 요청을 받아들이고, 요청된 자원을 준비한 후.. 2024. 7. 24.
[JS] Babel 바벨이란,구형 브라우저나 환경에서 ES6 이상의 기능들을 사용하기 위해서 이전 버전의 자바스크립트 버전으로 변환해주는 는 도구.es6는 2015.06년도에 등장,브라우저들은 언제 적용?크롬 - 2016.05파이어폭스 - 2017.03마소 엣지 - 2016.08사파리 - 2016.09오페라 - 2016.06IE - X1년에서 2년 정도의 기간 소요되었는데 이 기간 동안 사용을 못 했을까?babel을 이용해서 브라우저들의 환경에 맞게 es6를 es5 로 다운그레이드하여 사용.babel 사용법,const fn = () => "바벨";​위 화살표 함수를 트랜스파일링을 하려면 3가지 필요.@babel/core : 바벨의 핵심적인 기능@babel/cli : 터미널로 바벨을 사용@babel/plugin-transfo.. 2024. 7. 24.
[JS] Promise Promise는 callback, async/await와 마찬가지로 비동기 작업을 처리하는 자바스크립트 객체이다.es6에서 callback 지옥을 해결하기 위해 도입되었다.Proimise는 비동기 작업을 실행할  fulfilled (이행), pending (대기), rejected (거부) 이 3가지의 상태를 가진다.then, catch, finally 메서드를 이용해 체이닝 형태로 작업이 처리가 가능하며, Promise가 fulfilled상태에서 resolve가 호출되면 then 블록이 실행된다.반대로 Promise가 rejected가 되면 catch 블록이 실행된다.마지막으로 finally는 반드시 실행되는 블록이다.Promise의 메서드로는 all, race, allSettled, reject, a.. 2024. 7. 22.
[JS] 클로져 (Closure) 클로져란, 함수와 그 함수가 선언된 렉시컬 환경의 조합이다.클로져의 특징으로는 정보 은닉, 상태 유지, 데이터 무결성 유지 등이 있고,외부 함수가 내부 함수에 접근 하지 못 하는데 이를 통해 정보 은닉, 데이터 무결성 유지가 가능하다.내부 함수는 외부 함수에 접근할 수 있고, 외부 함수가 동작이 끝나도 내부 함수는 외부 함수에 접근이 가능하다.이를 통해 상태 유지가 가능하다.내가 알고 있던 클로져의 내용클로져란, 함수와 그 함수가 선언된 렉시컬 환경의 조합이다.클로져의 특성으로는 정보 은닉, 상태유지, 데이터 무결성 유지 등이 있다.외부 함수가 내부 함수에 접근 하지 못 하기 때문에 정보 은닉이 가능하고,내부 함수는 외부 함수에 접근할 수 있고, 외부 함수가 동작이 끝나도 내부 함수는 외부 함수의 변수에.. 2024. 7. 17.
[Browser] Reflow, Repaint 리플로우와 리페인트가 일어나는 시점은 dom요소에 직접적인 변경이 있을 때 일어나며 리플로우가 발생하면 리페인트는 반드시 발생한다. 리플로우를 발생시키는 요인으로는 margin, position등이 있고, 리페인트를 발생시키는 요인으로는 background, color 등이 있다. 리플로우는 주로 cpu가속을, 리페인트는 gpu가속을 사용한다.기존 reflow와 repaintdp에 관해서 알고 있던 내용Reflow는 레이아웃을 다시 계산하는 과정이다. 레이아웃을 다시 계산한다는 것은 DOM트리가 변경되거나 CSSOM트리가 변경되어 렌더 트리가 재생성되는 것으로 리플로우가 자주 발생하면 사용자 경험에 좋지 않은 영향을 끼치게 된다.리플로우를 유발하는 속성으로는 margin, padding, offsetHe.. 2024. 7. 17.
[Browser]브라우저 렌더링 과정 브라우저 렌더링 과정1. HTML파일을 파싱해서 DOM 트리를 생성한다.2. CSS파일을 파싱해서 CSSOM트리를 생성한다.3. 생성된 DOM트리와 CSSOM트리를 합쳐서 렌더 트리를 생성한다. (display: none 같은 경우 렌더 트리에 포함되지 않는다.)4. 레이아웃 단계에서 렌더 트리의 각 요소의 크기와 위치를 계산해서 화면에 배치한다.5. 페인트 단계에서 배치된 요소들을 화면에 그린다.기본적으로 알던 일련의 브라우저 렌더링 과정에 대한 설명좀 더 세분화해서 보면1. DOM트리 생성HTML의 원시 바이트를 읽는다. (8비트의 데이터 형태, 바이트 스트림) ->HTML에 정의된 인코딩(ex. utf-8)에 따라 개별 문자로 변환 -> 변환한 문자와 가지고 있는 토큰을 비교해 HTML코드인지 확인.. 2024. 7. 17.
ECMAScript표준을 따르는 JS의 7가지 데이터 타입(자료형) 1. undefined - 개발자의 의도와 관계없이 시스템에 의해 자동으로 할당되는 값, 값이 할당되지 않는 변수 또는 존재하지 않는 객체 속성의 기본값2. null - 개발자가 값이 없음을 명시적으로 나타내기 위해 할당하는 값3. Boolean - ture 또는 false 값만 가질 수 있음, 논리적 상태를 나타내는 데 사용4. String - 문자열 데이터, 문자열은 변경 불가능(immutable)하며, 각 문자는 유니코드로 인코딩5. Symbol - 고유하고 변경 불가능한 원시 값을 나타냄, 주로 객체의 고유한 속성 키로 사용, 항상 고유하며, 같은 설명을 가진 심볼이라도 서로 다름6. Numeric (number + bigint)     - number : 숫자열 데이터, 자바스크립트에서는 하나의.. 2024. 6. 3.
ECMAScript, polyfill, transpile 에크마스크립트(ECMAScript)의 탄생넷스케이프와 마소는 자신들의 브라우저에 새로운 기능을 빠르게 늘리기 시작했고 이렇게 추가된 기능은 각자의 브라우저에서만 동작했다. 특히 익스플로러와 내비게이터의 DOM구조는 완전히 달랐는데 브라우저마다 웹 페이지가 다르게 동작하거나 제대로 동작하지않는 cross browsing이슈가 발생했다. 이에 따라 개발자의 어떤 기능을 추가하기 위해 두 개의 스크립트를 따로 개발 해야했다.또한 초기의  JS는 브라우저 생태계를 고려해서 작성된 것이 아니었고 단지 새로운 기능이 추가되는 형태로 발전했다.이에 따라 자바스크립트와 브라우저의 발전 속도의 차이가 나기 시작했고 결국 브라우저는 자바스크립트의 변화를 따라가지 못했다. 자바스크립트에 어떤 기능이 추가된다면 runtime.. 2024. 6. 3.

티스토리툴바