📖 들어가며 브라우저 주소창에 url을 입력하면 생기는 과정들에 대해서 알아보겠습니다. DNS 레코드 확인 첫 번째로, 브라우저는 DNS(Domain Name Server) 레코드의 캐시를 확인하여 해당 URL의 IP 주소를 찾게 됩니다. DNS(Domain Name Server)란? DNS는 분산 데이터베이스 시스템입니다. DNS는 도메인 이름과 IP 주소를 매핑해주는 서버로, 브라우저가 인터넷 자원을 로드할 수 있도록 도와줍니다. 즉, DNS는 전화번호부와 같은 역할을 합니다. 사람들이 이름으로 다른 사람을 찾듯이, 컴퓨터는 DNS를 사용하여 웹사이트의 도메인 이름을 해당 IP 주소로 변환합니다. 해당 과정에서 아래의 순서로 확인을 하게 됩니다. 브라우저 캐시 확인: 브라우저는 이전에 방문한 웹사이트..

📖 들어가며 웹 애플리케이션을 제작하거나 사용하면서 가장 중요한 부분 중 하나는 데이터의 저장 및 관리입니다. 이를 위해 쿠키, 세션, 웹 스토리지와 같은 기술들이 널리 사용되고 있으며, 이들은 각각은 고유한 특징과 장단점을 가지고 있습니다. 이번 글에서는 쿠키, 세션, 웹 스토리지의 차이를 자세히 알아보고, 각각의 장단점과 일반적인 사용 상황, 그리고 보안 이슈에 대해 살펴보겠습니다. 쿠키(Cookie) 쿠키는 웹 서버 또는 클라이언트에서 생성되어 웹 브라우저에 저장되는 클라이언트 측에 저장되는 key와 value로 이루어진 작은 텍스트 파일입니다. 일반적으로 쿠키는 만료일을 가지고 있으며, 만료일이 지나면 자동으로 삭제되는 구조입니다. 웹 서버가 응답을 보낼 때 HTTP 헤더를 통해 쿠키를 클라이언트..

📖 들어가며리액트가 뛰어난 성능을 보여줄 수 있는 비결 중 하나는 바로 가상 돔(Virtual DOM)입니다.이는 리액트의 핵심 개념 중 하나로 가상 돔에 대해 알아보겠습니다.DOM(Document Object Model)웹 사이트에 접속하면 보이는 각각의 요소(Element)들이 모여 하나의 문서(Document)를 구성합니다.이러한 문서의 구조를 프로그래밍 언어가 이해할 수 있도록 표현한 것이 바로 DOM입니다.DOM은 요소들을 트리(Tree) 형태로 표현하며, 각 요소에 해당하는 노드(Node)가 존재합니다.개발자들은 DOM이 제공하는 API를 이용해 이러한 DOM 구조에 접근하고, 내용이나 스타일을 변경할 수 있습니다.이런 과정을 DOM 조작이라고 부릅니다. 하지만 예를 들어, 웹 페이지의 특정..

정의 HTTP란 Hyper Text Transfer Protocol의 약자로 웹상에서 데이터를 주고받기 위한 프로토콜입니다. 작동원리 HTTP는 클라이언트-서버 모델에 기반을 두고 있습니다. 클라이언트는 서버에 요청(request)를 보내고, 서버는 이에 대한 응답(response)을 보냅니다. HTTP 메소드 HTTP 메소드는 클라이언트가 수행하는 동작을 서버에게 알려줍니다. 즉, 클라이언트는 요청(request)의 목적에 따라 적절한 HTTP 메소드를 사용합니다. HTTP 메소드 설명 사용 예시 GET 데이터 조회를 요청 특정 페이지 접속, 정보 검색 POST 데이터 생성 요청 회원가입, 글쓰기 PUT 데이터 수정 요청 회원 정보 수정, 글 수정 DELETE 데이터 삭제 요청 회원 정보 삭제, 글 삭..

