TIL

document.body와 document.querySelector('body')

둘 다 현재 웹 페이지에서 HTML body 요소를 가리키지만, 서로 다른 방법을 사용하여 액세스합니다.

document.body는 document 객체의 속성으로, 현재 웹 페이지의 body 요소에 대한 참조를 반환합니다. 이 속성은 JavaScript를 사용하여 body 요소의 내용을 액세스하고 조작하는 데 매우 자주 사용됩니다. 웹 페이지의 body 요소에 직접 액세스하는 경우에는 document.body를 사용하는 것이 더 적합합니다.

document.querySelector('body')는 document 객체의 메소드로, 지정된 CSS 선택자와 일치하는 문서에서 첫 번째 요소를 반환합니다. 이 경우 CSS 선택자는 단순히 'body'이며, body 요소와 일치합니다. 이 메소드는 document.body보다 유연합니다. 왜냐하면 문서의 body 요소뿐만 아니라 모든 요소를 선택할 수 있기 때문입니다. 그러나 CSS 선택자에 대한 지식이 필요하므로 사용하기가 조금 더 복잡할 수 있습니다.

autofocus

autofocus는 HTML 요소 속성 중 하나로, 웹 페이지가 로드되거나 특정 요소가 나타날 때, 자동으로 해당 요소를 포커스하도록 하는 기능을 제공합니다. 이 속성을 사용하면 사용자가 웹 페이지를 더 쉽게 탐색할 수 있습니다.

예를 들어, 로그인 폼의 사용자 이름 필드에 autofocus 속성을 추가하면 웹 페이지가 로드될 때 자동으로 해당 필드가 포커스됩니다. 사용자는 로그인 페이지를 열 때마다 수동으로 사용자 이름 필드를 클릭하거나 탭 키를 눌러야 하는 불편함 없이, 즉시 필드에 입력할 수 있습니다.

autofocus 속성은 대부분의 HTML 요소에서 사용할 수 있습니다. 예를 들어, input, textarea, select, button, a, area 등에서 사용할 수 있으며, 대부분의 최신 브라우저에서 지원됩니다.

<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username" autofocus>

위의 코드에서 input 요소에 autofocus 속성이 추가되었습니다. 이제 웹 페이지가 로드될 때, input 요소가 자동으로 포커스를 받게 됩니다.

참고로, autofocus 속성은 한 페이지에서 한 번만 사용해야 합니다. 만약 동일한 페이지에서 여러 요소에 autofocus 속성을 추가하면, 브라우저는 마지막 요소에 대해서만 포커스를 설정합니다.

prepend()

prepend()는 jQuery와 JavaScript에서 사용되는 메소드 중 하나로, 지정된 요소의 첫 번째 자식으로 하나 이상의 요소를 추가합니다.
.appendChild()는 부모 요소의 마지막 자식으로 요소를 추가하는 반면, .prepend()는 부모 요소의 첫 번째 자식으로 요소를 추가합니다.

.prepend() 메소드는 jQuery에서 제공하는 메소드 중 하나이지만, 바닐라 자바스크립트에서도 사용할 수 있습니다.
ES6(ES2015)부터 ParentNode 인터페이스에서 prepend() 메소드가 추가되어, 바닐라 자바스크립트에서도 사용 가능합니다.

readAsDataURL()

readAsDataURL() 메소드는 File 객체나 Blob 객체의 데이터를 비동기적으로 읽어들여서 Base64 인코딩된 데이터 URL 형태로 반환하는 메소드입니다.

이 메소드를 사용하면, 이미지 파일이나 동영상 파일 등을 비동기적으로 로드하여 미리보기를 제공하거나, 서버에 업로드하기 전에 클라이언트 측에서 파일 데이터를 미리 확인할 수 있습니다.

다음은 FileReader 객체를 사용하여 readAsDataURL() 메소드를 호출하는 예제 코드입니다.

const input = document.getElementById("file-input");
const preview = document.getElementById("preview");

input.addEventListener("change", function() {
  const file = input.files[0];
  const reader = new FileReader();
  
  reader.addEventListener("load", function() {
    preview.src = reader.result;
  });
  
  reader.readAsDataURL(file);
});

