본문 바로가기

반응형

분류 전체보기

(399)
[js] 브라우저 렌더링 과정(2) - HTML 파싱 및 DOM 생성 한 번 공부한 내용을 글로 주저리 적어본다. 브라우저가 주소창을 통해 서버에 데이터를 요청할 때 흔히 기본 도메인을 포함한 주소로 GET 요청을 보내면, 아무런 Path 나 query 문자열을 입력하지 않아도 서버는 브라우저에게 파일을 담아서 응답한다. 그 이유는 기본적으로 루트 경로로서 브라우저의 메인이 되는 HTML 파일이 기본값으로 설정되어 있기 때문이다. 보통 기본이 되는 HTML 파일을 index.html 로 정의하는데, 주소창 경로의 끝 부분에 index.html 이 보여야 하지만, 암시적으로 보이지 않도록 디폴트되어 있다. 따라서 브라우저는 도메인 주소로 GET 요청을 보내면 main이 되는 HTML 파일(index.html)을 받아 렌더링한다. 하지만, 응답을 받은 HTML 파일에는 CSS..
[js] 브라우저의 렌더링 과정(1) - 주소창 사용자가 브라우저에 그려지는 화면을 완전히 보기까지의 과정을 브라우저 렌더링 과정이라 한다. 다시 말해, 브라우저가 서버에 화면에 그리기 위한 데이터들을 요청하고, 서버가 요청에 대한 응답으로 데이터를 보내주면, 브라우저는 받은 데이터로 화면을 그리는 일련의 과정을 의미한다. 이 때 브라우저가 서버에 요청하기 위한 창이 존재하는 데 그것이 주소창이다. 즉, 우리는 알게 모르게 서버에 요청을 하고 서버는 우리에게 필요로 하는 정보를 보내주고 있었 던 것이다. 위 예시에는 다 나와있지 않지만, 주소창은 https: 로 흔히 알고 있는 Protocol, www.duklook.com 형태의 Host(도메인) :60 형태의 Port /manage/newpost 와 같이 /로 구분되는 Path ?type=post&..
[vscode] 만약에 '로드중..' 이라는 문구가 나타나며 무한 로드가 뜬다면? 간혹 vscode 를 사용하다보면, 특정 익스텐션이나 확장자가 어떠한 작업을 수행할 때 무한 로드가 뜨는 문제가 생길 수 있다. (본인만 그런 것일지도) 이로 인해 자동완성 기능이나 타입스크립트의 확장 기능 등을 사용하지 못하는 문제로 불편함이 생길 수 있는데, 이 때, 제일 기본적인 해결책은 프로그램을 다시 껐다가 키는 것이겠지만, 이 보다 더 간단한 방법이 존재한다. 당연한 방법이지만 실행중인 확장 호스트를 모두 재실행하면 된다. 방법은 윈도우 환경에서 [Ctrl] + [Shift] + [p] 를 조합(맥은 p 대신 ~)해서 누른 후 다음을 찾아서 선택하면, 몇 초 뒤 로드중인 호스트가 재실행되면서 깔끔하게 해결된다.
[javascript] reduce() Array.prototype.reduce(누적값, 배열의 요소, 기타옵션) 배열의 각 요소에 차례대로 접근하여 하나의 결과값을 반환하는 메서드 배열요소의 자리는 콜백함수가 1회 호출 시 마다 처리할 현재값을 나타낸다. 누적값은 실질적으로 배열요소인 현재값을 처리할 시 산출되는 결과이다. 초깃값이 지정되지 않으면, 누적값에는 배열의 0번째 요소가 들어가고, 배열요소(value)는 배열의 1번째 요소부터 차례대로 들어간다. 누적값은 초깃값이 지정되면, 초깃값이 누적값을 대체하며, 배열요소는 기존의 1번째 요소가 아닌 0번째 요소부터 차례대로 대입된다. 초깃값을 5로 지정했으므로 누적값의 자리에는 초깃값이 들어간 것을 확인할 수 있다. 누적값에 별도의 값을 더하면, 그 값이 누적값에 더해지며, 콜백함수가 호출..
[javascript] find() , findIndex(); Array.prototype.find(callback) callback 함수 내에서 구현된 조건을 만족하는 최초의 요소를 반환, 중복되는 요소가 있으면 뒤의 요소를 무시한다. 만일 조건과 일치하는 요소가 없으면 undefined 를 반환한다. const users =[ {username:"고기좋아"}, {username:"술좋아"}, {username:"야채싫어"}, {username:"야채싫어"} ]; const find = users.find(user => user.username ==="야채싫어"); console.log(find); // {username:"야채싫어"} Array.prototype.findIndex(callback) find 메서드와 마찬가지로 콜백함수 내 조건을 만족하는 요소를 ..
[javascript] concat , indexOf, includes Array.prototype.concat(추가할 배열) 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환 // 기존 배열 const currentNum = [1,2,3]; //추가할 배열 const addNum =[4,5,6]; //새로운 배열 const newNumbers = currentNum.concat(addNum); // ↓ ↓ ↓ console.log(newNumbers); // [ 1, 2, 3, 4, 5, 6 ] Array.prototype.indexOf( 찾을요소) Array 에서 찾을요소가 존재하면 그 요소가 위치한 인덱스를 반환하고, 없으면 -1 을 반환한다. /** 배열에서 타겟이 존재하는 경우 */ // 배열 ↓ // 0 const numbers = [1,2,3,4..
[javascript] push(), pop(), splice(), slice() Array.prototype.push() 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환 const numbers = [1,2]; numbers.push(3); console.log(numbers) //[1,2,3] const arrLen =numbers.push(4,5); console.log("새배열:",numbers,"배열길이:",arrLen) //새배열: [ 1, 2, 3, 4, 5 ] 배열길이: 5 Array.prototype.pop() 배열의 끝에 하나의 요소를 제거하고, 제거한 요소를 반환 const numbers = [1,2]; const newArr = numbers.pop(); console.log("기존배열:",numbers) // 기존배열: [1] console..
[javascript] 자바스크립트 내부 동작 자바스크립트는 동기적 언어이며, 인터프리터 형식의 언어이므로 코드를 위에서 한줄씩 순차적으로 처리한다. 그리고 이러한 코드를 처리하기 위해 쌓이는 장소가 있는데, 이를 호출스텍 혹은 콜스텍(Call Stack)이라 한다. 하지만, 무조건 순차적으로 처리하는 것은 아닌데, 비동기적 코드(setTImeout, animationframe, promise.then) 를 만나게 되면, 이 코드들은 1차적으로 Call Stack으로 이동시킨 후 곧바로 열외시켜 Web Apis 라고 불리는 공간으로 보내버린다. 여기서 Web Apis 는 비동기적 코드를 처리하는 영역으로, 이 공간에서 비동기적 코드들은 실행될 준비가 완료되고, Callback Queue 로 전달되어 대기상태가 된다. 이 때 무한정 대기상태가 되는 것..

반응형