📖 들어가며 함수 컴포넌트 도입 리액트에서 함수 컴포넌트는 리액트가 처음 생겼을 때부터 있었지만, 처음에는 상태관리나 생명주기 메소드를 사용할 수 없어서 주로 단순한 표현을 위한 용도로 사용되었습니다. 하지만, 리액트 16.8 버전에서 Hooks가 도입되면서 함수 컴포넌트에서도 상태관리와 생명주기 메소드와 유사한 기능을 활용할 수 있게 되었습니다. Hooks의 도입은 함수 컴포넌트의 활용 범위를 크게 확장시키고, 현재는 함수 컴포넌트만으로도 대부분의 기능을 구현할 수 있게 되었고, 그 결과 함수 컴포넌트의 사용이 크게 늘었습니다. 실제로 리액트 공식문서에서도 클래스 컴포넌트보다 함수 컴포넌트로 작성하는 것을 권장하고 있습니다. 함수형(Functional)이 아니라 함수(Function) 컴포넌트라고 부르..

📖 들어가며 자바스크립트의 핵심 개념 중 하나인 이벤트 버블링과 캡쳐링에 대해서 알아보겠습니다. 버블링(Bubbling) 이벤트 버블링이란 무엇일까요? 한 요소에 이벤트가 발생하면, 해당 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 해당 과정이 반복이 됩니다. 간단한 아래 코드 예제를 보면 바로 이해가 될 것입니다. 가장 안쪽에 있는 p태그를 클릭했는데 3개의 핸들러가 동작하는 게 보이시나요? p에 할당된 onclick 핸들러 실행 바깥의 div에 할당된 핸들러 실행 그 바깥의 form에 할당된 핸들러 실행 documnet 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작합니다. 마찬가지로 div를 클릭하면 div -..

📖 들어가며 자바스크립트에서 코드의 실행 순서와 스코프를 이해하는 데 중요한 역할을 하는 중요한 개념 중 하나인 호이스팅(hoisting)에 대해서 알아보겠습니다. 호이스팅(hoisting)이란 ❓ 호이스팅은 자바스크립트 엔진이 스크립트를 해석하고 실행하는 과정에서, 변수나 함수, 클래스 선언을 코드의 맨 위로 '끌어올리는' 것과 같은 현상을 말합니다. 보통 호이스팅에 대한 설명을 보면 '끌어올려진다'라고 대부분 설명이 되어 있는데 호이스팅이 실제로 코드를 물리적으로 최상단으로 옮기는 것은 아닙니다. 이는 자바스크립트 엔진의 내부 동작 방식을 설명하는 개념일 뿐입니다. 호이스팅은 실행 컨텍스트의 생성 단계에서 일어납니다. 실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 말합니다. 생성 단계에서는 변수..

소개 병합 정렬(Merge Sort)은 대표적인 분할 정복(Divede and Conquer) 알고리즘 중 하나로, 리스트를 반으로 나눈 뒤 각각을 재귀적으로 정렬하고, 정렬된 두 개의 리스트를 합쳐서 정렬된 하나의 리스트를 만드는 알고리즘입니다. 작동 개념💡 병합 정렬은 일반적으로 다음과 같은 세 단계로 구성됩니다. 분할(Divide): 입력 리스트를 같은 크기의 두 개의 부분 리스트로 분할합니다. 이때 분할은 리스트의 중간 지점에서 수행됩니다. 정복(Conquer): 각 부분 리스트를 재귀적으로 병합정렬을 이용해 정렬합니다. 이 과정은 입력 리스트의 크기가 충분히 작아질 때까지 반복됩니다. 병합(Merge): 정렬된 두 부분 리스트를 하나의 정렬된 리스트로 병합합니다. 0개 요소, 1개 요소 배열이 ..

소개 간단하고 직관적인 정렬 알고리즘 중 하나입니다. 배열의 원소를 순서대로 탐색하며, 각 원소를 이미 정렬된 배열 부분과 비교하여 적절한 위치에 삽입하는 방식으로 정렬을 진행합니다. 대부분의 경우 다른 고급 정렬 알고리즘보다 성능이 떨어지기 때문에 매우 큰 배열이나 시간제한이 있는 경우에는 다른 정렬 알고리즘을 사용하는 것이 좋습니다. 예제 코드 // 첫 번째 방법 function insertionSort(array) { for (let i = 1; i = 0 && array[j] > current) { array[j + 1] = array[j]; j--; } array[j ..