위 코드에서, input 요소의 change 이벤트를 감지하여, 선택한 파일을 File 객체로 가져옵니다. 그리고 FileReader 객체를 생성하고, load 이벤트 핸들러를 등록합니다. load 이벤트가 발생하면, reader.result에 Base64 인코딩된 데이터 URL 형태로 파일 데이터가 저장됩니다. 마지막으로, preview 요소의 src 속성에 reader.result를 할당하여 미리보기를 제공합니다.

이렇게 하면, 파일 선택 폼에 이미지 파일을 선택하면 해당 이미지 파일을 Base64 인코딩된 데이터 URL 형태로 읽어들여서 미리보기를 제공할 수 있습니다.

Base64

Base64는 8비트 이진 데이터를 ASCII 문자로 변환하는 인코딩 방식 중 하나입니다. Base64는 이진 데이터를 전송하기 적합하지 않은 상황에서도 이진 데이터를 ASCII 문자로 변환하여 전송할 수 있도록 하는 것을 목적으로 합니다.

Base64는 64개의 문자를 사용하여 이진 데이터를 표현합니다. 이 64개의 문자는 영문 대문자, 영문 소문자, 숫자, '+'와 '/' 기호로 이루어져 있습니다. 또한, Base64는 문자열의 끝을 표시하기 위해 '=' 기호를 사용합니다.

이진 데이터를 Base64로 인코딩하는 방법은 다음과 같습니다.

이진 데이터를 6비트씩 끊어서 그 값을 나타내는 인덱스를 구합니다.
이 인덱스 값을 이용하여 Base64 문자표에서 해당하는 문자를 찾습니다.
이진 데이터의 마지막 부분이 6비트에 미치지 못할 때, 남은 비트 수에 따라서 '=' 기호를 추가합니다.
Base64 인코딩은 이진 데이터를 ASCII 문자로 변환하여 전송할 때 사용되며, 주로 이메일 첨부 파일, 이미지 데이터의 URL, 쿠키 등에 사용됩니다.

다음은 "Hello, World!" 문자열을 Base64로 인코딩하는 예제입니다.

const message = "Hello, World!";
const encodedMessage = btoa(message);
console.log(encodedMessage); // "SGVsbG8sIFdvcmxkIQ=="

위 코드에서 btoa() 메소드는 문자열을 Base64로 인코딩하는 내장 함수입니다. message 변수에 저장된 문자열을 btoa() 메소드를 사용하여 Base64로 인코딩하고, 인코딩된 문자열을 encodedMessage 변수에 저장합니다. 마지막으로, console.log()를 사용하여 encodedMessage를 출력합니다.

반대로, Base64로 인코딩된 문자열을 디코딩하여 이진 데이터를 추출하는 방법은 다음과 같습니다.

const encodedMessage = "SGVsbG8sIFdvcmxkIQ==";
const decodedMessage = atob(encodedMessage);
console.log(decodedMessage); // "Hello, World!"

위 코드에서 atob() 메소드는 Base64로 인코딩된 문자열을 디코딩하여 원래의 문자열을 추출하는 내장 함수입니다. encodedMessage 변수에 저장된 Base64 문자열을 atob() 메소드를 사용하여 디코딩하고, 디코딩된 문자열을 decodedMessage 변수에 저장합니다. 마지막으로, console.log()를 사용하여 decodedMessage를 출력합니다.

Blob

Blob은 Binary Large Object의 약자로, 이진 데이터를 나타내는 JavaScript 객체입니다. 이진 데이터는 바이너리 파일, 이미지, 동영상 등을 포함할 수 있습니다. Blob 객체는 이진 데이터를 캡슐화하고, 해당 데이터에 접근하고 조작할 수 있는 메서드를 제공합니다.

Blob 객체를 생성하려면 Blob() 생성자 함수를 사용하거나, BlobBuilder 또는 MSBlobBuilder 객체를 사용할 수 있습니다. Blob 객체는 이진 데이터와 함께 MIME 타입을 인자로 전달하여 생성합니다. MIME 타입은 데이터의 형식을 나타냅니다. 예를 들어, 이미지 파일의 MIME 타입은 image/png, image/jpeg, image/gif 등이 있습니다.

Blob 객체는 일반적으로 파일 업로드, 웹소켓 통신, IndexedDB 등에서 사용됩니다. 또한, Blob URL을 생성하여 HTML의 다운로드 링크 등에 사용될 수 있습니다.
다음은 Blob() 생성자 함수를 사용하여 문자열을 Blob 객체로 변환하는 예제입니다.

