📌브라우저의 렌더링 과정 이해하기웹 개발자라면 한 번쯤 "브라우저가 어떻게 웹페이지를 렌더링할까?"라는 질문을 받아본 적이 있을 것이다.브라우저의 렌더링 과정에 대해 자세히 살펴보며, 웹페이지가 사용자에게 어떻게 표시되는지를 정리해보자!  📌브라우저와 렌더링 엔진브라우저는 사용자가 요청한 자원을 서버에서 받아와 화면에 표시하는 역할을 한다. 이 자원들은 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..

🍉 1. 내부 슬롯과 내부 매서드프로퍼티 어트리뷰트를 이해하기 위한 개념내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티(pseudo property)와 의사 메서드(pseudo method)다.자바스크립트 엔진에서 실제로 동작하지만, 외부로 공개된 객체의 프로퍼티는 아니다. -> 직접 접근할 수 없음 🍉 2. 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체자바스크립트 엔진은 프로퍼티를 생성할 때, 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. 프로퍼티 상태: 프로퍼티의 값(value), 값의 갱신 가능 여부(writable), 열거 가능 여부(enumerable), 재정의 가능 여부(config..

🍊 객체지향 프로그래밍객체 지향 프로그래밍 (Object-Oriented Programming, OOP)은 현실에 존재하는 객체를 소프트웨어에 표현하기 위한 방법이다. 프로그래밍에서 필요한 데이터를 추상화 시켜 상태와 행위를 가진 객체로 만들고, 객체들간의 상호작용을 통해 로직을 구성한다. 객체 지향 언어는 크게 두 가지 범주로 나눌 수 있다:1. 클래스 기반 객체 지향 언어2. 프로토타입 기반 객체 지향 언어 이번 포스팅에서는 이 두 가지 접근 방식의 개념과 특징, 그리고 주요 차이점을 살펴보려고 한다! 🍊 클래스 기반클래스 기반 객체지향 언어(Java,C++)클래스 기반 객체 지향 언어는 객체를 정의하기 위해 클래스라는 구조를 사용한다.클래스를 통해 객체의 속성(attribute)과 행위(meth..

데이터 타입은 값의 '종류'를 의미한다.자바스크립트 (ES6)는 7개의 데이터 타입을 제공한다. 7개의 데이터타입은 원시 타입과 객체 타입으로 분류할 수 있다. 구분데이터 타입설명원시 타입숫자(number) 타입숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존재문자열(string) 타입문자열불리언(boolean) 타입논리적 참(true)과 거짓(false)undefined 타입var 키워드로 선언된 변수에 암묵적으로 할당되는 값null 타입값이 없다는 것을 의도적으로 명시할 때 사용하는 값심벌(symbol) 타입ES6에서 추가된 7번째 타입객체 타입객체,함수,배열 등  1. 숫자 타입C나 자바의 경우, 정수와 실수를 구분해서 int,long,float,double 등과 같은 다양한 숫자 타입을 제공한..

1. 변수란 무엇인가? 왜 필요한가?변수하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 변수가 필요한 이유기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어들여 재사용할 수 있기 때문에 필요하다. 변수가 없다면, 이전에 실행한 연산 결과를 재사용하고 싶을 때, 메모리주소를 통해 연산 결과가 저장된 메모리공간에 직접 접근해야함 ->  매우 위험변수를 통해, 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고 변수를 통해 안전하게 값에 접근할 수 있다. 2. 식별자어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다.식별자는 어떤 값이 저장되어있는 메모리주소를 기억(저장)한다.값이 아니라, '메모리 주소'를 기억하고 있다.즉, 식별..

0. 초창기초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적으로 사용됨웹 서버 -> 대부분의 로직 실행브라우저 -> 서버로부터 전달받은 HTML과 CSS를 단순히 렌더링하는 수준 1. Ajax 1996년 Ajax의 등장 Javascript를 이용해 서버와 브라우저가 비동기(asynchronous) 방식으로 데이터를 교환하는 통신을 의미한다.  이전의 웹 페이지로 시작해 로 끝나는 완전한 html 코드를 서버로 부터 전송받아 웹페이지 전체를 렌더링함필요없는 부분까지 전부 렌더링 -> 불필요한 데이터 통신 발생성능 불리화면이 전환되면 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 다시 렌더링 -> 화면 깜빡임 현상 발생 Ajax 도입 후서버로부터 필요한 데이터만 전송받아 ..

자바스크립트에서 하나의 배열 안에 여러개의 객체를 담아서 관리하는 경우가 종종 있다. 이 때, 배열 내부의 객체 요소들을 정렬하기 위해서는 어떻게 해야할까? 배열 내부의 객체 요소들을 정렬하는 기준은 객체의 특정 속성일 수 있다.  user 객체배열 정렬하기const user = [ { name: '장원영', age: 21 }, { name: '안유진', age: 25 }, { name: '설윤', age: 34 }, { name: '민지', age: 88 },]; 위와 같이, user라는 객체 배열을 정렬한다고 가정하자. 각 원소의 속성들을 보면 age라는 숫자값과 name이라는 스트링값이 있다.이 age와 name속성을 기준으로 각각 나이순, 이름순으로 객체들을 정렬할 수 있다. 나이순..