📌브라우저의 렌더링 과정 이해하기웹 개발자라면 한 번쯤 "브라우저가 어떻게 웹페이지를 렌더링할까?"라는 질문을 받아본 적이 있을 것이다.브라우저의 렌더링 과정에 대해 자세히 살펴보며, 웹페이지가 사용자에게 어떻게 표시되는지를 정리해보자!  📌브라우저와 렌더링 엔진브라우저는 사용자가 요청한 자원을 서버에서 받아와 화면에 표시하는 역할을 한다. 이 자원들은 HTML 문서, 이미지, PDF 파일 등 다양한 형태를 가질 수 있으며, 브라우저는 이러한 자원을 렌더링 엔진을 통해 화면에 표시한다. 각 브라우저는 고유한 렌더링 엔진을 사용하며, 예를 들어 크롬은 블링크(Blink), 사파리는 웹킷(Webkit), 파이어폭스는 게코(Gecko)라는 렌더링 엔진을 사용한다. 렌더링 엔진HTML, CSS, JavaSc..

1. 일급 객체다음과 같은 조건을 만족하는 객체를 일급 객체라 한다.1. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다.2.변수나 자료구조(객체, 배열 등)에 저장할 수 있다.3. 함수의 매개변수에 전달할 수 있다.4. 함수의 반환값으로 사용할 수 있다. 자바스크립트의 함수는 위의 조건을 모두 만족하는 일급 객체다! // 1. 무명의 리터럴로 생성할 수 있다.// 2. 변수에 저장할 수 있다.// 런타임에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다.const increase = function (num) { return ++num;};const decrease = function (num) { return --num;};// 2. 함수는 객체에 저장할 수 있다.co..

replace()와 replaceAll()replace()와 replaceAll() 함수는 모두 자바스크립트에서 문자열의 특정한 문자 또는 문자열을 치환하는 함수이다.replace()는 조건 대상이 되는 첫 번째 문자 하나만 변경되어서 반환한다.const message = "Hello Hello world!";// "Happy Hello world!"document.write(message.replace("Hello", "Happy")); * replace()함수는 전달받은 문자를 수정하는 것이 아니라, 새로운 값을 만들어 '반환'한다 (기존의 문자는 그대로 존재)  replaceAll()은 조건 대상이 되는 모든 문자를 만들어 반환한다. const message = "Hello Hello world!"..

includes() 함수Include() 메서드는 문자열에 다른 문자열이 포함되어 있는지 여부를 확인한다.배열에서도 사용 가능하다string.includes(searchString [,position]) Include() 메서드는 문자열에서 searchString이 발견되면 true를 반환하고, 그렇지 않으면 true를 반환합니다. 그렇지 않으면 false를 반환한다.position 매개변수(optional)는 searchString 검색을 시작할 문자열 내의 위치를 지정한다. 위치의 기본값은 0입니다.include()는 대소문자를 구분하여 문자열과 일치한다. 배열 let arr = [1, 2, 3, 4, 5];if (arr.includes(3)) { console.log('배열에 숫자 3이 포함되..

코딩테스트 문제를 풀 때, 문자열을 배열로 변환해야 하는 경우가 많이 있다. 예) 'string' -> ['s', 't', 'r', 'i', 'n', 'g'] 이럴 때, 흔히 쓰는 방법은 크게 3가지가 있다. 1)  String.prototype.split() : 스트링 프로토타입 메서드 split2)  [...string] : 스프레드 연산자 (ES6부터 추가)3) Array.from(string) : Array 객체의 정적 메서드 1. String.prototype.split()split() 메서드는 구분자로 문자열을 분리하여 배열로 변환한다. 예시1) const str = 'The quick brown fox jumps over the lazy dog.';const words = str.split(..

forEach()배열의 모든 요소에 대해, 동작하게 해주는 메소드이다. 전달하는 매개변수와 기능이 map() 과 유사하다. 그러나, forEach() 함수는 return값이 없다.따라서, 해당 메소드를 호출하면 undefined가 출력된다.예를 들어, 기존 배열을 수정하기만 하는 상황과 같이, 새로운 배열을 리턴해줘야 하는 상황이 아니라면 forEach() 를 사용하는 것이 더 바람직하다const arr=[1,2,3,4];arr.forEach((i)=>{ if(i===1){ arr[i]=4; }})console.log(arr); // [1,4,3,4]  indexOf문자열에서 특정 문자열을 찾아서 첫번째 위치를 인덱스 숫자로 리턴해주는 메소드이다. 2가지 매개변수로 '찾을 문자열'과 '시..

Javascript에서 배열의 여러 원소들 중에서 최댓값, 최솟값을 구하는 방법을 정리해보자. 0. Math.max(), Math.min() 이란?1. Function.prototype.apply() 사용2. Spread Operator 사용 0. Math.max(), Math.min() 이란?Math.max()와 Math.min()은 파아리터로 입력받은 '숫자'들 중 최대값과 최소값을 구해서 리턴하는 함수이다.  그렇다면, '배열'에 담긴 여러 숫자 중 최소값과 최대값을 구하려면 어떻게 해야할까?배열에 담긴 원소들을 하나씩 꺼내서, Math.max()함수와 Math.min()함수의 파라미터로 전달하면 된다. 이렇게 하기 위해서는 크게 두 가지 방법을 사용할 수 있다.Function.prototype.a..

array.slice(start[,end])slice() 메서드는 어떤 배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환한다. 즉, 원본 배열은 바뀌지 않는다const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];console.log(animals.slice(2));// Expected output: Array ["camel", "duck", "elephant"]console.log(animals.slice(2, 4));// Expected output: Array ["camel", "duck"]console.log(animals.slice(1, 5));// Expected output: Array [..