const str = "Hello, World!";
const blob = new Blob([str], { type: "text/plain" });
console.log(blob); // Blob {size: 13, type: "text/plain"}

위 코드에서 Blob() 생성자 함수를 사용하여 str 변수에 저장된 문자열을 Blob 객체로 변환합니다. new Blob([str], { type: "text/plain" })는 문자열 배열과 MIME 타입을 인자로 받습니다. 문자열을 배열로 전달한 이유는 Blob 생성자는 여러 개의 인자를 받을 수 있기 때문입니다. 하지만, 일반적으로 문자열 하나만을 전달합니다.

생성된 Blob 객체의 size 속성은 Blob 객체의 크기를 나타내며, type 속성은 MIME 타입을 나타냅니다.

다음은 FileReader 객체의 readAsArrayBuffer() 메소드를 사용하여 이미지 파일을 Blob 객체로 변환하는 예제입니다.

const fileInput = document.querySelector("#file-input");

fileInput.addEventListener("change", (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();
  
  reader.addEventListener("load", () => {
    const blob = new Blob([reader.result], { type: file.type });
    console.log(blob);
  });

  reader.readAsArrayBuffer(file);
});

위 코드에서 change 이벤트를 감지하여 파일 선택이 변경될 때마다 실행되는 콜백 함수를 등록합니다. 콜백 함수에서 event.target.files[0]로 선택된 파일을 가져오고, FileReader 객체를 생성합니다. FileReader 객체의 readAsArrayBuffer() 메소드를 사용하여 파일을 읽고, load 이벤트가 발생할 때마다 콜백 함수에서 Blob 객체를 생성합니다. MIME 타입은 선택된 파일의 MIME 타입을 사용합니다. 생성된 Blob 객체는 콘솔에 출력됩니다.

MIME

MIME (Multipurpose Internet Mail Extensions)은 인터넷에서 다양한 종류의 데이터를 전송하기 위한 메커니즘을 제공하는 표준 방식입니다. 이는 전자 메일 첨부 파일이나 웹에서 다양한 형식의 데이터(이미지, 오디오, 비디오 등)를 전송할 때, 그 데이터의 형식을 정의하기 위해 사용됩니다.

MIME은 각각의 데이터 형식을 식별하기 위해 고유한 식별자를 가지는데, 이를 MIME 타입이라고 부릅니다. MIME 타입은 일반적으로 확장자로 구분되며, 예를 들어 .jpg 파일의 MIME 타입은 "image/jpeg"입니다.

웹 개발에서 MIME 타입은 웹 서버에서 클라이언트로 전송되는 파일의 형식을 지정하는 데에도 사용됩니다. 이를 통해 브라우저가 파일을 올바르게 해석하고 표시할 수 있습니다.

캡슐화

캡슐화(Encapsulation)란 객체지향 프로그래밍에서 중요한 개념 중 하나로, 객체의 속성과 행위를 하나로 묶고, 외부에서의 접근을 제한하는 것을 의미합니다.

객체 내부에서의 데이터와 메서드를 캡슐화하여 외부에서의 직접적인 접근을 차단함으로써 객체를 보다 안전하고 효율적으로 사용할 수 있습니다. 객체 내부의 상태에 대한 접근을 제한함으로써 객체의 무결성(Integrity)을 보호하고, 외부와의 인터페이스를 간소화하여 객체를 쉽게 사용할 수 있도록 합니다.

캡슐화는 정보 은닉(Information Hiding)이라고도 부릅니다. 객체 내부의 구현 상세를 숨기고, 외부에 공개할 인터페이스만 노출시킴으로써 객체의 내부 동작 방식에 대한 의존성을 줄여 코드의 유지보수성을 높이는 데에도 큰 역할을 합니다.
자바스크립트에서는 캡슐화를 구현하기 위해 객체 내부의 변수와 메서드를 외부에서 직접적으로 접근하지 못하도록 하는 방법이 있습니다. 이를 위해 일반적으로 객체 내부의 변수와 메서드를 private으로 선언하고, 외부에서는 public으로 선언된 메서드를 통해 내부 변수와 메서드에 접근할 수 있도록 합니다. 이를 통해 객체 내부의 구현 상세를 외부에서 감출 수 있습니다.

아래는 캡슐화를 구현한 예시입니다.

