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

프로젝트를 진행하면서 데이터가 많아지면 페이지네이션(Pagination)이 필요하게 된다.라이브러리를 사용할 수도 있지만, 공부의 취지로 직접 구현해보기로 했다! 이번 포스팅에서는 React로 Pagination을 구현한 과정을 정리하려고 한다. 🌻 Pagination의 동작 구조Pagination의 전반적인 동작 구조는 네이버 블로그의 Pagination을 참고했다.1. 페이지 번호를 클릭하면 페이지가 변경된다. (URL의 쿼리 스트링 값이 업데이트된다.)2. 현재 페이지에는 active 디자인을 적용한다.3. 이전 및 다음 버튼은, 해당 방향으로 이동 가능한 페이지가 있을 때만 표시된다.4. 이전 버튼을 클릭하면, 이전 페이지 그룹의 마지막 페이지로 이동한다.5. 다음 버튼을 클릭하면, 다음 페이지..

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..

Kakao Maps API를 사용하여 사용자의 현재 위치를 지도에 표시하는 방법에 대해 정리해보려고 한다. Geolocation API를 통해 현재 위치를 가져오고, 해당 위치를 Kakao Maps에 표시하는 방식으로 구현했는데, 구체적인 과정을 단계별로 설명해보자! 그 전에, 현재 위치를 Geolocation API를 사용해서 가져오는 방식이 가장 보편적인 것을 알았다.Geolocation API란?Geolocation API는 웹 브라우저에서 사용자의 현재 위치 정보를 얻을 수 있게 해주는 API이다.이 API를 사용하면 사용자의 허락을 받아 현재 위치를 가져올 수 있다. 아래와 같이 호출하여 현재 위치를 가져올 수 있다.navigator.geolocation.getCurrentPosition(suc..

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

🍎 React-Router를 사용하는 이유 프로젝트를 진행하면서 React Router Dom을 사용하면 React 애플리케이션 내에서 페이지 간 이동을 쉽게 구현할 수 있다.기존 태그를 사용할 경우, 페이지 전체가 새로 로딩된다.이는 화면 깜빡임이 필수적으로 발생하고, 이는 사용자 경험을 떨어뜨릴 수 있다! React-Router를 사용하면, 라우팅을 통해 부드러운 화면 전환이 가능해진다.즉, SPA 사용자 경험 향상을 위해 React Router를 사용하는 것이다. Router의 종류에는 HashRouter, BrowserRouter가 있다. 나는 주로 BrowserRouter를 사용하여 개발을 해왔다. +) 이전에 하루네컷 서비스를 진행할 때, 배포 후 로그인 기능에서 리다이렉트가 안되는 문제를 ..

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