// 객체 생성자 함수
function Person(name, age) {
  // private 변수 선언
  var _name = name;
  var _age = age;
  
  // public 메서드 선언
  this.getName = function() {
    return _name;
  };
  
  this.getAge = function() {
    return _age;
  };
  
  this.setName = function(name) {
    _name = name;
  };
  
  this.setAge = function(age) {
    _age = age;
  };
}

// 객체 생성
var person = new Person("John", 30);

// private 변수에 접근할 수 없음
console.log(person._name); // undefined

// public 메서드를 통해 접근
console.log(person.getName()); // "John"
console.log(person.getAge()); // 30

// public 메서드를 통해 값 변경
person.setName("Mike");
person.setAge(40);

console.log(person.getName()); // "Mike"
console.log(person.getAge()); // 40

위 코드에서 Person 생성자 함수 내부에 _name과 _age라는 private 변수를 선언하고, 이 변수들에 접근할 수 있는 public 메서드인 getName(), getAge(), setName(), setAge()를 정의했습니다. 이렇게 하면 외부에서는 _name과 _age에 직접적으로 접근할 수 없으며, 오직 public 메서드를 통해서만 접근할 수 있습니다. 이와 같은 방법을 사용하여 객체의 캡슐화를 구현할 수 있습니다.

캡슐화는 객체지향 프로그래밍의 핵심 개념 중 하나로, 객체의 내부 상태와 동작을 외부에서 알 수 없도록 감추는 것이 중요합니다. 이를 통해 코드의 안정성과 유지보수성을 높일 수 있습니다. 이외에도 상속, 다형성 등 객체지향 프로그래밍의 다양한 개념이 있으니 관심이 있다면 공부해보시면 좋을 것 같습니다.

16진수

16진수는 2진수와의 변환 계산이 쉬운 특징이 있기 때문에, 컴퓨터에서는 16진수를 자주 사용합니다. 2진수는 0과 1 두 가지 숫자로만 이루어져 있기 때문에, 이를 직접 표현하면 매우 길어지고 복잡해질 수 있습니다. 하지만 16진수는 한 자리에 0부터 9까지의 숫자와 A부터 F까지의 알파벳을 사용하기 때문에, 2진수와의 변환 계산이 매우 쉽습니다. 예를 들어, 16진수 0x0A는 2진수 00001010로 변환됩니다. 이와 같이 16진수는 컴퓨터에서 데이터를 표현하는 데 매우 편리한 방법 중 하나입니다.

Buffer

버퍼 객체는 바이너리 데이터를 다루는 데 사용되는 자바스크립트의 객체입니다. 바이너리 데이터는 0과 1로 이루어져 있기 때문에, 일반적인 문자열과는 다른 형태를 가지고 있습니다.

예를 들어, 이미지나 비디오 등의 파일을 처리할 때에는 바이너리 데이터를 다루어야 하는데, 이를 위해서는 바이너리 데이터를 처리하는 방식과 관련된 다양한 메서드들이 필요합니다.

이때 버퍼 객체는 바이너리 데이터를 다루는 데 필요한 메서드와 속성을 제공하며, 이를 통해 바이너리 데이터를 쉽게 다룰 수 있습니다. 버퍼 객체는 크기가 고정되어 있으며, 한 번 생성된 버퍼 객체는 변경이 불가능합니다. 따라서 바이너리 데이터를 변경해야 할 경우에는 새로운 버퍼 객체를 생성하거나, 기존 버퍼 객체를 복제한 후 변경하는 방법을 사용해야 합니다.

첫째, 파일은 바이너리 데이터로 이루어져 있기 때문에, 이를 처리하는 데에는 버퍼 객체를 사용하는 것이 편리합니다. 파일을 읽거나 쓸 때, 파일의 크기가 크기 때문에 데이터를 일부분씩 나누어 처리해야 합니다. 이때 버퍼 객체를 사용하면 큰 파일을 작은 블록으로 쪼개어 처리할 수 있으며, 각 블록마다 필요한 작업을 수행한 후 다시 조합할 수 있습니다.

둘째, 파일 전송에는 보통 MIME 타입이 사용됩니다. MIME 타입은 파일의 종류를 나타내는 데에 사용되며, 이는 HTTP 요청과 응답에서 중요한 역할을 합니다. 버퍼 객체는 이러한 MIME 타입을 지정하여 파일을 전송할 수 있습니다. MIME 타입을 지정하면, 파일의 종류를 정확히 인식할 수 있고, 이는 파일을 전송하는 데 있어서 중요한 역할을 합니다.